Как JavaScript влияет на SEO?

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

В частности, был проведен ряд экпериментов в различии индексирования HTML-сайтов и сайтов на JS, результаты которых показали, что:

• HTML-сайт – робот Google индексировал все страницы всех уровней.
• Сайт основанный на JS – чаще всего робот не добирался даже до его второго уровня.

Нужна быстрая индексация, но страницы вашего сайта с тяжелыми JavaScript файлами, какой выход?

Для более быстрой индексации страниц сайта существует 3 варианта:

• Предоставление заранее подготовленного для Googlebot HTML-документа для предварительного рендеринга страниц
• Изоморфный Java-Script
• Серверный рендеринг

Предоставление заранее подготовленного для Googlebot HTML-документа для предварительного рендеринга страниц

Предоставляем роботу заранее прописанный HTML-документ для предварительного рендеринга, настроив систему обнаружения его обращений (при проверке заголовка User-Agent). Когда робот посещает ваш сайт, вы просто отдаёте ему HTML-копии страниц (они не содержат JS-кода). Причём эти копии используются только ботами, а не обычными пользователями, они в свою очередь, получают версии страниц, оснащённых возможностями JS.  Этот метод позволяет быстро проиндексировать все страницы сайта.

При этом HTML-код (отрендеренный роботом Google) и JS исключения есть возможность посмотреть в Google Search Console.

Изоморфный или Универсальный Java-Script

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

Используя Server Side Rendering (SSR) рендеринг на стороне сервера, мы получаем быстрый постраничный переход сайта и роботом и пользователем, но стоит избегать работы с функциями, которые напрямую воздействуют на DOM (объектную модель документа), а если необходимо взаимодействие с DOM браузера нужно воспользоваться Angular Renderer или абстракцией рендеринга.

Для динамического рендеринга контента используются инструменты от Google Dynamic Renderig, такие как Puppeteer и Rendertron. В результате, поисковый робот получает готовый результат в виде полноценной страницы с выполненным JS.

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

• с часто появляющимся контентом,
• с тяжёлым JS кодом,
• с добавленными блоками внешних ресурсов (например : видео с YouTube, счётчики соц. сигналов, онлайн-чаты).

Но у SSR есть ряд минусов:

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

Перенос рендеринга с серверной на клиентскую часть (Client Side Rendering) с точки зрения SEO ещё менее продуктивен, т.к. роботу загружается страница с неполным контентом, часть которого расположена в JavaScript.

Робот сканирует и рендерит страницы без сохранения состояния (не поддерживает):

• service workers ( скрипт, запускаемый браузером в фоновом режиме, отдельно от страницы)
• local storage  (хранение данных между сессиями пользователя)
• куки, Cache API.

Т.е. Googlebot рендерит страницы сайта без сохранения персональных предпочтений и настроек пользователя. 

Стоит заметить, что Googlebot больше не сканирует URL-адреса с хэш (ссылка с добавлением в хвосте символов после знака #) Пример такого рода ссылки — site.by/#backlinks;

Что касаемо изображений:

• Google не индексирует изображения, на которые поставлены ссылки из CSS
• Если продвигаемый сайт использует «ленивую» загрузку изображений, нужно добавить тег noscript вокруг тега изображения, чтобы убедиться, что робот Google их просканирует.

Выводы:

Какой из способов самый оптимальный для вашего сайта, решать вам, в зависимости от специфики сайта и поставленных UX задач, в каждом есть свои плюсы и минусы. С точки зрения SEO продвижения делая рендер приложения на сервер мы избегаем проблему «пустой страницы», тем самым ускоряем индексирование сайта роботом. А выбирая Изоморфный или Универсальный Java-Script мы делаем страницу и более удобной для пользователя и увеличиваем шансы на быстрое индексирование, тем самым улучшая SEO и показатели загрузки страниц.