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

Автор: Серж Стефогло (Serge Stefoglo) – консультант по digital-маркетингу в агентстве Distilled

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

Цель этой статьи – вооружить вас минимальным набором знаний, необходимым для этого. Здесь вы не найдёте подробного руководства по JavaScript, но прочитав статью, сможете решать наиболее часто встречающие проблемы, связанные с ним.

Чтобы быть эффективными консультантами, когда речь заходить о 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 в браузер, а дальше все запросы обрабатываются на стороне клиента.

Подробнее об изоморфном JavaScript можно прочитать в материале от команды Airbnb.

  • Отказаться от схемы сканирования AJAX

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

Выводы

Если сильно упростить, то вот что вам нужно для работы с JavaScript в 2018 году:

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

4 SEO-тактики, неофициально поддерживаемые Google

Есть ряд техник, которые Google официально не поддерживает, но при этом они всё ещё эффективны – в той или иной степени. О них и пойдёт речь в статье
preview Обзор популярных CMS с точки зрения SEO-специалиста

Обзор популярных CMS с точки зрения SEO-специалиста

Почему важно ответственно подойти к выбору CMS и какие последствия могут ожидать, если проигнорировать этот этап
preview Как заставить Google ранжировать нужную страницу: чек-лист

Как заставить Google ранжировать нужную страницу: чек-лист

В результатах поиска показывается не та страница? Исправить эту ситуацию поможет чек-лист, предлагаемый автором статьи
preview Метод попарного сравнения как способ анализа наложения пост-фильтров

Метод попарного сравнения как способ анализа наложения пост-фильтров

К сожалению, сейчас служба поддержки Яндекса практически никогда не признает наличия санкций, если об этом нет отметки в сервисе Яндекс.Вебмастер...
preview Google сокращает органический трафик: что делать вебмастерам

Google сокращает органический трафик: что делать вебмастерам

Каждый месяц Google планомерно уменьшает долю органического трафика...
preview 6 причин внедрить AMP для своего интернет-магазина

6 причин внедрить AMP для своего интернет-магазина

AMP – это ускоренные мобильные страницы, созданные на основе открытого исходного кода, которые позволяют быстро загружать веб-страницы прямо в поисковой выдаче Google