JavaScript и SEO: проверка доступности содержимого страниц
для поисковых ботов

Любой грамотный сео-оптимизатор должен знать, как использование JavaScript может повлиять на поисковое продвижение. Это достаточно важно, ведь если поисковые боты не смогут распознавать контент, не смогут провести его анализ, то страницы, где он содержится, не проиндексируются, они не появится в списке результатов, отвечающих на запросы пользователей.

Одними из основных вопросов, которые часто задаются при оптимизации, являются: «Виден ли контент для поисковых роботов?» или «Как исправить проблемы, связанные с недоступностью контента для поисковиков?».

Базовая информация

Что представляет собой JavaScript?

Для создания страницы сайта могут использоваться такие элементы:

1) HTML. Этот язык программирования стал основным, большая часть страницы (структура, статистический контент и многое другое) написана на нем;

2) CSS. Этот язык используется для создания стиля вебстраницы, его можно считать «презентационной частью» сайта;

3) JavaScript. Данный язык служит для интерактивности ресурса и создания динамических элементов вебстраницы.

JavaScript прописывается в основной код, написанный на HTML, при помощи специальных тегов. На сегодняшний день разработано множество библиотек и фреймворков с JavaScript, это jQuery, AngularJS, ReactJS, EmberJS и многие другие.

Библиотеки и фреймворки JavaScript

1) AJAX.

Многие слышали про AJAX, но мало знают о нем. AJAX — это набор методов для создания страниц, представляющих собой объединение асинхронного JavaScript и XML. При этом созданные вебприложения работают с сервером в фоновом режиме, не нагружая загружаемую страницу. Другими словами, запуск сценария async позволяет другим функциям и строкам кода работать без прерывания.

AJAX используется для неполного обновления контента или общего макета вебстраницы. Дело в том, что при загрузке страницы сервер получает запрос на извлечение с последующим отображением. Если использовать AJAX, то не нужно каждый раз загружать все активы, подгружаются только те, что изменились или добавились.

AJAX можно представить в виде небольшого сервера. Одним из ярких примеров является Google Maps, где происходит обновление вебстраниц без полной перезагрузки.

AJAX

2) Объектный макет документ (DOM).

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

Это то, что вы видите после нажатия на «Проверка элемента», другими словами это алгоритм получения и преобразование HTML кода браузером в отображаемую страницу, которую мы видим после загрузки.

Алгоритм достаточно прост:

2.1) Браузер получает контент в HTML-коде;

2.2) Проводится сканирование и анализ содержимого;

2.3) Извлечение элементов CSS, JavaScript, изображений.

DOM представляет собой результат анализа, имеющий вид структурированной, организованной версией кода страницы ресурса.

Главным отличием DOM от исходного HTML кода является способность изменять содержимое страницы, опираясь на введенные запросы пользователя, время суток и других параметров благодаря использованию HTML, CSS и JavaScript. Его еще часто называют динамическим HTML.

Источник HTML	DOM

3) Безгласный просмотр.

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

На сегодняшний день есть специальные инструменты, например, PhantomJS и Zombie.js, позволяющие делать безгласный предпросмотр для тестирования результата оптимизации, совершения предварительного рендеринга.

Почему использование JavaScript может затруднить продвижение в поисковиках, как исправить это?

Существует три основных фактора, при которых должны быть выполнены при использование JavaScript:

1) Возможность проведение скана — поисковые роботы могут сканировать и распознать страницы ресурса;

2) Доступность контента — для поисковых роботов открыт доступ к контенту, они способны его проанализировать;

3) Воспринимаемость ресурса — оценка визуализации (латентность)

Сканирование поисковыми роботами.

При этом поднимается важный вопрос, способны ли поисковые роботы отыскать URL-адреса страниц, распознать структуру проекта? Здесь могут появиться две проблемы:

1) Некоторые элементы страницы оказались заблокированными (случайно или неслучайно) для поисковых роботов из-за использования JavaScript;

2) Нарушение структурных связей из-за замены тегов HTML на события JavaScript.

Почему блокировка сканирования из-за JavaScript оказывает негативное влияние на продвижение?

Если определенные элементы страницы недоступны для скана из-за JavaScript, значит поисковик не сможет полностью проверить и оценить все содержимое, а посетитель этой страницы не сможет увидеть заблокированные элементы. Поисковая система старается предоставить наиболее полезный и качественный результат по поисковым запросам, они по умолчанию считают страницы с заблокированными элементами менее привлекательными для посетителей. Также наличие заблокированных элементов может быть расценено как умышленно-вредоносное, такая страница может не пройти индексацию.

Есть множество программ-инструментов, позволяющих проверить на доступность сканирования страниц поисковиками, например, это могут быть Fetch и Render, или инструменты с Google, robots.txt , которые покажут элементы, заблокированные для поисковой системы.

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

