Что нужно знать для работы с JavaScript в SEO: необходимый минимум

#1
Если ваша работа связана с SEO, то вы наверняка всё чаще и чаще слышите о JavaScript и о сложностях с его сканированием и индексированием. Тем не менее, Google работает над этими проблемами, а многие сайты используют JS для загрузки важного контента. Поэтому мы должны быть готовы обсудить этот вопрос с клиентами, чтобы наша работа была эффективной.

Чтобы быть эффективными консультантами, когда речь заходить о JavaScript и SEO, вы должны уметь ответить на следующие три вопроса:
  • Полагается ли домен/страница на JavaScript, выполняемый на стороне клиента, для загрузки/изменения содержимого страницы или ссылок?
  • Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
  • Если нет, то каким будет идеальное решение?
Выполнив быстрый поиск, я смог найти три примера целевых страниц, использующих JavaScript для загрузки важного контента:
Далее я буду использовать в качестве примера целевую страницу Sitecore. На ней мы продемонстрируем, как отвечать на обозначенные выше вопросы.

1. Полагается ли домен/страница на client-side JavaScript для загрузки/изменения содержимого страницы или ссылок?

Первый шаг в диагностике любой проблемы касательно JavaScript – это проверка того, использует ли домен JS для загрузки важного контента, который может влиять на SEO (on-page контент или ссылки). В идеале это нужно делать каждый раз, когда вы начинаете работать с новым клиентом (во время первичного технического аудита) или когда ваш клиент проводит редизайн/запускает новые функции на сайте.
Как это сделать?
  • Спросите клиента
Лучше всего сразу связаться с разработчиками сайта и спросить у них.
  1. Используем ли мы client-side JavaScript для загрузки важного контента?
  2. Если да, то могли бы вы составить список того, где и какой контент загружается через JS?
  • Проверьте вручную
Даже на крупных коммерческих сайтах с миллионами страниц обычно есть несколько шаблонов важных страниц. По моему опыту, такая проверка занимает максимум час. Для этого я использую плагин Chrome Web Developers – отключаю JavaScript и вручную проверяю важные шаблоны сайта (главную страницу, страницы категорий и товаров, статей).



На примере выше, отключив JavaScript и перезагрузив страницу, мы увидели пустой экран.

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

В конце этого этапа мы должны знать, полагается ли данный домен на JavaScript для загрузки on-page контента и ссылок. Если ответ «Да», то нам также нужно знать, где это происходит (на главной странице, на страницах категорий или в конкретных модулях).
  • Используйте автоматическое сканирование
Вы также можете просканировать сайт с помощью специального инструмента (например, Screaming Frog или Sitebulb) с выключенным рендерингом JavaScript, а затем провести проверку с включенным JavaScript и сравнить различия во внутренних ссылках и on-page элементах.
Например, при сканировании с выключенным рендерингом JS не отображаются теги Title. Тогда нужно посмотреть, появляются ли они с включенным JS.
На скриншоте ниже мы видим, что при отключенном JavaScript не загружается контент страницы:




Ответом на первый вопрос для этой страницы будет: «Да, JS используется для загрузки важных частей этого сайта».

2. Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?

Если ваш клиент использует JavaScript в определённых разделах сайта, то вам нужно проверить, как Google видит эти страницы.

Как это сделать?
  • Используйте инструмент проверки оптимизации для мобильных устройств
На данный момент это самый быстрый и точный способ проверить, что Google видит на сайте. Мой коллега недавно провёл детальное сравнение инструментов Сканер Google для сайтов, Googlebot и Проверка оптимизации для мобильных. Как показал анализ, Googlebot и Mobile Friendly Tool возвращали одни и те же результаты.

В инструменте проверки оптимизации для мобильных достаточно ввести нужный URL. После того, как проверка будет завершена, нужно нажать на исходный код в правой части окна. Затем в этом коде можно искать любой on-page контент (теги Title, канонические теги и т.д.). Если он есть, то с высокой вероятностью Google его также видит.


  • Поиск видимого контента в Google
Ещё один быстрый способ проверить, проиндексировал ли Googlebot контент на странице – это выбрать видимый текст и выполнить поиск этого контента с использованием оператора site: и кавычек в Google.

В нашем примере этот текст выглядит так:

