Сайт на React не индексируется: что такое SSR и как исправить

Сайт на React, Vue или Angular, который собирает страницы только в браузере посетителя, отдаёт поисковому роботу почти пустой HTML — один тег div и ссылку на скрипт. Google умеет выполнять JavaScript, но делает это с задержкой и не всегда полностью. Яндекс обрабатывает такие сайты хуже. Решение — серверный рендеринг (SSR) или генерация страниц заранее (SSG): робот сразу получает готовый HTML с текстом, заголовками и ссылками. Для существующего сайта на React это обычно означает переход на Next.js или подключение предварительного рендеринга.

Как понять, что проблема у вас

Простая проверка за минуту: откройте любую страницу сайта, нажмите Ctrl+U (просмотр исходного кода страницы) и найдите в нём текст, который видите на экране. Если текста нет, а есть только `<div id="root"></div>` и скрипты — страница рендерится в браузере.

Другие признаки:

• в Вебмастере и Search Console страниц в индексе намного меньше, чем на сайте;
• в выдаче у страниц одинаковые заголовки и описания — те, что в общем шаблоне index.html;
• при отправке ссылки в мессенджер не появляется превью с картинкой и заголовком;
• в инструменте проверки URL у Google на скриншоте страница пустая или недогруженная.

Почему это плохо для SEO

Google описывает обработку JavaScript в три этапа: сканирование, рендеринг и индексирование, — и рендеринг может откладываться (документация Google). Пока страница не отрисована, робот не видит её текст и ссылки на другие страницы. Для большого сайта это значит, что часть страниц будет найдена через недели или не будет найдена вовсе.

Яндекс тоже умеет обрабатывать JavaScript, но полагаться на это для коммерческого сайта рискованно. Кроме поисковиков, пустой HTML плохо читают мессенджеры, соцсети, ИИ-поиск и сервисы, которые строят превью ссылок.

Типичные ошибки SPA-сайтов

SSR, SSG и предварительный рендеринг

SSR (серверный рендеринг). Сервер собирает страницу при каждом запросе и отдаёт готовый HTML. В браузере React «оживляет» её и дальше работает как приложение. Подходит для страниц, которые часто меняются: каталог с остатками, личные данные.

SSG (статическая генерация). Страницы собираются заранее при публикации, сервер отдаёт готовые файлы. Самый быстрый вариант для страниц услуг, статей, лендингов.

ISR и похожие гибридные режимы. Страница собрана заранее, но обновляется через заданное время или по событию. Удобно для каталогов.

Предварительный рендеринг для роботов. Отдельный сервис отдаёт роботам заранее отрендеренную версию. Это временное решение для сайта, который нельзя быстро переделать: его сложнее поддерживать, а расхождение между версиями для людей и роботов может выглядеть подозрительно.

Next.js для React и Nuxt для Vue поддерживают все эти режимы, поэтому переход на них — самый распространённый способ исправить индексацию.

Как исправить существующий сайт

1. Аудит. Какие страницы должны быть в поиске: услуги, каталог, статьи. Личный кабинет и корзина в индекс не нужны — их можно оставить как есть.
2. Выбор режима для каждой группы страниц: SSG для статичных, SSR или ISR для каталога.
3. Перенос на фреймворк с поддержкой серверного рендеринга. Компоненты React обычно переносятся без переписывания, меняются маршрутизация и загрузка данных.
4. Метаданные для каждой страницы: title, description, canonical, Open Graph, микроразметка — в HTML, а не скриптом.
5. Ссылки с href вместо обработчиков клика.
6. Корректные коды ответа: 404 для несуществующих страниц, 301 для перенесённых.
7. sitemap.xml со всеми адресами и обновление в Вебмастере и Search Console.

Сроки и стоимость

Иногда дешевле вынести публичную часть — услуги, статьи, каталог — в отдельный сайт на Next.js, а приложение оставить как есть на поддомене.

Отдельно проверьте карту сайта. В SPA её часто нет вовсе или она содержит только главную, потому что маршруты существуют лишь в коде приложения. После перехода на SSR или SSG генерируйте sitemap.xml автоматически при каждой сборке из того же списка страниц, что и сайт, — тогда новые услуги и статьи попадают в карту без ручной работы.

Что проверить после исправления

• Исходный код страницы (Ctrl+U) содержит текст и заголовки.
• У каждой страницы свой title и description.
• В инструменте проверки URL у Google страница отображается полностью.
• В Вебмастере растёт число страниц в поиске.
• Превью ссылок в мессенджерах показывает заголовок и картинку.
• Скорость на телефоне не ухудшилась: SSR при правильной настройке обычно её улучшает.