- Проблема с предоставленным клиентом контентом
- Googlebot
- Как Googlebot видит SPA
- Удаление рендеринга на стороне сервера
- Но ждать...
- Будьте скептичны в отношении JavaScript
- оптимизация
- Что делать, если SEO критичен
- Рендеринг на стороне сервера
- Предварительная визуализация
- Заключение
Печально известной темной областью разработки одностраничных приложений (SPA) является SEO. В зависимости от того, кого вы спрашиваете, сканирование поисковым контентом в поисковых системах совершенно нормально , хорошо, пока это синхронно или же совсем не хорошо ,
Из-за путаницы, вызванной всеми этими противоречивыми советами, я регулярно вижу вопрос "мой Vue SPA подходит для SEO?" подходить в таких местах, как Vue.js Разработчики Facebook группа , Форумы Vue.js , а также r / vuejs на Reddit ,
В этой статье мы бросим вызов популярным мнениям, проведем некоторые базовые тесты и попытаемся в заключение дать несколько полезных советов по созданию SEO-ориентированных SPA.
Примечание: эта статья была изначально опубликована здесь, в блоге разработчиков Vue.js на 2018/04/09.
Проблема с предоставленным клиентом контентом
Стандартная реализация одностраничного приложения предоставляет браузеру страницу-оболочку без какого-либо значимого содержимого. Вместо этого контент загружается по запросу с сервера с помощью AJAX, а затем добавляется на страницу с помощью JavaScript.
Это позволяет пользователю просматривать «страницы» сайта SPA без обновления страницы, теоретически улучшая UX.
Хотя эта архитектура работает для пользователей, просматривающих страницу в браузере, как насчет сканеров поисковых систем? Могут ли сканеры запускать JavaScript? Если так, будут ли они ждать завершения вызовов AJAX, прежде чем сканировать страницу?
Это важно знать, так как он может определить, индексируется ли контент сайта поисковой системой, и не менее важно, насколько хорошо его контент ранжируется.
Googlebot
Так как Google является ведущая поисковая система во всем мире наш запрос должен сосредоточиться на Googlebot, поисковике Google.
В первые дни Интернета робот Googlebot сканировал только статический HTML-код, представленный на странице. это было объявлено в 2014 году однако теперь этот робот Google попытается отобразить JavaScript до начала сканирования.
Чтобы помочь устранить любые проблемы с отображением страницы, модифицированной JavaScript, Google предоставил веб-мастерам Просмотреть как Google инструмент, который показывает снимок того, что робот Google видит по определенному URL.
Один распространенный миф заключается в том, что робот Googlebot не будет сканировать асинхронный JavaScript. Эта статья сделал большую работу, чтобы разорить его. TLDR; Робот Google будет ждать не менее 20 секунд для завершения асинхронных вызовов!
Как Googlebot видит SPA
Наиболее существенным примером SPA Vue.js является Vue HackerNews Clone 2.0 , Это проект с открытым исходным кодом, предоставленный командой Vue, чтобы продемонстрировать все возможности Vue и эффективные шаблоны проектирования.
Я развернул это приложение в экземпляре Heroku и запустил его через Fetch As Google. На изображении ниже, скриншот слева показывает, как робот Google видел его, а скриншот справа показывает, как его увидит пользователь. Они кажутся идентичными.
Удаление рендеринга на стороне сервера
Одна из ключевых особенностей Vue HackerNews Clone 2.0 - рендеринг на стороне сервера (SSR). Это означает, что, в отличие от более простого SPA, содержимое каждой страницы отображается на сервере и предоставляется браузеру при каждой загрузке страницы, как если бы это был статический HTML.
Тем не менее, мы пытаемся понять, как робот Google видит клиентский контент. По этой причине я выключил SSR и снова запустил тест:
Даже с клиентским рендерингом у Googlebot не было проблем с просмотром контента. Я также ждал несколько дней, чтобы увидеть, проиндексировал ли Google приложение. Это было:
Но ждать...
Хотя этот тест, по-видимому, удовлетворяет любые опасения, связанные с отображаемым клиентом контентом, есть несколько причин, по которым вам не следует полностью доверять ему:
- Как и все механизмы JavaScript, робот Googlebot не будет непогрешимым, и могут быть крайние случаи, когда он не может отобразить вашу страницу.
- То, что страница может быть проиндексирована, не означает, что она будет иметь хороший рейтинг.
Будьте скептичны в отношении JavaScript
У Googlebot не было проблем с отображением Vue HackerNews. Но мы не должны заключать, что он может отображать весь JavaScript так безупречно. Объявление Google в 2014 году о рендеринге JavaScript ясно дало понять, что гарантии не будет, хотя большинство разработчиков, похоже, упустили это из виду.
Как и браузер, робот Googlebot должен иметь движок JavaScript с определенным подмножеством реализованных веб-стандартов и функций ES, а также особые особенности их реализации.
В соответствии с это видео от разработчиков Google Адди Османи и Роба Додсона (выпущен в ноябре 2017 г.), Googlebot в настоящее время основан на Chrome 41. Существует множество новых API, выпущенных начиная с версии 41, и, если бы вы использовали какой-либо из них, предположительно, Googlebot не будет возможность визуализации и индексирования вашей страницы.
Вы можете подумать, что это тривиальная проблема, поскольку в любом случае вам нужно будет перенести или заполнить такие функции для старых браузеров. Суть, однако, в том, что вы не должны слепо верить в то, что ваше приложение правильно запускается каждым поисковым сканером, точно так же, как вы не будете слепо верить в то, что ваше приложение корректно запускается каждым браузером.
оптимизация
Не забывайте, что «O» в «SEO» означает «оптимизация». Быть проиндексированным для поисковой системы недостаточно; мы хотим, чтобы наши сайты тоже имели хороший рейтинг. Получить Как Google говорит нам, как страница видится, но не как страница сравнивается с конкурентами.
Есть интересный комментарий к статье SEO против React: веб-сканеры умнее, чем вы думаете сделано экспертом по SEO Барри Адамс , На тему того, как поисковые системы ранжируют SPA он сказал :
«То, что происходит, когда вы используете React без рендеринга на стороне сервера, заключается в том, что сканер останавливается на самой первой странице, потому что не видит никаких гиперссылок, по которым нужно следовать ... Это делает процесс сканирования невероятно медленным и неэффективным. И именно поэтому веб-сайты построенные на React (и аналогичных платформах JavaScript) работают в Google хуже, чем веб-сайты, которые в первую очередь предоставляют сканеру простой HTML-код. Веб-сайты простого HTML можно сканировать очень эффективно, добавленное и измененное содержимое будет сканироваться и индексироваться намного быстрее, и Google гораздо лучше умеет оценивать приоритет сканирования отдельных страниц на таких сайтах ».
Хотя он не приводит никаких доказательств этого, похоже, он соответствует философии других определяющих факторов, таких как скорость страницы ,
Что делать, если SEO критичен
Суть в том, что если SEO имеет решающее значение, вы не можете полагаться на визуализацию клиента вашего SPA и должны следить за тем, чтобы контент входил в ваши страницы.
Это не значит, что вам нужно отказаться от архитектуры SPA. Существует два метода, рендеринг на стороне сервера и предварительный рендеринг, которые могут достичь желаемого результата.
Рендеринг на стороне сервера
Рендеринг на стороне сервера (SSR) - это когда страница отображается веб-сервером как часть цикла запрос / ответ сервера. В случае Vue.js и других подобных сред это выполняется путем запуска приложения на виртуальной DOM.
Состояние виртуального DOM преобразуется в строку HTML, а затем внедряется в страницу перед отправкой клиенту. Когда страница достигает браузера, приложение JavaScript легко монтируется поверх существующего контента.
SSR гарантирует, что ваша страница будет дружественной для сканера, так как содержимое страницы заполнено независимо от того, как или даже если сканер выполняет JavaScript.
У ССР есть свои минусы:
- Вам нужно будет сделать ваш код «универсальным», то есть он должен работать как в браузере, так и в серверной среде JavaScript. Это означает, что любой код, который ожидает, что API браузера и объекты, такие как window, будут доступны, не будет работать.
- Ваше приложение будет запускаться при каждом запросе к серверу, добавляя дополнительную нагрузку и замедляя ответы. Кэширование может частично облегчить это.
- Внедрить SSR сложно и отнимает много времени, поэтому вам понадобится больше времени для разработки проекта.
- Это хорошо работает только с бэкэндом Node.js. SSR может быть сделан с не-Node бэкэндами, например, с использованием расширения PHP v8js Но такие решения довольно ограничены.
Если вы заинтересованы в реализации рендеринга на стороне сервера в SPA Vue.js, вам следует начать с официального руководства: Vue.js Руководство по рендерингу на стороне сервера , Я также написал руководство по реализации SSR с помощью Laravel и Vue.js: Рендеринг на стороне сервера с помощью Laravel & Vue.js 2.5 ,
Совет: такие рамки, как Nuxt.js поставляются с серверным рендерингом из коробки.
Предварительная визуализация
Если вы не можете использовать SSR по одной из вышеуказанных причин, есть другой способ: предварительная визуализация. При таком подходе вы запускаете приложение с автономным браузером в своей среде разработки, делаете снимок страницы и заменяете свои HTML-файлы этим снимком в ответе сервера.
Это в значительной степени та же концепция, что и SSR, за исключением того, что она выполняется перед развертыванием, а не на реальном сервере. Обычно он выполняется безголовым браузером, таким как Chrome, и может быть включен в процесс сборки с помощью Webpack, Gulp и т. Д.
Преимущество предварительного рендеринга заключается в том, что он не требует рабочего сервера Node.js и не увеличивает нагрузку на рабочий сервер.
Тем не менее, предварительный рендеринг также имеет свои недостатки:
- Это плохо работает для страниц, которые отображают изменяющиеся данные, например, Vue HackerNews.
- Это не подходит для страниц, которые имеют пользовательское содержимое, например страницу учетной записи с личными данными пользователя. Тем не менее, такого рода страницы менее важны для SEO; Вы обычно не хотите индексировать страницу учетной записи в любом случае.
- Вы должны будете предварительно отрендерить каждый маршрут в приложении по отдельности, что может занять много времени для большого сайта.
Если вы заинтересованы в реализации предварительного рендеринга в приложении Vue.js, я написал руководство для этого блога: Приложение Pre-Render A Vue.js (с узлом или Laravel)
Совет: предварительный рендеринг для SEO можно приобрести как услугу у prerender.io
Заключение
Многие разработчики увидели, что объявление Google о рендеринге JavaScript в 2014 году положило конец опасениям SEO относительно контента SPA. На самом деле, нет никакой гарантии, что робот Googlebot правильно отобразит страницу, и, если это так, он все равно может ранжировать страницу ниже, чем статические HTML-страницы на конкурирующих сайтах.
Мой совет: если вы собираетесь использовать архитектуру SPA, обязательно предоставьте серверные отрисованные или предварительно обработанные страницы.
Пройдите бесплатный ознакомительный курс Vue.js! Узнайте, что такое Vue, какие приложения вы можете создавать с его помощью, как они сравниваются с React & Angular, и многое другое из этого 30-минутного видео в видео-введении. Зарегистрируйтесь бесплатно!
Похожие
Поисковая оптимизация (SEO)Наша команда профессионалов из Австралии обладает практическими техническими знаниями, позволяющими каждому участнику предоставлять точную информацию. Мы никогда не используем автоматизированные или аутсорсинговые методы, и мы всегда поддерживаем открытый и прозрачный SEO оптимизация Прага
... нас будет все под рукой, и ваш сайт будет оптимизирован. Было бы лучше, если бы вы пользовались нашими услугами на регулярной основе, потому что обратные ссылки должны работать регулярно, поэтому мы можем организовывать ежемесячные SEO- сервисы , благодаря написанию статей и тому подобному, чтобы обеспечить вам наибольшее количество трафика в Интернете и лучший шанс, что вы кто-то найдет, и что кто-то заметит вас, и что кто-то также увидит ваш сайт и закажет Что такое поисковая оптимизация (SEO)?
... seor.com/wp-content/uploads/2015/03/profeseor_post_3.jpg"> SEO - это метод улучшения и продвижения сайтов. SEO также может увеличить количество посетителей, полученных из поисковых систем (Google, Yahoo, Bing и т. Д.). Есть много аспектов, которые влияют на SEO, начиная со слов на вашем сайте и заканчивая ссылками на сайт. SEO также известен как метод, Seo Optimization - поисковая оптимизация Google.
SEO Оптимизация = поисковая оптимизация. Вообще говоря, оптимизация SEO - это маркетинг , понимая, как работают алгоритмы поиска и что посетители ищут для установления соответствия с веб-страницами, предлагающими то, что они ищут. Определенные усилия по SEO могут SEO Петри
Да, мы живая лаборатория, практикуем то, что проповедуем, и рассказываем вам все об этом. 12 дней назад я писал о нашем (пере) рождении как о присутствии в Google , Сегодня мы находимся на втором месте в нашем ключевом термине «Агентство по маркетингу технологий B2B» на Google.com (это верно .com!). Вот что произошло между тем ... SEO Cairns
Благодаря быстрому расширению продвижения веб-сайтов, они также обслуживают компании в Кернсе, помогая им добиться лучшей видимости в Интернете. SEO Cairns by Website Promotions даст вашему бизнесу значительный рост поисковой выдачи за счет «белой шляпы» SEO, что означает отсутствие манипулятивного построения ссылок. Поощрения веб-сайтов соответствуют рекомендациям Google для повышения рейтинга вместе с их SEO-ориентированными веб-дизайнерами и разработчиками. Они обеспечивают экономически SEO консультант
... на которые вам нужно ответить, чтобы успешно провести онлайн-маркетинг в поисковых системах, и если вы считаете, что попадаете в линию этих сайтов, у которых есть похожие проблемы, то я думаю, что сейчас самое подходящее время для оценки вашей текущей ситуации и найти кого-то, кто обеспечит долгосрочные решения этих проблем. Есть представление о том, к кому следует обратиться? Ну, это где SEO консультант SEO Ливерпуль
... seo-liverpul-1.jpg" alt="[vc_row] [vc_column width = ”1/1 ″] Поисковая оптимизация в Ливерпуле (SEO Ливерпуль) Вы бизнес в Ливерпуле, хотите получить больше бизнеса в Ливерпуле с вашего сайта"> Поисковая оптимизация в Ливерпуле (SEO Ливерпуль) Вы бизнес в Ливерпуле, хотите получить больше бизнеса в Ливерпуле с вашего сайта? Если это так, эффективный сайт SEO сервис, SEO Ливерпуль, вместе с отличным Джексонвилл SEO
Готовы работать с экспертом в Джексонвилле SEO? Сделайте свой бизнес веб-сайт выделиться в крупных городах США Получите отзывчивый сайт с высоким трафиком, вознагражденный Google Найдите в Интернете то, что вы делаете, увеличьте свою экспозицию Развивайте SEO Малайзия |
SEO-консалтинг может помочь увеличить число потенциальных клиентов в бизнесе, просто сделав бизнес-сайт быстрее найденным в различных поисковых системах. SEO консалтинговые компании работают над улучшением веб-сайта бизнеса, следуя различным методам и методам, которые SEO эксперты на самом деле нашли, чтобы работать хорошо. Вот как SEO Малайзия консалтинг может помочь увеличить количество потенциальных клиентов. Агент по недвижимости фокусируется Shopify SEO
Shopify - одна из лучших платформ электронной коммерции на рынке. Shopify невероятно прост в использовании, и кто-то, имеющий даже ограниченные технические знания, может относительно быстро создать интернет-магазин с помощью мощных инструментов Shopify. Управлять магазином тоже совсем несложно, но как вы продвигаетесь в маркетинге и настройке Shopify SEO, чтобы привлечь внимание? Здесь это немного усложняется, и это хорошая идея, чтобы связаться с профессионалом Shopify SEO для помощи.
Комментарии
Потом оказалось, что я все еще следую за ним, но в другом блоге, где я должен был знать или помнить, что это был его сайт, но хорошо, вы знаете, как иногда действует ум, не так ли?Потом оказалось, что я все еще следую за ним, но в другом блоге, где я должен был знать или помнить, что это был его сайт, но хорошо, вы знаете, как иногда действует ум, не так ли? Недавно он засветился не только на моем, но и на всех радарах; Глен хорошо всем нравится. Эта серия вопросов и ответов началась, когда экономическая ситуация была хуже, чем сейчас. Зарабатывание денег в Интернете кажется * ответом * для многих людей, которые, без Если вы выполняете какую-либо работу в Интернете, вы, вероятно, знакомы с термином «SEO», но знаете ли вы, что он означает и что он может сделать для вашего сайта?
Если вы выполняете какую-либо работу в Интернете, вы, вероятно, знакомы с термином «SEO», но знаете ли вы, что он означает и что он может сделать для вашего сайта? Во-первых, давайте ответим на вопрос, что означает SEO? Что такое SEO и SERP? SEO означает Поисковая оптимизация и это просто способ сказать, что таким поисковым системам, как Google Вы уже знаете обо всем, что можно делать, чего нельзя делать и что делать?
Вы уже знаете обо всем, что можно делать, чего нельзя делать и что делать? Теоретически хорошо разбирается? Тогда более поучительно проверить себя самостоятельно. Просто посмотрите, влияют ли небольшие изменения, которые вы делаете. Метод проб и ошибок наиболее поучителен. Особенно теория, мало практики Я прошел 2 курса, которые касались только теории. Это пока мне просто нужны лучшие практики. На обоих курсах были так называемые seo-мастера, которые демонстрировали теорию Является ли весь основной письменный контент на вашем сайте уникальным и не является ли дублирующим контентом с другого сайта?
Является ли весь основной письменный контент на вашем сайте уникальным и не является ли дублирующим контентом с другого сайта? У вас есть много не относящихся к делу страниц о других продуктах, услугах или отраслях, помимо поисковых фраз, на которые вы хотите настроить таргетинг на своем веб-сайте? Когда дело доходит до анализа содержания вашего веб-сайта и поисковых фраз, на которые вы хотите ориентироваться, необходимо принять во внимание многое, и мы сообщим вам о любых проблемах, с которыми А для этого " как попасть на первую страницу гугла «Если у вас отличный сервис, не ожидайте, что его найдет фантастическое имя, как люди узнают, что есть такой сервис?
Но возникает проблема: нужно ли вам быть экспертом в области SEO или обычно называют его экспертом по SEO для успеха в онлайн-бизнесе?
Но возникает проблема: нужно ли вам быть экспертом в области SEO или обычно называют его экспертом по SEO для успеха в онлайн-бизнесе? мы объясним ответ на эту статью Должен быть SEO экспертом для успеха в бизнесе онлайн SEO сам по себе является тем предметом, который, несомненно, так же хорош, как вы знаете, если у вас есть онлайн-бизнес, который опирается на трафик для привлечения покупателей. Медиа-опыт самого SEO даже сейчас имеет много, не мало и хороших компаний Но если вы работаете в маркетинговой команде с опытом новичка в SEO, что вам нужно знать, чтобы начать свою первую успешную SEO кампанию?
Но если вы работаете в маркетинговой команде с опытом новичка в SEO, что вам нужно знать, чтобы начать свою первую успешную SEO кампанию? На этом вебинаре Шон Уорк Попытки поделиться всем, что вам нужно знать об основах SEO, за 45 минут. Он обсуждает такие вещи, как оптимизация вашего сайта, создание контента и привлечение трафика на ваш сайт. Ранее Шон работал SEO менеджером в Advantage Marketing Consulting Services, которая предоставляла Но как получается, что большинство SEO-ориентированных и оптимизированных компаний тратят свои деньги на SEO и как вы максимально эффективно используете свои ограниченные ресурсы?
Но как получается, что большинство SEO-ориентированных и оптимизированных компаний тратят свои деньги на SEO и как вы максимально эффективно используете свои ограниченные ресурсы? Я более внимательно посмотрю на этот пост ... Органический трафик от Google - то есть посетители, приходящие из обычных результатов поиска, мы не платим Google за. Это можно сравнить с тем вниманием, которое мы получаем, когда газеты пишут о наших компаниях, продуктах и видах деятельности. Мы также не платим Вы понимаете, что вы, вероятно, должны знать, что такое «SEO» и что-то делать с этим, но у кого есть время?
Вы понимаете, что вы, вероятно, должны знать, что такое «SEO» и что-то делать с этим, но у кого есть время? Вот наша попытка разбить все, что вам нужно знать о значении SEO: Что такое определение SEO? SEO означает «поисковая оптимизация». Чтобы разобраться в этом, поисковая система - это просто такой сайт, как Google, Yahoo или Bing, куда люди ходят и ищут такие вещи, как «рецепты куриной запеканки» или «как починить спущенное колесо». Но мне интересно, что делать с моим сайтом, чтобы я мог быть на первом месте, как мне убедиться, что мой сайт номер один?
Но мне интересно, что делать с моим сайтом, чтобы я мог быть на первом месте, как мне убедиться, что мой сайт номер один? Хороший вопрос Итак, давайте сделаем это. Мы подумаем о том, как владеть сайтом. SEO - это набор шагов для создания сайта: создание контента на нем - слова в виде текста, изображений, видео, аудио ..., следовательно, созданный контент должен быть найден и они должны ценить ваш сайт Он также объяснил, как персонаж Сео Чана Янга будет вовлечен в драму: «Вы знаете, что есть термин, который говорит, является ли черное пятно на стороне света темнотой?
Он также объяснил, как персонаж Сео Чана Янга будет вовлечен в драму: «Вы знаете, что есть термин, который говорит, является ли черное пятно на стороне света темнотой? Я представляю [то же самое] с моим персонажем, Сео Чаном Янгом. потому что все внимание направлено на Кан Хана Гюна. Я думаю, что у Сео Чана Янга должно быть отношение: «Я также разнообразен, почему я должен быть вторым после него» Он продолжил: «Но опять же, Сео Чан Янг и Кан Хань Гюль - художники и музыканты перед обычными
Хотя эта архитектура работает для пользователей, просматривающих страницу в браузере, как насчет сканеров поисковых систем?
Могут ли сканеры запускать JavaScript?
Если так, будут ли они ждать завершения вызовов AJAX, прежде чем сканировать страницу?
Есть представление о том, к кому следует обратиться?
Управлять магазином тоже совсем несложно, но как вы продвигаетесь в маркетинге и настройке Shopify SEO, чтобы привлечь внимание?
Потом оказалось, что я все еще следую за ним, но в другом блоге, где я должен был знать или помнить, что это был его сайт, но хорошо, вы знаете, как иногда действует ум, не так ли?
Если вы выполняете какую-либо работу в Интернете, вы, вероятно, знакомы с термином «SEO», но знаете ли вы, что он означает и что он может сделать для вашего сайта?
Во-первых, давайте ответим на вопрос, что означает SEO?
Что такое SEO и SERP?