SEO для сайта на React: 6 правил, чтобы Яндекс видел текст

Сайт на React ранжируется не хуже классического, если в ответе сервера уже лежит готовый HTML с текстом, заголовками и ссылками. Если же робот получает пустой div и 300-500 КБ JavaScript, страница может неделями висеть без нормального сниппета или выпасть из индекса как малополезная.

Ниже - 6 правил, по которым мы собираем React-сайты в студии, и способ за 10 минут проверить, видит ли Яндекс ваш текст. Статья для владельца бизнеса и маркетолога: без глубокой разработки, но с тем, что стоит спросить у подрядчика.

I. Почему React-сайт может быть невидим

Классическое одностраничное приложение (SPA) работает так: сервер отдаёт почти пустой документ, браузер скачивает скрипт, и уже скрипт рисует меню, тексты и карточки. Человек этого не замечает, а поисковый робот видит момент до выполнения скрипта.

Google умеет выполнять JavaScript, но делает это отложенно, во второй очереди. Яндекс тоже рендерит JS, однако на практике для SPA обычно видны проблемы: в поиск попадает заголовок без описания, одинаковый title на всех страницах, внутренние страницы не находятся по ссылкам. В итоге сайт красивый, а поиск о нём знает мало.

Сам React здесь не виноват. Виновата схема сборки: вопрос не в библиотеке, а в том, где формируется HTML - на сервере, на этапе сборки или только в браузере посетителя.

II. Способы рендеринга: сравнение

Для сайта услуг и корпоративного сайта обычно хватает пререндера: страницы собираются в статические HTML-файлы один раз при публикации, отдаются за доли секунды и не требуют сложного сервера. SSR нужен, когда данные меняются чаще, чем вы готовы пересобирать сайт, например остатки на складе в течение дня.

III. 6 правил SEO для React

1. Текст в исходном HTML. Заголовок h1, первые абзацы, цены и контакты должны быть в ответе сервера, а не подгружаться после запроса к API.
2. Уникальные title и description на каждой странице. Их прописывают при сборке для каждого адреса, а не меняют скриптом после загрузки.
3. Настоящие ссылки. Навигация - это теги a с атрибутом href, а не кнопки с обработчиком клика. Иначе робот не найдёт внутренние страницы.
4. Отдельный URL на каждую сущность. Услуга, статья, товар - свой адрес без решётки. Состояния вида /#/uslugi поисковик склеивает в одну страницу.
5. Правильные коды ответа. Несуществующий адрес отдаёт 404, а не красивую заглушку с кодом 200, иначе в индекс набиваются мусорные дубли.
6. Разметка и карта сайта. JSON-LD для организации, статей и FAQ в HTML, sitemap.xml со всеми адресами, canonical на каждой странице.

Отдельно про скорость. Пререндер решает не только индексацию, но и первую отрисовку: пользователь видит текст до загрузки скрипта. Это напрямую влияет на метрики Core Web Vitals и на то, дождётся ли человек с мобильного интернета первого экрана.

IV. Как проверить, что видит робот

• Яндекс Вебмастер, «Проверка ответа сервера». Показывает HTML, который получает робот, и код ответа. Ищите в нём текст и ссылки.
• Вебмастер, «Страницы в поиске». Если внутренние страницы месяц после запуска не появились, проблема обычно в ссылках или рендеринге.
• Поиск по сайту в Яндексе запросом site:вашдомен. Одинаковые заголовки у разных страниц - признак, что title меняется скриптом.
• Отключение JavaScript в браузере. Грубый, но наглядный способ: если без JS страница пустая, для поиска она почти пустая тоже.

Проверку стоит повторять после каждого крупного обновления. Бывает, что разработчик переносит блок с отзывами или ценами на подгрузку через API ради удобства, и он тихо пропадает из индекса.

V. Частые ошибки и риски

Другие типичные ошибки на React-проектах:

• бесконечная прокрутка без пагинации по адресам: товары и статьи после первой порции роботу недоступны;
• тексты во вкладках и аккордеонах, которые рендерятся только по клику, а не просто скрыты стилями;
• robots.txt закрывает папку со скриптами и стилями, и поисковик не может корректно отрисовать страницу;
• переход с конструктора на React без карты 301-редиректов: старые адреса отдают 404, и накопленные позиции теряются.

Честно о сроках: даже идеально собранный сайт не выходит в топ сразу. Первые показы по страницам и статьям обычно видны в первые недели после индексации, дальше эффект накапливается от объёма полезного контента. Позиции и трафик не гарантирует ни один добросовестный подрядчик.

VI. Как это сделано в проектах студии

Сайт салона сложного окрашивания ayvazzovsky.com содержит много видео работ мастеров, портфолио, команду и онлайн-запись на два адреса. Здесь важно, чтобы тяжёлые видео не мешали роботу: текст услуг, цены и адреса лежат в HTML, а видео подгружается лениво и не блокирует первую отрисовку.

На ayvazzovsky.academy публичная часть (каталог курсов и отдельные посадочные страницы уроков) отдаётся готовыми страницами, а личный кабинет и промокоды работают на клиенте. Это и есть гибридная схема из таблицы выше: посадочные индексируются, кабинет поиску не нужен.

VII. Итог и стоимость

React не мешает SEO, если HTML собирается на сервере или при сборке, у каждой страницы есть свой адрес, title и настоящие ссылки. Проверка занимает 10 минут в Вебмастере и просмотре исходного кода, а исправление на готовом SPA обычно сводится к переводу публичных страниц на пререндер.

В студии разработка сайтов и SEO идут вместе: сайт на React стоит от 80 000 ₽ и собирается за 1-2 недели от получения материалов, перенос с конструктора - от 80 000 ₽. Дальше страницы наполняются статьями: SEO-статья от 500 ₽, 200 статей в месяц - 100 000 ₽. Если нужны не только показы, но и обращения, параллельно можно подключить лиды с оплатой за результат.

Наши работы

Сайты, которые студия уже запустила

Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.

Агротех с ИИ

SkyFarm ↗

Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.

Сайт салона

ayvazzovsky.com ↗

Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.

Онлайн-академия

ayvazzovsky.academy ↗

Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.

Event-агентство

navsegda-event.ru ↗

НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.

Витрина магазина

Monkey Market ↗

Премиальная витрина магазина кроссовок с заказом в Telegram.

Разработка сайтов от 80 000 ₽ →Все работы студии

Услуги студии по теме: разработка сайтов под ключ и SEO-продвижение статьями.

Нужен быстрый сайт, который видит поиск?

Соберём сайт на React с готовым HTML, мета-тегами и картой сайта, а потом наполним статьями.

Получить расчёт заявок →

Нажимая кнопку, вы соглашаетесь на обработку данных для ответа на заявку.

Частые вопросы