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

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

  • Просмотров |

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

Из-за путаницы, вызванной всем этим противоречивым советом, я регулярно вижу вопрос «это мой Vue SPA в порядке для SEO?» появляются в таких местах, как Vue.js Developers Facebook group, Vue.js Forums и r/vuejs на Reddit.

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

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

Стандартная реализация одностраничного приложения предоставляет браузеру страницы «оболочка» без какого-либо содержательного содержания. Содержимое вместо этого загружается по требованию с сервера с помощью AJAX, а затем добавляется на страницу с помощью JavaScript.

Это позволяет пользователю просматривать «страницы» сайта SPA без обновления страницы, теоретически улучшая UX.

Хотя эта архитектура работает для пользователей, просматривающих страницу в браузере, как насчет поисковых роботов? Могут ли сканеры запускать JavaScript? Если да, будут ли они ждать завершения вызовов AJAX до обхода страницы?

Важно знать это, так как он может определить, индексируется или нет контент сайта с помощью поисковой системы, и также важно, насколько хорошо его содержание оценивается.

Googlebot

Поскольку Google является ведущей поисковой системой по всему миру, наш запрос должен быть сосредоточен на поисковом роботе Googlebot.

В первые дни Интернета Googlebot будет сканировать только статический HTML-код, представленный на странице. Было объявлено в 2014 году, однако, что робот Googlebot теперь попытается выполнить JavaScript до того, как он начнет сканирование.

Чтобы отладить любые проблемы с предоставлением страницы с измененной JavaScript, Google предоставил веб-мастерам инструмент «Получить как Google», в котором отображается моментальный снимок того, что Googlebot видит по определенному URL-адресу.

Один общий миф в том, что робот Googlebot не будет сканировать асинхронный JavaScript. Эта статья отлично справилась с этим. TLDR; Googlebot будет ждать не менее 20 секунд для завершения асинхронных вызовов!

Как Googlebot видит SPA

Квинтенциальным примером Vue.js SPA является Vue HackerNews Clone 2.0. Это проект с открытым исходным кодом, предоставленный командой Vue, чтобы продемонстрировать все возможности Vue и эффективные шаблоны проектирования.

Я развернул это приложение на экземпляр Heroku и запускал его через Fetch As Google. На изображении ниже скриншот слева показывает, как Googlebot видел его, а снимок экрана справа показывает, как пользователь его увидит. Они кажутся одинаковыми.

Удаление рендеринга на стороне сервера

Одной из ключевых особенностей Vue HackerNews Clone 2.0 является рендеринг на стороне сервера (SSR). Это означает, что, в отличие от более простого SPA, контент для каждой страницы отображается на сервере и предоставляется браузеру при каждой загрузке страницы, как и статический HTML.

Однако мы пытаемся понять, как Googlebot видит клиентский контент. По этой причине я переключил 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 Барри Адамсом. По вопросу о том, как поисковые системы оценивают ООПТ, он сказал:

Что происходит, когда вы используете React без поддержки на стороне сервера, является то, что искатель останавливается на самой первой странице, потому что он не может видеть никаких гиперссылок, которые следуют … Это делает процесс обхода невероятно медленным и неэффективным. Именно поэтому веб-сайты, основанные на React (и аналогичных платформах JavaScript), хуже работают в Google, чем веб-сайты, которые в основном служат обычным HTML для искателя …. простые HTML-сайты можно сканировать очень эффективно, недавно добавленные и измененные материалы будут сканироваться и индексируется гораздо быстрее, и Google намного лучше может оценить приоритет сканирования отдельных страниц на таких сайтах

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

Что делать, если SEO является критическим

Суть в том, что если SEO имеет решающее значение, вы не можете полагаться на рендеринг клиента вашего SPA и должны обеспечить, чтобы контент включался в ваши страницы.

Это не означает, что вам нужно отказаться от архитектуры SPA. Существует два метода: рендеринг на стороне сервера и предварительная подготовка, которые могут достичь желаемого результата.

Рендеринг на стороне сервера

Серверный рендеринг (SSR) — это то, где страница отображается веб-сервером как часть цикла запроса / ответа сервера. В случае Vue.js и других подобных фреймворков это делается путем выполнения приложения против виртуального DOM.

Состояние виртуальной DOM преобразуется в строку HTML, а затем вводится на страницу раньше, когда она отправляется клиенту. Когда страница достигает браузера, приложение JavaScript будет легко монтироваться поверх существующего контента.

SSR гарантирует, что ваша страница будет удобна для искателя, поскольку содержимое страницы будет завершено независимо от того, как, или даже если, сканер работает JavaScript.

У SSR есть свои недостатки:

  • Вам нужно будет разработать код «универсальный», т. д.. Он должен работать как в браузере, так и в серверной среде JavaScript. Это означает, что любой код, который ожидает, что API-интерфейсы браузера и объекты, такие как окно, будут доступны, не будут работать.
  • Ваше приложение будет запускаться по каждому запросу на сервер, добавив дополнительную нагрузку и замедление ответов. Кэширование может частично облегчить это.
  • Для внедрения SSR сложно и трудоемко, поэтому для проекта потребуется больше времени на разработку.
  • Он работает только с базой данных Node.js. SSR может быть выполнена с использованием не-узлов, например, с использованием расширения PHP v8js, но такие решения весьма ограничены.

Если вы хотите реализовать рендеринг на стороне сервера в Vue.js SPA, вы должны начать с официального руководства: Vue.js Руководство по визуализации на стороне сервера. Я также написал руководство по внедрению SSR с Laravel и Vue.js: Server-Side Rendering With Laravel и Vue.js 2.5.

Предварительная визуализация

Если вы не можете использовать SSR по одной из вышеуказанных причин, существует другой способ: предварительная передача. При таком подходе вы запускаете приложение с безгласным браузером в своей среде разработки, снижаете вывод страницы и подставляете свои HTML-файлы с помощью этого моментального снимка в ответ сервера.

Это почти такая же концепция, как и SSR, за исключением того, что она выполняется до развертывания, а не на реальном сервере. Обычно это выполняется с помощью браузера без браузера, такого как Chrome, и его можно включить в поток сборки с помощью Webpack, Gulp и т. Д.

Преимущество prerendering заключается в том, что он не требует производственного сервера Node.js и не добавляет нагрузки на ваш производственный сервер.

Однако пререрансия также имеет минусы:

  • Это плохо работает для страниц, отображающих изменяющиеся данные, например Vue HackerNews.
  • Это не подходит для страниц, на которых есть пользовательский контент, например. страницу учетной записи с личными данными пользователя. Однако эти страницы менее критичны для SEO; вы, как правило, не хотите, чтобы страница учетной записи была проиндексирована в любом случае.
  • Вам нужно будет перенести каждый маршрут в приложении индивидуально, что может занять много времени для большого сайта.

Если вы хотите внедрить предварительную настройку в приложении Vue.js, я написал руководство в этом блоге: Pre-Render A Vue.js App (с узлом или Laravel)

Вывод

Многие разработчики увидели объявление Google 2014 о JavaScript-рендеринге как о конце проблем SEO в отношении контента SPA. На самом деле, нет никакой гарантии, что робот Googlebot будет правильно отображать страницу, и если да, то он все равно может ранжировать страницу ниже, чем статические HTML-страницы на конкурирующих сайтах.

Мой совет: если вы собираетесь использовать архитектуру SPA, обязательно предоставляйте серверные или предварительно загруженные страницы.

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля
%d такие блоггеры, как: