Если ваша работа связана с SEO, то вы наверняка всё чаще и чаще слышите о JavaScript и о сложностях с его сканированием и индексированием. Тем не менее, Google работает над этими проблемами, а многие сайты используют JS для загрузки важного контента. Поэтому мы должны быть готовы обсудить этот вопрос с клиентами, чтобы наша работа была эффективной.
Цель этой статьи – вооружить вас минимальным набором знаний, необходимым для этого. Здесь вы не найдёте подробного руководства по JavaScript, но прочитав статью, сможете решать наиболее часто встречающие проблемы, связанные с ним.
Чтобы быть эффективными консультантами, когда речь заходить о JavaScript и SEO, вы должны уметь ответить на следующие три вопроса:
- Полагается ли домен/страница на JavaScript, выполняемый на стороне клиента, для загрузки/изменения содержимого страницы или ссылок?
- Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
- Если нет, то каким будет идеальное решение?
Выполнив быстрый поиск, я смог найти три примера целевых страниц, использующих JavaScript для загрузки важного контента:
Далее в статье мы будем использовать в качестве примера целевую страницу Sitecore. На ней мы продемонстрируем, как отвечать на обозначенные выше вопросы.
1. Полагается ли домен/страница на client-side JavaScript для загрузки/изменения содержимого страницы или ссылок?
Первый шаг в диагностике любой проблемы касательно JavaScript – это проверка того, использует ли домен JS для загрузки важного контента, который может влиять на SEO (on-page контент или ссылки). В идеале это нужно делать каждый раз, когда вы начинаете работать с новым клиентом (во время первичного технического аудита) или когда ваш клиент проводит редизайн/запускает новые функции на сайте.
Как это сделать?
- Спросите клиента
Лучше всего сразу связаться с разработчиками сайта и спросить у них.
- Используем ли мы client-side JavaScript для загрузки важного контента?
- Если да, то могли бы вы составить список того, где и какой контент загружается через JS?
- Проверьте вручную
Даже на крупных коммерческих сайтах с миллионами страниц обычно есть несколько шаблонов важных страниц. По моему опыту, такая проверка занимает максимум час. Для этого я использую плагин Chrome Web Developers – отключаю JavaScript и вручную проверяю важные шаблоны сайта (главную страницу, страницы категорий и товаров, статей).
![](/d/20/38/5b3469cc6aeff6.68474511-1.gif)
На примере выше, отключив JavaScript и перезагрузив страницу, мы увидели пустой экран.
В ходе проверки делайте пометки о том контенте, который не загружается или загружается некорректно, а также обо всех внутренних ссылках, которые не работают должным образом.
В конце этого этапа мы должны знать, полагается ли данный домен на JavaScript для загрузки on-page контента и ссылок. Если ответ «Да», то нам также нужно знать, где это происходит (на главной странице, на страницах категорий или в конкретных модулях).
- Используйте автоматическое сканирование
Вы также можете просканировать сайт с помощью специального инструмента (например, Screaming Frog или Sitebulb) с выключенным рендерингом JavaScript, а затем провести проверку с включенным JavaScript и сравнить различия во внутренних ссылках и on-page элементах.
Например, при сканировании с выключенным рендерингом JS не отображаются теги Title. Тогда нужно посмотреть, появляются ли они с включенным JS.
На скриншоте ниже мы видим, что при отключенном JavaScript не загружается контент страницы:
![](/d/20/38/5b3469ccd8ffa9.96114929-1024x602.png)
Ответом на первый вопрос для этой страницы будет: «Да, JS используется для загрузки важных частей этого сайта».
2. Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
Если ваш клиент использует JavaScript в определённых разделах сайта, то вам нужно проверить, как Google видит эти страницы.
Как это сделать?
- Используйте инструмент проверки оптимизации для мобильных устройств
На данный момент это самый быстрый и точный способ проверить, что Google видит на сайте. Мой коллега недавно провёл детальное сравнение инструментов Сканер Google для сайтов, Googlebot и Проверка оптимизации для мобильных. Как показал анализ, Googlebot и Mobile Friendly Tool возвращали одни и те же результаты.
В инструменте проверки оптимизации для мобильных достаточно ввести нужный URL. После того, как проверка будет завершена, нужно нажать на исходный код в правой части окна. Затем в этом коде можно искать любой on-page контент (теги Title, канонические теги и т.д.). Если он есть, то с высокой вероятностью Google его также видит.
![](/d/20/38/5b3469cd441c06.76283262.gif)
- Поиск видимого контента в Google
Ещё один быстрый способ проверить, проиндексировал ли Googlebot контент на странице – это выбрать видимый текст и выполнить поиск этого контента с использованием оператора site: и кавычек в Google.
В нашем примере этот текст выглядит так:
«Whether you are in marketing, business development, or IT, you feel a sense of urgency. Or maybe opportunity?».Когда мы выполняем поиск по этой фразе, для этой конкретной страницы, то ничего не получаем. Это значит, что Google не проиндексировал этот контент.
![](/d/20/38/5b3469cdb71222.40168489-1024x458.png)
- Автоматическое сканирование
На сегодняшний день большинство инструментов в этой области способны сканировать 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:
![](/d/20/38/5b3469ce3b3fb5.37542884-2-1024x634.png)
После нескольких поисков стало понятно, что важные 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 году:
- Знать когда и где домен клиента использует client-side JavaScript для загрузки on-page контента или ссылок:
- Спросить разработчиков;
- Выключить JavaScript и вручную проверить шаблоны страниц;
- Выполнить сканирование, используя JavaScript-краулер.
- Проверить, видит ли Googlebot контент должным образом:
- Использовать инструмент Google для проверки оптимизации для мобильных устройств;
- Выполнить поиск видимого контента в Google с помощью оператора site:
- Выполнить сканирование с использованием JS-краулера.
- Предложить клиенту решение:
- Рендеринг на стороне сервера;
- Гибридные решения (изоморфный рендеринг);
- Отказ от схемы сканирования AJAX.