SPA (Single Page Application) на React, Vue, Angular — проблема для SEO. Контент рендерится на клиенте, а поисковый робот видит пустой HTML.
Проблема
Googlebot рендерит JavaScript, но с задержкой и лимитами. Яндекс рендерит JS значительно хуже. Итог: контент SPA может не попасть в индекс.
Решения
1. SSR (Server-Side Rendering) — лучший вариант.
- Next.js (React), Nuxt.js (Vue), Angular Universal
- Сервер отдаёт готовый HTML с контентом → робот видит всё
- После загрузки — JS «гидрирует» страницу для интерактивности
2. SSG (Static Site Generation).
- Страницы генерируются на этапе сборки → статический HTML
- Идеально для блогов, лендингов, каталогов с редким обновлением
- Gatsby, Next.js (static export), Hugo
3. Dynamic Rendering (крайний случай).
- Определяем User-Agent: если робот → отдаём пре-рендеренный HTML
- Google официально поддерживает, но рекомендует SSR
- Puppeteer, Rendertron — инструменты для пре-рендеринга
Как проверить
GSC → Проверка URL → «Просмотр просканированной страницы». Если видите контент — всё OK. Если пусто — нужен SSR.
На практике рекомендую комбинировать SSR с пререндерингом ключевых страниц через Puppeteer или Rendertron — это страхует от ошибок рендеринга у ботов. Для динамических разделов (личные кабинеты, фильтры) используйте Conditional Rendering: отдавайте боту упрощённую статическую версию через User-Agent проверку. Инструменты вроде Vue Meta или React Helmet критически важны для управления тегами title/meta при SSR. Проверяйте индексируемость через Google Search Console (отчёт «Проверка URL») и сервисы типа Screaming Frog в режиме «рендеринга JS».
Важный нюанс: даже с SSR избегайте «воды» в HTML. Боты учитывают соотношение контента и кода — минимизируйте встроенные JSON-данные и стили. Для SPA с частыми обновлениями (новостные порталы) настройте Incremental Static Regeneration (ISR) в Next.js: это даёт статическую скорость с динамическим контентом. Всегда тестируйте загрузку с отключённым JavaScript в DevTools — так вы увидите страницу «глазами» Яндекса.