Фундаментальная SEO-проблема SPA: Google может выполнять JavaScript, но пайплайны рендеринга, распределение краулингового бюджета и сроки индексации отличаются от HTML-рендеренных страниц. SPA, рендерящее весь контент на стороне клиента, может появляться как пустая страница в очереди краулинга Google, затем корректно рендериться при втором краулинге — вводя задержки от дней до недель между публикацией и индексированием.
Как Google краулит JavaScript
Процесс краулинга Google для JavaScript-сайтов включает два этапа:
Этап 1 (краулинг HTML): Googlebot запрашивает URL и получает исходный HTML-ответ. Для SPA это часто лишь минимальная HTML-оболочка: <div id="root"></div> со ссылкой на JavaScript-бандл.
Этап 2 (JavaScript-рендеринг): Googlebot ставит страницу в очередь для JavaScript-рендеринга. Ресурсы рендеринга ограничены — Google поддерживает «очередь рендеринга» и обрабатывает страницы по мере доступности ресурсов. Эта очередь вводит задержку индексации от часов до недель в зависимости от приоритета краулинга сайта.
Практическая импликация: контент, появляющийся только после выполнения JavaScript, может не индексироваться, или индексироваться через дни после публикации, или иметь несоответствия между HTML-рендеренной и JS-рендеренной версиями.
Рендеринг на стороне сервера (SSR)
SSR рендерит полный HTML страницы на сервере перед отправкой браузеру. Исходный HTML-ответ содержит полный контент — JavaScript-рендеринг для индексации не требуется.
Реализация SSR: Next.js (React), Nuxt.js (Vue) и Angular Universal предоставляют SSR-фреймворки. Каждый запрос страницы инициирует рендеринг на стороне сервера и доставляет полный HTML.
SEO-преимущества SSR:
- Никаких задержек индексации — Google получает полный контент при краулинге этапа 1
- Согласованность между Googlebot и пользователями
- Улучшение Core Web Vitals — LCP значительно улучшается, когда контент находится в исходном HTML
Компромиссы SSR:
- Нагрузка на сервер: каждый запрос требует серверной работы рендеринга
- Время до первого байта: серверный рендеринг добавляет задержку по сравнению со статическими файлами
- Сложность: SSR добавляет инфраструктурную сложность
Гидратация: SSR обычно «гидратируется» на стороне клиента — после загрузки SSR-HTML JavaScript-фреймворк берёт управление и делает страницу интерактивной. Избыточный JavaScript гидратации может ухудшить INP даже при хорошем LCP.
Статическая генерация сайта (SSG)
SSG предварительно рендерит все страницы во время сборки и обслуживает статические HTML-файлы. Золотой стандарт SEO-производительности.
Реализация SSG: Next.js getStaticProps, Gatsby, Astro. Процесс сборки генерирует HTML для каждого URL заранее.
SEO-преимущества SSG:
- Лучший возможный опыт краулинга — чистый HTML, мгновенный TTFB
- Лучшие Core Web Vitals — никаких задержек серверного рендеринга, никаких задержек гидратации
- CDN-кешируемый на краю — максимально быстрая доставка глобально
Ограничения SSG:
- Время сборки: сайты с миллионами страниц требуют длительных сборок
- Данные в реальном времени: часто изменяемый контент (живые цены, инвентарь) не может быть полностью статическим
- ISR Next.js: страницы можно ревалидировать без полной пересборки
Лучше для: Маркетинговые сайты, документация, блоги, контентные сайты с нечастыми обновлениями.
Динамический рендеринг
Динамический рендеринг обслуживает два разных ответа: серверно-рендеренный HTML краулерам (Googlebot, Bingbot) и клиентский JavaScript браузерам. Реализуется через middleware, определяющий user agent.
Когда использовать: Унаследованные SPA, где миграция на SSR/SSG нежизнеспособна в краткосрочной перспективе. Динамический рендеринг — обходное решение, а не постоянное. Google рекомендует SSR/SSG поверх динамического рендеринга.
Диагностика SEO-проблем SPA
Проверка URL в Google Search Console: Введите любой SPA-URL и сравните «HTML» (этап 1) vs. «Скриншот» (после JS-рендеринга). Если HTML-версия показывает пустую оболочку, страница зависит от JavaScript-рендеринга.
Инструменты тестирования Google: Инструмент тестирования совместимости с мобильными и Rich Results Test рендерят страницу с JavaScript и показывают, что видит Google.
Распространённые ошибки SEO SPA
React Router без SSR: Создание SPA с React Router без серверного рендеринга создаёт страницы, которые Google может рендерить как пустые в нескольких циклах краулинга.
Метатеги, устанавливаемые только через JavaScript: document.title = "Заголовок", установленный JavaScript, работает для пользователей, но может не подхватываться при краулинге этапа 1. Критичные метатеги (title, description, canonical, robots) должны быть в исходном HTML.
Маршрутизация на основе хэша: URL с идентификаторами фрагментов (example.com/#/page) не рассматриваются Google как отдельные страницы — хэш не отправляется на сервер, и все маршруты на основе хэша выглядят как один URL. Используйте маршрутизацию на основе пути для раздельных краулируемых страниц.