Если ваша работа связана с SEO, то вы наверняка всё чаще и чаще слышите о JavaScript и о сложностях с его сканированием и индексированием. Тем не менее, Google работает над этими проблемами, а многие сайты используют JS для загрузки важного контента. Поэтому мы должны быть готовы обсудить этот вопрос с клиентами, чтобы наша работа была эффективной.
Чтобы быть эффективными консультантами, когда речь заходить о JavaScript и SEO, вы должны уметь ответить на следующие три вопроса:
Далее я буду использовать в качестве примера целевую страницу Sitecore. На ней мы продемонстрируем, как отвечать на обозначенные выше вопросы.
1. Полагается ли домен/страница на client-side JavaScript для загрузки/изменения содержимого страницы или ссылок?
Первый шаг в диагностике любой проблемы касательно JavaScript – это проверка того, использует ли домен JS для загрузки важного контента, который может влиять на SEO (on-page контент или ссылки). В идеале это нужно делать каждый раз, когда вы начинаете работать с новым клиентом (во время первичного технического аудита) или когда ваш клиент проводит редизайн/запускает новые функции на сайте.
Как это сделать?
На примере выше, отключив JavaScript и перезагрузив страницу, мы увидели пустой экран.
В ходе проверки делайте пометки о том контенте, который не загружается или загружается некорректно, а также обо всех внутренних ссылках, которые не работают должным образом.
В конце этого этапа мы должны знать, полагается ли данный домен на JavaScript для загрузки on-page контента и ссылок. Если ответ «Да», то нам также нужно знать, где это происходит (на главной странице, на страницах категорий или в конкретных модулях).
Например, при сканировании с выключенным рендерингом JS не отображаются теги Title. Тогда нужно посмотреть, появляются ли они с включенным JS.
На скриншоте ниже мы видим, что при отключенном JavaScript не загружается контент страницы:
Ответом на первый вопрос для этой страницы будет: «Да, JS используется для загрузки важных частей этого сайта».
2. Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
Если ваш клиент использует JavaScript в определённых разделах сайта, то вам нужно проверить, как Google видит эти страницы.
Как это сделать?
В инструменте проверки оптимизации для мобильных достаточно ввести нужный URL. После того, как проверка будет завершена, нужно нажать на исходный код в правой части окна. Затем в этом коде можно искать любой on-page контент (теги Title, канонические теги и т.д.). Если он есть, то с высокой вероятностью Google его также видит.
В нашем примере этот текст выглядит так:
«Whether you are in marketing, business development, or IT, you feel a sense of urgency. Or maybe opportunity?».
Когда мы выполняем поиск по этой фразе, для этой конкретной страницы, то ничего не получаем. Это значит, что Google не проиндексировал этот контент.
Начиная отсюда, вы можете ввести свой домен/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 не видит этот контент. Последний шаг – это рекомендовать оптимальное решение этой проблемы клиенту. Ключевое слово здесь – рекомендовать, а не внедрить. Наша задача – обозначить проблему клиенту, объяснить, почему это важно (а также описать возможные последствия) и рассказать, каким может быть решение. Однако определить идеальное решение в конкретном случае – в данном стеке технологий, при наличии этих ресурсов – это задача разработчика.
Какие решения можно предложить?
Нам же нужно снять нагрузку с Googlebot и перенести её на серверы Sitecore, чтобы рендеринг JavaScript осуществлялся на стороне сервера. В результате Googlebot сможет сканировать уже обработанный HTML.
В этом сценарии после перехода на страницу Googlebot будет сразу видеть HTML и весь контент.
Выводы
Если сильно упростить, то вот что вам нужно для работы с JavaScript в 2019 году:
Чтобы быть эффективными консультантами, когда речь заходить о JavaScript и SEO, вы должны уметь ответить на следующие три вопроса:
- Полагается ли домен/страница на JavaScript, выполняемый на стороне клиента, для загрузки/изменения содержимого страницы или ссылок?
- Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
- Если нет, то каким будет идеальное решение?
Далее я буду использовать в качестве примера целевую страницу Sitecore. На ней мы продемонстрируем, как отвечать на обозначенные выше вопросы.
1. Полагается ли домен/страница на client-side JavaScript для загрузки/изменения содержимого страницы или ссылок?
Первый шаг в диагностике любой проблемы касательно JavaScript – это проверка того, использует ли домен JS для загрузки важного контента, который может влиять на SEO (on-page контент или ссылки). В идеале это нужно делать каждый раз, когда вы начинаете работать с новым клиентом (во время первичного технического аудита) или когда ваш клиент проводит редизайн/запускает новые функции на сайте.
Как это сделать?
- Спросите клиента
- Используем ли мы client-side JavaScript для загрузки важного контента?
- Если да, то могли бы вы составить список того, где и какой контент загружается через JS?
- Проверьте вручную
На примере выше, отключив JavaScript и перезагрузив страницу, мы увидели пустой экран.
В ходе проверки делайте пометки о том контенте, который не загружается или загружается некорректно, а также обо всех внутренних ссылках, которые не работают должным образом.
В конце этого этапа мы должны знать, полагается ли данный домен на JavaScript для загрузки on-page контента и ссылок. Если ответ «Да», то нам также нужно знать, где это происходит (на главной странице, на страницах категорий или в конкретных модулях).
- Используйте автоматическое сканирование
Например, при сканировании с выключенным рендерингом JS не отображаются теги Title. Тогда нужно посмотреть, появляются ли они с включенным JS.
На скриншоте ниже мы видим, что при отключенном JavaScript не загружается контент страницы:
Ответом на первый вопрос для этой страницы будет: «Да, JS используется для загрузки важных частей этого сайта».
2. Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
Если ваш клиент использует JavaScript в определённых разделах сайта, то вам нужно проверить, как Google видит эти страницы.
Как это сделать?
- Используйте инструмент проверки оптимизации для мобильных устройств
В инструменте проверки оптимизации для мобильных достаточно ввести нужный URL. После того, как проверка будет завершена, нужно нажать на исходный код в правой части окна. Затем в этом коде можно искать любой on-page контент (теги Title, канонические теги и т.д.). Если он есть, то с высокой вероятностью Google его также видит.
- Поиск видимого контента в Google
В нашем примере этот текст выглядит так:
«Whether you are in marketing, business development, or IT, you feel a sense of urgency. Or maybe opportunity?».
Когда мы выполняем поиск по этой фразе, для этой конкретной страницы, то ничего не получаем. Это значит, что Google не проиндексировал этот контент.
- Автоматическое сканирование
Начиная отсюда, вы можете ввести свой домен/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 не видит этот контент. Последний шаг – это рекомендовать оптимальное решение этой проблемы клиенту. Ключевое слово здесь – рекомендовать, а не внедрить. Наша задача – обозначить проблему клиенту, объяснить, почему это важно (а также описать возможные последствия) и рассказать, каким может быть решение. Однако определить идеальное решение в конкретном случае – в данном стеке технологий, при наличии этих ресурсов – это задача разработчика.
Какие решения можно предложить?
- Реализовать рендеринг на стороне сервера
Нам же нужно снять нагрузку с Googlebot и перенести её на серверы Sitecore, чтобы рендеринг JavaScript осуществлялся на стороне сервера. В результате Googlebot сможет сканировать уже обработанный HTML.
В этом сценарии после перехода на страницу Googlebot будет сразу видеть HTML и весь контент.
- Использовать гибридный подход
- Отказаться от схемы сканирования AJAX
Выводы
Если сильно упростить, то вот что вам нужно для работы с JavaScript в 2019 году:
- Знать когда и где домен клиента использует client-side JavaScript для загрузки on-page контента или ссылок:
- Спросить разработчиков;
- Выключить JavaScript и вручную проверить шаблоны страниц;
- Выполнить сканирование, используя JavaScript-краулер.
- Проверить, видит ли Googlebot контент должным образом:
- Использовать инструмент Google для проверки оптимизации для мобильных устройств;
- Выполнить поиск видимого контента в Google с помощью оператора site:
- Выполнить сканирование с использованием JS-краулера.
- Предложить клиенту решение:
- Рендеринг на стороне сервера;
- Гибридные решения (изоморфный рендеринг);
- Отказ от схемы сканирования AJAX.