Обратите внимание на важный момент, надо действительно разбираться в этой области. Принимать решение про открытие/блокировку доступа для поисковиков к определенным элементам страниц следует вместе с опытными специалистами-разработчиками.

Структурирование ссайтов (внутренние связи).

Разработка внутренней связи страниц — важный этап работы. Для этого следует использовать обычные теги-команды HTML или DOM (при этом все равно используется тег вида hrefs = «www.example.com») с использованием JavaScript-функций для перемещения посетителя по всем страницам ресурса.

Не стоит применять JavaScript onclick events для внутренней связи, хоть вполне возможно, что поисковики смогут отыскать страницы и проанализировать их (в элементах кода JavaScript или XML-файлах Sitemap). Проблема в том, робот не свяжет те страницы с общей структурой ресурса.

Внутренняя связь служит для поисковых роботов для оценки важности и полезности вебстраниц, в некоторых случах они могут оказывать очень сильное влияние и переопределять «подсказки SEO», такие как канонические теги.

Структура URL.

Исторически веб-сайты на основе JavaScript (например, «сайты AJAX») использовали идентификаторы фрагментов (#) в URL-адресах.

Есть несколько советов, которых следует придерживаться:

1) Старайтесь избегать использовать одиночный хэш #, потому что этот знак не сканируется поисковыми роботами. Он нужен для созданий ссылки перехода, то есть таких ссылок, которые перенаправляют к определенной части содержимого на странице. Все, что находится после этого символа в адресной ссылки не отправляется на сервер, вебстраница будет прокручиваться до первого элемента, совпадающего с указанным идентификатором. Поэтому поисковик Гугл советует не использовать данный символ в URL-адресах.;

2) Не стоит также прописывать URL-адреса Hashbang (#!), их распознает только поисковая система Бинг, Гугл отказались от поддержки данного формата из-за попыток манипуляций с похожим escaped_fragment HTML. Рассмотрим на двух примерах:

2.1) В оригинале должно содержатся #! (hashbang) в URL-адресе как свидетельство существования определенного фрагмента или метаданных <meta name = «fragment» content = «!»>;

2.2) На практике символ #! (hashbang) заменяется на «_escaped_fragment_», делая адрес длинным, похожим на взломанный.

Гугл советует:

1) Использовать API истории PushState, что базируется на истории просмотра вебстраниц. Другими словами, при загрузке страницы повторно обновляются лишь те элементы, что изменились с прошлого посещения. Гугл одобряет это, поддерживая браузерную навигацию для визуализации. Особенно хорошо применять этот метод для «бесконечной прокрутки», то есть для ситуаций, когда пользователь часто нажимает на разные части вебстраницы, при этом происходит обновление URL-адресса. Считается хорошим, если после прокрутки страницы вниз, происходит загрузка контента без обновления всей страницы.

2) Можно сделать бесконечную прокрутку без постоянной перезагрузки при помощи replaceState ().

Возможность взаимодействия ресурса с поисковыми роботами.

Выше обсуждалось, что поисковики применяют режим безгласного просмотра для оценки содержимого контента на соответствие поисковым фразам. При этом поисковик может распознавать некоторые элементы сайта, сделанные при помощи JavaScript, пользуясь при этом DOM.

Но достаточно часто поисковые роботы не способны распознать фрагменты кода на JavaScript, что негативно влияет на продвижение. Поэтому нужно знать, способны ли поисковые роботы анализировать и сканировать весь контент. Нет смысла строить догадки, нужно проверять доступность содержимого ресурса.

Поведение поискового робота, обнаружившего JavaScript, имеет ряд особенностей:

1) Поисковые боты не выполняют какие-то действия, предусмотренные на получение дополнительной информации. Например, если вы разместите статьи, прочитать которые можно только после регистрации, то они не пройдут индексацию, так как боты не смогут получить доступ к этому контенту. Поэтому стоит позаботится, чтобы поисковики могли получить доступ к этому контенту.

2) Поисковые боты могут пропустить страницу, если происходит долгая загрузка. Важно убедится что после срабатывания событий загрузки JavaScript страница открывается менее, чем за 5 секунд. Если длительность загрузки будет более, есть большая вероятность, что поисковики не видят загружаемый контент.

Нет конкретного значения задержки загрузки, но стоит придерживаться 5 сек. Есть специальные инструменты тестирования, например, GoogleSpeed Insights, Mobile Friendliness Tool и Fetch, можно проверить таймер Max Prin.;

3) Обнаружение ошибок в срабатывании JavaScript может повлечь пропуск отдельных страниц ресурса.