«Whether you are in marketing, business development, or IT, you feel a sense of urgency. Or maybe opportunity?».

Когда мы выполняем поиск по этой фразе, для этой конкретной страницы, то ничего не получаем. Это значит, что Google не проиндексировал этот контент.


  • Автоматическое сканирование
На сегодняшний день большинство инструментов в этой области способны сканировать JavaScript. Например, в Screaming Frog можно перейти в Сonfiguration > Spider > Rendering, затем выбрать JavaScript из выпадающего меню и нажать Save. В DeepCrawl и SiteBulb также есть эта функция.
Начиная отсюда, вы можете ввести свой домен/URL и увидеть обработанную страницу/код после того, как выбранный вами инструмент завершит сканирование.
Пример

Поиск ответа на этот вопрос я обычно начинаю с проверки домена в Google Mobile Friendly Test. Затем копирую исходный код и ищу важные on-page элементы (теги Title, H1 и т.п.). Также полезно использовать такие инструменты, как diff checker, чтобы сравнить обработанный HTML с исходным (в Screaming Frog это сравнение можно провести в режиме side-by-side).

Вот что показал инструмент проверки оптимизации для мобильных устройств по странице Sitecore:



После нескольких поисков стало понятно, что важные on-page элементы отсутствуют.

Мы также провели второй тест и убедились в том, что Google не проиндексировал содержимое тега body, найденного на этой странице.

Давайте посмотрим, что можно рекомендовать клиенту в данном случае.

3. Если нет, то каким будет идеальное решение?

Теперь мы знаем, что домен использует JavaScript для загрузки важного контента и знаем, что Googlebot не видит этот контент. Последний шаг – это рекомендовать оптимальное решение этой проблемы клиенту. Ключевое слово здесь – рекомендовать, а не внедрить. Наша задача – обозначить проблему клиенту, объяснить, почему это важно (а также описать возможные последствия) и рассказать, каким может быть решение. Однако определить идеальное решение в конкретном случае – в данном стеке технологий, при наличии этих ресурсов – это задача разработчика.
Какие решения можно предложить?
  • Реализовать рендеринг на стороне сервера
Главной причиной, почему Google сталкивается с проблемами при просмотре страницы Sitecore, состоит в том, что эта страница просит пользователя (нас, Googlebot) выполнить загрузку JavaScript на странице. Другими словами, Sitecore использует рендеринг на стороне клиента.
Нам же нужно снять нагрузку с Googlebot и перенести её на серверы Sitecore, чтобы рендеринг JavaScript осуществлялся на стороне сервера. В результате Googlebot сможет сканировать уже обработанный HTML.
В этом сценарии после перехода на страницу Googlebot будет сразу видеть HTML и весь контент.
  • Использовать гибридный подход
Самым лучшим решением на данный момент является гибридный подход, так называемый изоморфный рендеринг. В этой модели мы просим клиента загрузить первый запрос на своём сервере, а затем все будущие запросы выполняются на стороне клиента. В итоге, когда Googlebot заходит на страницу, сервер клиента, который уже выполнил исходный JavaScript, необходимый для этой страницы, отправляет обработанный JS в браузер, а дальше все запросы обрабатываются на стороне клиента.

  • Отказаться от схемы сканирования AJAX
Мы не будем углубляться в детали, но как вы знаете, в этом году Google окончательно отказался от схемы сканирования AJAX, предложенной в 2009 году.

Выводы

Если сильно упростить, то вот что вам нужно для работы с JavaScript в 2019 году:
  1. Знать когда и где домен клиента использует client-side JavaScript для загрузки on-page контента или ссылок:
  • Спросить разработчиков;
  • Выключить JavaScript и вручную проверить шаблоны страниц;
  • Выполнить сканирование, используя JavaScript-краулер.
  1. Проверить, видит ли Googlebot контент должным образом:
  • Использовать инструмент Google для проверки оптимизации для мобильных устройств;
  • Выполнить поиск видимого контента в Google с помощью оператора site:
  • Выполнить сканирование с использованием JS-краулера.
  1. Предложить клиенту решение:
  • Рендеринг на стороне сервера;
  • Гибридные решения (изоморфный рендеринг);
  • Отказ от схемы сканирования AJAX.
 
Вверх