JavaScript SEO — одна из областей, где разрыв между современными практиками фронтенд-разработки и возможностями краулинга поисковых систем наиболее заметен. Когда веб-приложение рендерит контент на стороне клиента — в браузере пользователя с помощью JavaScript — а не отдаёт полностью сформированный HTML с сервера, поисковые системы должны выполнить этот JavaScript, чтобы увидеть контент. Не все поисковые системы справляются с этим одинаково, и даже рендеринг JavaScript Googlebot имеет ограничения.
Как Googlebot обрабатывает JavaScript
Googlebot краулит JavaScript в два этапа:
Этап 1 — Начальный краулинг: Googlebot получает URL и обрабатывает сырой HTML-ответ. Если контент присутствует в начальном HTML (серверный рендеринг), Googlebot индексирует его немедленно.
Этап 2 — Рендеринг JavaScript: Googlebot добавляет URL, зависящие от JavaScript, в очередь на рендеринг. Движок рендеринга на базе Chromium выполняет JavaScript, генерирует итоговый DOM и индексирует отрендеренный контент. Этот второй этап может быть задержан на часы или дни после начального краулинга.
Задержка — основная проблема. Для страницы с серверным рендерингом краулинг и индексирование происходят вместе. Для страницы с клиентским рендерингом существует непредсказуемая задержка между первым краулингом URL и индексированием JavaScript-контента.
Кроме того, среда рендеринга Googlebot имеет ресурсные и временны́е ограничения. Очень тяжёлые JavaScript-приложения могут не выполниться полностью до истечения таймаута рендерера Googlebot, что приводит к частичному или отсутствующему контенту в индексе.
Подходы к рендерингу и их SEO-последствия
Server-Side Rendering (SSR): HTML полностью генерируется на сервере перед отправкой клиенту. Начальный HTTP-ответ содержит весь контент. Googlebot индексирует его немедленно. Лучший вариант для SEO. Фреймворки: Next.js, Nuxt.js, SvelteKit, Remix.
Static Site Generation (SSG): Страницы пре-рендерятся во время сборки, производя статичные HTML-файлы. С точки зрения Googlebot — те же преимущества, что и SSR. Идеально для нечасто меняющегося контента. Astro (на котором работает этот сайт) использует SSG.
Client-Side Rendering (CSR): Начальный HTML-ответ минимален (часто просто <div id="app"></div>). JavaScript загружает данные и рендерит контент после загрузки. Googlebot должен выполнить JavaScript и ждать отрендеренного DOM. Наиболее высокий риск задержек индексирования.
Incremental Static Regeneration (ISR): Гибридный подход, предварительно рендерящий страницы статически, но способный регенерировать их на сервере по расписанию или по запросу.
Hydration: Процесс присоединения обработчиков событий JavaScript к серверно-отрендеренному HTML на клиентской стороне. При правильной реализации Googlebot видит серверно-отрендеренный HTML (полный), а пользователи получают интерактивный JavaScript после его выполнения.
Распространённые проблемы JavaScript SEO
Контент, отсутствующий в начальном HTML: Если критический контент — заголовки, основной текст, внутренние ссылки — присутствует только после выполнения JavaScript, он может быть проиндексирован поздно или не полностью.
Клиентский роутинг без pushState: Single-page приложения, изменяющие URL через хэш-роутинг (example.com/#/page) или без правильной реализации history.pushState, могут не получить индексированных отдельных URL.
Отсутствующие <title> и <meta description> в начальном HTML: Если мета-теги задаются JavaScript после загрузки страницы, поисковые системы могут видеть стандартные мета-теги из начального HTML. Безопасный подход — включать правильные мета-теги в серверно-отрендеренный HTML.
JavaScript-ошибки, препятствующие рендерингу: Если JavaScript выбрасывает ошибки, препятствующие полному рендерингу страницы, рендерер Googlebot может проиндексировать частичную страницу.
Динамический контент из API: Контент, загружаемый из внешнего API после загрузки страницы, требует от Googlebot дополнительных HTTP-запросов.
Внутренние ссылки, генерируемые JavaScript: Если навигация или внутренние ссылки рендерятся JavaScript — Googlebot должен выполнить JavaScript для их обнаружения.
Тестирование рендеринга JavaScript
Инспекция URL в Google Search Console: Функция «Проверить актуальный URL» в GSC показывает, что Googlebot видит при рендеринге страницы — как сырой HTML-ответ, так и отрендеренный HTML. Сравнение обоих позволяет выявить контент, отсутствующий в начальном HTML, но присутствующий после рендеринга.
Отключение JavaScript: Просмотр сайта в браузере с отключённым JavaScript показывает, что видит не-JS краулер.
Аудит рендеринга JavaScript в Lighthouse: Lighthouse включает метрики для блокирующих рендеринг ресурсов и времени выполнения JavaScript.
Практические рекомендации
Используйте SSR или SSG для контента, который должен ранжироваться. Если страница критична для органического трафика, убедитесь, что её контент находится в начальном HTML-ответе.
Пре-рендерите статический контент. Если контент не меняется часто, статическая генерация — простейший путь к надёжному индексированию.
Регулярно аудируйте JavaScript-зависимый контент. После обновлений фреймворка повторно убедитесь, что важный контент виден в начальном HTML.
Мониторьте индексирование JS-страниц. Отслеживайте, какие страницы индексируются и когда. Паттерн страниц, индексируемых неделями, говорит о проблемах с рендерингом JavaScript.
Держите структурированные данные в серверно-отрендеренном HTML. Schema-разметка, внедрённая через JavaScript, обрабатывается на этапе рендеринга — она может не обрабатываться немедленно.
JavaScript SEO в конечном счёте заключается в обеспечении тех же гарантий индексирования для JavaScript-рендеренного контента, которые естественным образом возникают при серверно-рендеренном HTML.