Как проверить, способны ли роботы сканировать и распознавать содержимое?

1) Тестирование.

Поисковые алгоритмы постоянно развиваются, получая новые методики оценки и распознавания содержимого. В 2015 поисковые роботы научились анализировать JavaScript, применяя DOM. Отсюда следует вывод, если вы можете просмотреть содержимое ваших страниц в DOM, то скорее всего и боты способны его проанализировать.

Б.Горавлеч решил протестировать комбинацию разных библиотек и фреймворков JavaScript, чтобы узнать, как поисковые боты реагируют на их наличие (например, проведение индексации страниц и их содержимого). В результате выяснилось, чтоб большинство библиотек и фреймворков Гугл способен просканировать и распознать, иногда создавая достаточно сложные структуры.

Этот тест показал, что использование JavaScript допустимо, но нужно проверять совместимость выбранных библиотек и фреймворков с поисковыми ботами.

Это можно сравнить с высказыванием Д. Коллина про пули и пушки:

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

Можно пользоваться следующим алгоритмом проверки доступности контента для поисковых роботов:

1) Проверить доступность контента в DOM;

2) Проверить структуру ресурса на наличие внутренних связей;

3) Вручную проверить некоторые элементы вебстраниц;

4) Используйте инструменты для проверки видимости контента поисковой системой;

5) Оцените скорость загрузки после срабатывания события JavaScript при помощи Fetch с Google. Это способно отобразить возможные проблемы, связанные с блокировкой отдельных элементов, это можно увидеть в файле robots.txt.

Примечание. Если у вас нет возможности проверить ресурс через GSC, можно воспользоваться «Any Bot Tool» Technicalseo.com

Вы провели проверку и обнаружили, что есть неисправности? Или используемые вами метаданные предназначены для поисковых ботов соцсетей (Фейсбук, твитер и т.д)? Для решения этих и других проблем следует сделать HTML SNAPSHOTS.

2) HTML SNAPSHOTS.

HTML SNAPSHOTS — это отображение страницы, которую видят поисковые боты (статическая версия DOM).

Впервые они появились в 2009, в 2015 Гугл решил отказаться от этого метода. Тем не менее они помогают разобраться с выявленными трудностями.

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

Стоит учитывать, что поисковики стремятся получать те же данные, что и посетитель вашего ресурса, поэтому пользоваться HTML SNAPSHOT стоит лишь в тех случаях, когда нет возможности исправить трудности из-за использования JavaScript.

Примечание.

Гугл продолжает поддерживать работу с HTML SNAPSHOT, но рекомендует избегать его использование, аргументируя это тем, что:

1) Они ориентируются на получение страниц в том же виде, что и пользователи ресурса;

2) Попытки обмана в виде предоставления отличного содержания снимка от оригинальной страницы. При этом содержание снимка и оригинала не должны отличаться. При обнаружении попыток обмана возможно наложение штрафа.

Несмотря на эти недостатки, есть ряд преимуществ:

1) Поисковый бот Гугл получает представление о контенте страницы, даже если не способен распознать некоторые элементы JavaScript;

2) Поисковые боты других систем способны распознавать содержимое страниц, ведь далеко не все существующие поисковики работают с JavaScript.

Локализация сайта

Когда браузер получает страницу от сервера, он создает DOM образ, при этом большая часть элементов подгружается в зависимости от места расположения на вебстранице. Если вы разместите крупный объект в начале, то он будет загружаться первым.

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

Путь рендеринга — оптимизация загрузки по важности. При этом использование JavaScript, без которого можно обойтись, может замедлить скорость загрузки страницы, блокируя потенциал (воспринимаемая латентность).

Способы решения Render-blocking JavaScript.

Есть множество инструментов, позволяющих проверить скорость загрузки вебстраницы, например, Speed SpeedWare, WebPageTest.org, CatchPoint, способных оценить влияние элементов JavaScript на скорость. При выявлении проблем можно:

1) Inline — добавить JavaScript в HTML-документ;

2) Async — асинхронизировать JavaScript, добавив атрибут async к HTML-тегу;

3) Отложить — расположить элемент JavaScript в нижней части страницы.

Стоит отметить, что вызываемые сценарии следует расставить по приоритетности. Вы не должны менять очередность исполнения сценариев, или запускать сценарий до завершения предыдущего действия (например, до открытия другого файла, на который есть ссылка в сценарии). Работать над этим должен грамотный специалист.

Подробнее: Документация по скорости разработки Google Developer

Итоги.

Поисковые системы стараются создать возможности для скана, анализа и распознавания JavaScript, но все еще есть проблемы с этим. Обязательно проверьте, что содержание ваших страниц проверяется поисковыми ботами. При выявлении проблем ищите способы их преодоления.