Привет, я Максим — веб-разработчик. SPA (Single Page Application) — это когда весь сайт работает на одной HTML-странице, а контент подгружается динамически через JavaScript. React, Vue, Angular — фреймворки, на которых строятся современные веб-приложения. Проблема: поисковые роботы плохо дружат с JavaScript. Они могут не увидеть контент, который генерируется клиентским скриптом. Результат — пустые страницы в индексе и нулевой SEO-трафик. Расскажу, как решить эту проблему и добиться нормальной индексации SPA-сайтов.
Почему SPA плохо индексируются
Классический сайт работает так: сервер отдаёт готовый HTML → поисковый робот читает HTML → индексирует контент. Просто и надёжно.
SPA работает иначе: сервер отдаёт пустой HTML (только каркас) → браузер загружает JavaScript → JavaScript генерирует контент и рендерит страницу. Поисковый робот получает пустой HTML и видит: ничего нет. Контент появляется только после выполнения JavaScript — а робот может его не дождаться.
Яндекс умеет рендерить JavaScript (Яндекс использует headless-браузер для индексации), но делает это не всегда стабильно и не для всех страниц. Google справляется лучше, но тоже не без проблем. Результат: часть страниц SPA может быть проиндексирована с пустым контентом или не проиндексирована вовсе.
Три решения проблемы
1. SSR (Server-Side Rendering) — серверный рендеринг
Самое надёжное решение. Сервер рендерит HTML для каждой страницы и отдаёт готовый контент — как обычный сайт. JavaScript работает поверх готового HTML, обеспечивая интерактивность (гидратация).
Для React: Next.js — стандарт де-факто. Для Vue: Nuxt.js. Для Angular: Angular Universal.
Как это работает: пользователь (или робот) запрашивает страницу → сервер выполняет JavaScript, генерирует HTML → отдаёт готовый HTML клиенту. Робот получает полноценную страницу с контентом, мета-тегами, заголовками — и индексирует её без проблем.
Плюсы: идеальная индексация, быстрый First Contentful Paint (FCP), лучший UX при медленном интернете. Минусы: нагрузка на сервер (каждый запрос = рендеринг на сервере), сложнее инфраструктура.
Мой выбор: для проектов, где SEO критично (коммерческие сайты, интернет-магазины, контентные проекты), я всегда использую Next.js с SSR. Это даёт 100% гарантию индексации.
2. SSG (Static Site Generation) — статическая генерация
Страницы генерируются на этапе сборки (build time), а не при каждом запросе. Результат — набор готовых HTML-файлов, которые раздаются как обычные статические страницы.
Next.js и Nuxt.js поддерживают SSG: при сборке проекта генерируются HTML-файлы для всех маршрутов. Они отдаются моментально (без рендеринга на сервере) и прекрасно индексируются.
Плюсы: максимальная скорость (статический HTML), нулевая нагрузка на сервер, идеальная индексация. Минусы: для динамического контента (тысячи товаров, часто обновляемые данные) SSG неудобен — нужно пересобирать сайт при каждом изменении.
Подходит для: блогов, лендингов, сайтов-визиток, корпоративных сайтов — где контент меняется редко.
3. ISR (Incremental Static Regeneration)
Гибрид SSG и SSR, доступный в Next.js. Страницы генерируются статически, но могут обновляться с заданным интервалом (например, раз в час). При первом запросе отдаётся кэшированная версия, а в фоне — генерируется обновлённая.
Плюсы: скорость статики + актуальность данных. Минусы: работает только в Next.js (и аналогичных фреймворках), требует настройки.
Идеально для: интернет-магазинов на Next.js, новостных сайтов, каталогов — где контент обновляется часто, но не в реальном времени.
4. Prerender (если SSR невозможен)
Если проект уже написан на чистом React/Vue без SSR и переделывать нет ресурсов — используйте prerender-сервис. Он запускает headless-браузер, рендерит каждую страницу и сохраняет готовый HTML. Когда приходит поисковый робот — ему отдаётся pre-rendered HTML вместо JavaScript-приложения.
Сервисы: Prerender.io, Rendertron (open-source от Google), собственный prerender через Puppeteer.
Настройка: на уровне веб-сервера (nginx) определяете, что запрос от бота (по User-Agent) → перенаправляете на prerender-сервис → отдаёте готовый HTML.
Плюсы: не нужно переписывать приложение. Минусы: дополнительная инфраструктура, задержка в обновлении кэша, не 100% надёжность.
Технические аспекты SEO для SPA
Мета-теги (title, description, og:tags)
В SPA мета-теги нужно менять динамически для каждой страницы. В Next.js для этого используется компонент `<Head>` или `next/head`. В Nuxt.js — `useHead()` или `nuxtConfig.head`. В чистом React — библиотека react-helmet.
Каждая «страница» SPA должна иметь уникальный title и description с ключевыми словами. Без этого SEO не работает.
URL-адреса (маршрутизация)
SPA должен иметь нормальные ЧПУ (человекопонятные URL): site.ru/catalog/smartphones, а не site.ru/#/catalog/smartphones. Хеш-роутинг (с #) не индексируется поисковиками.
В Next.js и Nuxt.js маршрутизация по умолчанию создаёт нормальные URL. В чистом React Router — используйте BrowserRouter (history mode), а не HashRouter.
Канонические URL
Для каждой страницы — уникальный канонический URL через тег `<link rel="canonical">`. Это предотвращает дублирование контента.
XML-карта сайта
Генерируйте sitemap.xml со всеми страницами SPA. В Next.js — через плагин next-sitemap. В Nuxt.js — через @nuxtjs/sitemap. Подайте карту сайта в Яндекс Вебмастер.
Robots.txt
Не блокируйте JavaScript-файлы в robots.txt. Если робот не может загрузить JS — он не сможет рендерить страницы.
Lazy loading и контент
Если контент загружается по прокрутке (lazy loading) — убедитесь, что основной контент страницы загружается сразу, без необходимости скроллить. Робот обычно не скроллит — он видит только то, что доступно при первой загрузке.
Как проверить индексацию SPA
Яндекс Вебмастер
Инструмент «Проверка URL» → вставляете адрес страницы → Яндекс показывает, как он видит вашу страницу. Если контент пустой — проблема с рендерингом.
Ручная проверка
В поисковой строке Яндекса: `site:ваш-сайт.ru` → смотрите, какие страницы проиндексированы и с каким содержимым.
Google Search Console
Аналогично: «Проверка URL» → «Просмотреть просканированную страницу». Показывает, что именно увидел робот.
Curl / fetch без JavaScript
В терминале: `curl https://ваш-сайт.ru/страница` → если в ответе пустой body (только пустой div-контейнер) — SSR не работает, контент рендерится только на клиенте.
Выбор рендеринга: что использовать
Блог, корпоративный сайт, лендинг: SSG (максимальная скорость, идеальное SEO).
Интернет-магазин, каталог с частым обновлением: ISR или SSR.
Веб-приложение с дашбордами и личным кабинетом: SSR для публичных страниц + CSR для авторизованных разделов (личный кабинет не нужно индексировать).
Уже существующее SPA без SSR: Prerender-сервис как временное решение → переход на Next.js/Nuxt.js как стратегическое.
Типичные ошибки
Сделали SPA на React без SSR — и удивляются, что Яндекс не индексирует. SPA без SSR = невидимый для поиска сайт. Если SEO важно — SSR обязателен.
Заблокировали JS в robots.txt. Даже если Яндекс умеет рендерить JS, он не сможет этого сделать, если JS-файлы заблокированы.
Одинаковый title на всех страницах. В SPA без настройки head-менеджера все страницы имеют один и тот же title из index.html. Настройте динамические мета-теги.
Хеш-роутинг. site.ru/#/about — не индексируется. Используйте history mode.
Нет sitemap. Робот не знает, какие URL существуют на SPA-сайте, если нет карты сайта. Генерируйте sitemap.xml.
Что я рекомендую
Если вы планируете новый проект, где SEO важно — используйте Next.js (React) или Nuxt.js (Vue) с SSR/SSG из коробки. Это стандарт 2026 года для SEO-ориентированных веб-приложений.
Если у вас уже есть SPA без SSR — оцените, насколько критично SEO для вашего бизнеса. Если критично — мигрируйте на Next.js/Nuxt.js. Если нет возможности — подключите prerender-сервис как временное решение.
И не забывайте проверять индексацию: регулярно смотрите в Яндекс Вебмастере, как робот видит ваши страницы. Если видит пустоту — у вас проблема с рендерингом, и никакие ключевые слова не помогут.
Нужна помощь с настройкой SSR или миграцией на Next.js — пишите. Это моя специализация.