 Автор: Серж Стефогло (Serge Stefoglo) – консультант по digital-маркетингу в агентстве Distilled Если ваша работа связана с SEO, то вы наверняка всё чаще и чаще слышите о JavaScript и о сложностях с его сканированием и индексированием. Тем не менее, Google работает над этими проблемами, а многие сайты используют JS для загрузки важного контента. Поэтому мы должны быть готовы обсудить этот вопрос с клиентами, чтобы наша работа была эффективной. Цель этой статьи – вооружить вас минимальным набором знаний, необходимым для этого. Здесь вы не найдёте подробного руководства по JavaScript, но прочитав статью, сможете решать наиболее часто встречающие проблемы, связанные с ним. Чтобы быть эффективными консультантами, когда речь заходить о JavaScript и SEO, вы должны уметь ответить на следующие три вопроса: - Полагается ли домен/страница на JavaScript, выполняемый на стороне клиента, для загрузки/изменения содержимого страницы или ссылок?
- Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
- Если нет, то каким будет идеальное решение?
Выполнив быстрый поиск, я смог найти три примера целевых страниц, использующих JavaScript для загрузки важного контента: Далее в статье мы будем использовать в качестве примера целевую страницу Sitecore. На ней мы продемонстрируем, как отвечать на обозначенные выше вопросы. Полагается ли домен/страница на client-side JavaScript для загрузки/изменения содержимого страницы или ссылок? Первый шаг в диагностике любой проблемы касательно JavaScript – это проверка того, использует ли домен JS для загрузки важного контента, который может влиять на SEO (on-page контент или ссылки). В идеале это нужно делать каждый раз, когда вы начинаете работать с новым клиентом (во время первичного технического аудита) или когда ваш клиент проводит редизайн/запускает новые функции на сайте. Как это сделать? Лучше всего сразу связаться с разработчиками сайта и спросить у них. - Используем ли мы client-side JavaScript для загрузки важного контента?
- Если да, то могли бы вы составить список того, где и какой контент загружается через 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 на странице. Другими словами, они используют рендеринг на стороне клиента. Нам же нужно снять нагрузку с 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.
Источник: Moz | 
Комментариев нет:
Отправить комментарий