Является ли мое одностраничное SEO приложение дружественным?

1. Проблема с отображаемым клиентом контентом
2. Googlebot
3. Как Googlebot видит SPA
4. Удаление рендеринга на стороне сервера
5. Но ждать...
6. Будь скептиком по поводу JavaScript
7. оптимизация
8. Что делать, если SEO имеет решающее значение
9. Рендеринг на стороне сервера
10. Предварительная визуализация
11. Заключение

Печально известной темной областью разработки одностраничных приложений (SPA) является SEO. В зависимости от того, кого вы спрашиваете, сканирование поисковым контентом в поисковых системах совершенно нормально , хорошо, пока это синхронно или же совсем не хорошо ,

Из-за путаницы, вызванной всеми этими противоречивыми советами, я регулярно вижу вопрос "мой Vue SPA подходит для SEO?" подходить в таких местах, как Vue.js Разработчики Facebook группа , Форумы Vue.js а также r / vuejs на Reddit ,

В этой статье мы бросим вызов популярным мнениям, проведем некоторые базовые тесты и постараемся в заключение дать несколько полезных советов по созданию SEO-ориентированных SPA.

Проблема с отображаемым клиентом контентом

Стандартная реализация одностраничного приложения предоставляет браузеру страницу-оболочку без какого-либо значимого содержимого. Вместо этого контент загружается по запросу с сервера с помощью 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 приложение. Это было:

Но ждать...

Хотя этот тест, по-видимому, удовлетворяет любую озабоченность по поводу содержимого, отображаемого клиентом, есть несколько причин, по которым вам не следует полностью доверять ему:

1. Как и все механизмы JavaScript, робот Googlebot не будет непогрешимым, и могут быть крайние случаи, когда он не может отобразить вашу страницу
2. То, что страница может быть проиндексирована, не означает, что она будет иметь хороший рейтинг

Будь скептиком по поводу 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 гораздо лучше умеет оценивать приоритет сканирования отдельных страниц на таких сайтах ».

Хотя он не приводит никаких доказательств этого, похоже, он соответствует философии других определяющих факторов, таких как скорость страницы ,

Хотите создать полностью протестированные, готовые к использованию приложения Vue, подходящие для коммерческих целей?

Присоединяйтесь к предварительной продаже нашего предстоящего курса Enterprise Vue !

Что делать, если 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, обязательно предоставьте серверные отрисованные или предварительно обработанные страницы.

Похожие

Комментарии