JavaScript SEO: как Google рендерит скрипты и где теряется контент

Современные сайты на React, Vue и подобных фреймворках часто отдают браузеру почти пустой HTML, а весь контент дорисовывают скриптами уже на стороне пользователя. Человек этого не замечает, а вот для поисковика тут начинается зона риска. Googlebot умеет выполнять JavaScript, но делает это не сразу и не бесплатно, и именно здесь сайты регулярно теряют часть контента из индекса.

Это продвинутая тема, и если у вас обычный сайт на готовой CMS, где контент уже есть в HTML, можно выдохнуть и переходить дальше. Но если контент собирается скриптами, разобраться стоит.

Как Googlebot обрабатывает JavaScript

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

Сначала идёт сканирование. Googlebot скачивает HTML, проверяет robots.txt и собирает ссылки из атрибутов href. Затем страница попадает в очередь на рендеринг. Google ставит в неё все страницы с кодом ответа 200 и в какой-то момент открывает их в headless-версии Chromium, выполняет скрипты и получает финальный HTML. И только потом этот отрендеренный результат идёт в индекс, а найденные в нём ссылки уходят в очередь на сканирование.

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

CSR, SSR и пререндеринг

От того, где выполняется JavaScript, зависит, насколько легко поисковику достаётся контент.

CSR, рендеринг на стороне клиента. HTML почти пустой, всё собирает браузер. Самый рискованный для SEO вариант, потому что Google вынужден рендерить страницу сам и тратить на это ресурсы.
SSR, рендеринг на стороне сервера. Сервер отдаёт уже готовый HTML с контентом, а скрипты потом «оживляют» страницу. Для поисковика это идеально, контент виден сразу.
Пререндеринг. Сервер отдаёт заранее собранный HTML конкретно для ботов. Хороший компромисс, который Google прямо называет рабочим способом снять проблему рендеринга.

Если выбираете технологию для нового проекта и трафик из поиска важен, я советую закладывать SSR или пререндеринг сразу. Переделывать CSR-приложение потом дороже.

Где JS-сайты чаще всего ломают SEO

Ссылки не как <a href>. Google переходит по ссылкам только в HTML-элементах <a> с атрибутом href. Кнопка с обработчиком клика на JavaScript для робота это не ссылка, и страница за ней может остаться ненайденной.
Хеш вместо нормальных адресов. Маршрутизация через /#/products работает хуже, чем настоящие адреса вида /products через History API.
Контент только после действия. Если текст подгружается лишь по клику или скроллу, Google может его не увидеть. Важное должно быть в DOM сразу после рендера.
Soft 404 в одностраничных приложениях. Несуществующий адрес отдаёт код 200 и пустую страницу. Решается редиректом на настоящую страницу 404 или мета-тегом noindex.
Мета-теги и canonical, переписанные скриптами. Google учтёт версию после рендеринга, но лучше, чтобы title, description и canonical были согласованы с исходным HTML, без сюрпризов.

Глубже по теме

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