Как оптимизировать сайт с JavaScript

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

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

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

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

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

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

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

2) Изоморфный Java-Script

3) Серверный рендеринг

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

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

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

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

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

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

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

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

1) с часто появляющимся контентом,

2) с тяжёлым JS кодом,

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

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

- при медленной скорости интернета у клиента, понижается скорость загрузки страниц.

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

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

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

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

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

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

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

1) Google не индексирует изображения, на которые поставлены ссылки из CSS

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

Выводы:

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