JavaScript SEO: индексация JS-страниц в Google

Индексация происходит в две волны

Googlebot сначала получает ваш исходный HTML и может индексировать всё содержимое, уже присутствующее в этом первоначальном ответе, почти сразу. Всё, что появляется только после выполнения JavaScript, ставится в очередь на второй проход — рендеринг, — который использует отдельные ресурсы и может отставать от первоначального сканирования от нескольких секунд до, на сайте с ограниченным бюджетом сканирования, гораздо дольше. Если ваш контент или внутренние ссылки существуют только после этого второго прохода, вы полагаетесь на более медленный, менее надёжный путь к индексации вообще.

Что на самом деле ломает индексацию

• Основной контент или внутренние ссылки, отображающиеся только после клиентского запроса, без ничего значимого в первоначальном HTML.
• Контент, скрытый за действием пользователя — кликом, прокруткой, наведением, — которое у Googlebot нет причин выполнять.
• JS- или CSS-файлы, заблокированные в robots.txt, которые нужны странице для правильного отображения; см. robots.txt против noindex, чтобы узнать, как блокировка может дать обратный эффект.
• Клиентская маршрутизация, никогда не изменяющая фактический HTTP-статус — неработающий маршрут может отображаться пустым или показывать сообщение «не найдено», продолжая возвращать 200, что проявляется как мягкая ошибка 404.
• Ошибки гидратации или рендеринга, возникающие только в среде безголового браузера и остающиеся незамеченными при обычном ручном тестировании.

Как проверить, что на самом деле видит Google

В инструменте проверки URL Search Console есть представление «Проверенная страница», показывающее отрисованный HTML и скриншот после работы рендерера Google — а не только исходный ответ. Сравните это с исходным HTML: если важный контент или ссылки отсутствуют в исходном ответе, но присутствуют после рендеринга, вы полностью зависите от очереди рендеринга, а не от быстрого первоначального сканирования.

Что действительно помогает

• Отрисовывайте на сервере (или генерируйте статически) контент и навигационные ссылки, важные для SEO, а не загружайте их на стороне клиента после загрузки страницы.
• Используйте настоящие элементы <a href> для внутренних ссылок, а не обработчики кликов на неякорных элементах — Googlebot переходит по href, а не по произвольным привязкам событий JavaScript.
• Не блокируйте JS/CSS-пакеты, от которых зависит рендеринг страницы — Google нужно их получить, чтобы вообще отрисовать страницу.
• Как только страница исправлена, не просто ждите следующего прохода рендеринга — запросите переиндексацию напрямую или отправьте URL через IndexNow, чтобы исправленная версия была подхвачена по вашему расписанию, а не по очереди рендерера.

Особенности отдельных фреймворков

• Клиентские приложения на React: обычное одностраничное приложение отдаёт почти пустую HTML-оболочку. Для страниц, которые должны ранжироваться, используйте фреймворк с серверным рендерингом или статической генерацией.
• Next.js и Nuxt: серверный рендеринг и статическая генерация по умолчанию помещают контент в исходный HTML. Следите за важным контентом, который загружается только в клиентских эффектах.
• Angular и Vue: используйте серверный рендеринг Angular или Nuxt для Vue, чтобы страницы приходили с контентом, уже содержащимся в HTML.
• Бесконечная прокрутка: дополните её URL с постраничной навигацией, которые загружаются самостоятельно, чтобы сканеры могли добраться до элементов за пределами первого экрана.

Быстрый тест, который можно провести уже сегодня

Откройте страницу, выберите «Просмотр кода страницы» (а не «Просмотреть код») и найдите предложение из основного контента и несколько URL внутренних ссылок. Если в исходном коде их нет, они зависят от JavaScript. Затем запустите бесплатную проверку индексируемости, чтобы убедиться, что страница возвращает код 200, не закрыта noindex и имеет правильный канонический тег.