SEO для сайта на React

Сайт на React или Vue в браузере выглядит отлично, а поисковый робот часто получает пустую заготовку: ни текста, ни заголовка, только скрипт. Я делаю пререндер при сборке: каждая страница заранее превращается в готовый HTML, и Google, Яндекс и нейросети видят весь текст. Сайт не переписываем, абонплату сторонним сервисам не платим.

Зачем это нужно

Признаки, что роботы видят пустую страницу

Пять ситуаций, с которыми приходят владельцы сайтов на React, Vue и Angular.

01

Сайт есть, а в поиске его нет

Прошли месяцы после запуска, а в Google видна одна главная или вообще ничего. По брендовому запросу сайт находится, по услугам — нет.

02

В выдаче одинаковые заголовки

У всех страниц в поиске один и тот же title, взятый из шаблона. Робот не дождался, пока скрипт подставит нужный заголовок.

03

Google обнаружил, но не проиндексировал

В Search Console страницы висят в статусе «обнаружена, не проиндексирована». Отрисовка скриптом стоит роботу дорого, и он откладывает её на потом.

04

Яндекс видит меньше, чем Google

Робот Яндекса выполняет скрипты не всегда и не полностью. Сайт, который в Google хоть как-то находится, в Яндексе может быть почти невидим.

05

Нейросети о вас не знают

Роботы ChatGPT, Claude и Perplexity скрипты не выполняют. Если в HTML пусто, нейросеть не прочитает ни услуг, ни цен и не назовёт вас в ответе.

Узнали свою ситуацию?

Расскажите, что происходит у вас. Разберу задачу за час и скажу, что делать в первую очередь. Разбор бесплатный.

Проверить сайт
Разбираемся в словах

SSR, SSG и пререндер: что подходит вашему сайту

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

01

CSR — отрисовка в браузере

Так работает обычный React или Vue: сервер отдаёт пустую страницу и скрипт, текст появляется уже у посетителя. Человеку удобно, роботу — пусто.

02

SSR — отрисовка на сервере

Сервер собирает страницу на каждый запрос. Самый гибкий вариант, но требует переделки проекта, например переезда на Next.js или Nuxt, и своего сервера с Node.js.

03

SSG и пререндер при сборке

Страницы превращаются в готовый HTML заранее, во время сборки сайта. Сервер просто отдаёт файлы. Это то, что я делаю: без переписывания сайта и без абонплаты.

04

Динамический рендеринг

Отдельный сервис отдаёт роботам готовую копию, а людям — обычную страницу. Работает, но это ещё одна подписка и ещё одна точка отказа.

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

Переписать сайт, подключить сервис или пререндер при сборке

Чаще всего владельцу сайта предлагают два пути: переписать проект на Next.js или Nuxt либо подключить платный сервис, который отдаёт роботам копии страниц. Первое — это месяцы работы команды, второе — ежемесячная подписка и зависимость от чужого сервера.

Пререндер при сборке встраивается в ваш текущий проект. Сайт остаётся тем же, а при каждой сборке рядом с ним появляются готовые HTML-страницы для роботов.

Что сравниваемПереписать на Next.jsПлатный сервисПререндер при сборке
Переделка сайтабольшаянетнет
Срокмесяцыдниот недели
Абонплатанеткаждый месяцнет
Зависимость от чужого серверанетданет
Видят ли нейросети текстдаесли настроенода
Ценадорогоподпискаот 250 000 ₸ разово

Если проект и так переезжает на Next.js или Nuxt, отдельный пререндер не нужен: я проверю, что серверная отрисовка отдаёт роботам всё, что нужно для поиска.

Возможности

SEO для сайта на React: что входит

Девять шагов от диагноза до проверки. Работаю в вашем репозитории, а не в отдельной копии сайта.

01

Диагноз от имени роботов

Запрашиваю страницы без JavaScript от имени Google, Яндекса и роботов нейросетей. Сравниваю, что видит робот и что видит человек.

02

Пререндер при сборке

Встраиваю в сборку шаг, который открывает каждую страницу и сохраняет готовый HTML. Сервер отдаёт его роботам и людям одинаково.

03

Свои мета-теги

У каждой страницы свой title, description, canonical и Open Graph в HTML, а не только после работы скрипта.

04

Адреса и ошибка 404

Нормальные адреса вместо решёток, правильный код 404 для несуществующих страниц, без мягких 404, которые путают Google.

05

Карта сайта и robots.txt

Карта со всеми страницами и честными датами изменения, robots.txt без запретов для поисковых роботов и роботов нейросетей.

06

Разметка

Разметка организации, хлебных крошек, услуг и вопросов прямо в HTML. Поисковик понимает, что за компания и что она продаёт.

07

.md-версии и llms.txt

Текстовые копии страниц и оглавление для нейросетей. Так модели читают сайт без вёрстки и называют вас точнее.

08

Пересборка по расписанию

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

09

Проверка и заявка в поиск

Проверяю результат тем же способом, что и диагноз, отправляю карту в Google Search Console и заявку в Яндекс и Bing.

Посчитаю, что из этого нужно именно вам

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

С чем работаю

  • React
  • Vue
  • Vite
  • Next.js
  • Nuxt
  • Angular
  • GitHub Actions
  • GitLab CI
  • Google Search Console
  • Яндекс Вебмастер
Как подключаем

Как идёт работа

Четыре шага. Пока я работаю, сайт продолжает открываться как обычно.

Проверка

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

План и доступ

Согласуем, какие страницы попадают в пререндер. Вы даёте доступ к репозиторию и к сборке.

Настройка

Встраиваю пререндер, мета-теги, карту сайта, разметку и .md-версии. Проверяю на тестовой сборке.

Выкладка и индекс

Выкладываем, проверяю ответ роботам на боевом сайте, отправляю сайт в Google, Яндекс и Bing.

Стоимость

Сколько стоит SEO для сайта на React

Сначала диагноз, потом настройка. Дальнейшее продвижение — по обычным тарифам SEO.

Проверка

50 000 ₸

Что видят Google, Яндекс и нейросети на ваших страницах.

  • Запрос от имени 7 роботов
  • Сравнение с тем, что видит человек
  • Мета-теги, 404, карта сайта
  • Отчёт с планом исправления
Подключить
Основной тариф

Пререндер под ключ

от 250 000 ₸

Роботы получают готовый текст на каждой странице.

  • Пререндер при сборке в вашем CI
  • Свои title, description и H1
  • Адреса, 404, карта сайта, robots.txt
  • Разметка, .md-версии и llms.txt
  • Проверка и заявка в поиск
Подключить

SEO-продвижение

от 200 000 ₸ / мес

Когда сайт видно, пора бороться за позиции.

  • Тариф на 50 запросов
  • Семантика и новые страницы
  • Тексты и техника
  • Отчёты каждый месяц
Подключить

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

Что я обещаю

Робот получает текст — это видно в проверке

Позиции не гарантирую: они зависят от конкуренции, ссылок и самого текста. Гарантирую то, что проверяется запросом к сайту.

Текст в ответе сервераКаждая страница из плана отдаёт роботу заголовок и текст без JavaScript. Проверяем вместе тем же запросом, что и в начале.
Сайт не переписываюВаш проект, фреймворк и дизайн остаются прежними. Меняется только сборка, и всё описано, чтобы ваш разработчик понимал, что сделано.
Без абонплатыНикаких подписок на сторонние сервисы. Пререндер работает в вашей сборке и принадлежит вам.
Кейсы

Сайты и сервисы на JavaScript-фреймворках

В ZAuzi Vet роботы получали пустую заготовку React: ноль слов и ни одного заголовка. После пререндера при сборке они видят 1444 слова и H1 на главной, а сайт пересобирается сам каждые шесть часов.

ZAuzi Vet: УЗИ для животных и курсы для врачей. Услуга: SEO для сайта на React ZAuzi Vet: УЗИ для животных и курсы для врачей на телефоне
  • Разработка
  • SEO
  • Таргет

ZAuzi Vet: УЗИ для животных и курсы для врачей

Кабинет УЗИ-диагностики для животных. Сайт с ценами и записью, блог для владельцев, каталог курсов для ветеринаров и закрытая библиотека с материалами. Плюс запустили таргетированную рекламу в Instagram.

Разработка и SEOсайт и продвижение
Таргетреклама в Instagram
Видно в ChatGPTклинику советуют нейросети
Открыть сайт
TheLilu: рекламная площадка для Threads TheLilu: рекламная площадка для Threads на телефоне
  • Веб-приложение
  • Разработка
  • Оплаты

TheLilu: рекламная площадка для Threads

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

Веб-приложениеразработка с нуля
Личные кабинетыдля трёх типов пользователей
Приём оплаткарты и криптовалюта
Открыть сайт
WazzaBee — сервис интеграции мессенджеров с CRM WazzaBee — сервис интеграции мессенджеров с CRM на телефоне
  • Свой продукт
  • WhatsApp
  • CRM

WazzaBee — сервис интеграции мессенджеров с CRM

Подключает WhatsApp, Telegram, Instagram, Messenger и OLX к Bitrix24 и amoCRM: вся переписка компании в одном окне и внутри CRM. Мой собственный продукт, от идеи до приложения в маркетплейсе Bitrix24 и партнёрской сети.

15 минутподключение официального WhatsApp
12 странгде работает сервис
500 000 сообщенийпроходит через сервис каждый месяц
Открыть сайт
Вопросы

Вопросы про SEO для сайта на React

Если вашего вопроса нет, напишите в WhatsApp, отвечу сам.

Сколько стоит SEO для сайта на React?

Проверка того, что видят роботы, стоит 50 000 ₸. Настройка пререндера при сборке с мета-тегами, картой сайта и разметкой — от 250 000 ₸ разово. Дальнейшее продвижение — от 200 000 ₸ в месяц за 50 запросов.

Индексирует ли Google сайты на JavaScript?

Да, но не сразу: отрисовку скриптов Google откладывает, и часть страниц может долго висеть необработанной. Готовый HTML индексируется быстрее и надёжнее.

Умеет ли Яндекс выполнять JavaScript?

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

Нужно ли переписывать сайт на Next.js ради SEO?

Обычно нет. Пререндер при сборке даёт роботам готовый текст без переделки проекта. Переезд на Next.js оправдан, если он нужен вам и по другим причинам.

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

Откройте код страницы в браузере, а не инспектор: если там нет текста и заголовка, робот видит то же самое. Точнее всего — запрос от имени робота, который я делаю на проверке.

Не считается ли пререндер обманом поисковика?

Нет, если робот и человек получают одинаковое содержимое. При пререндере при сборке так и есть: одна и та же страница, просто готовая заранее.

Почему нейросети не видят мой сайт на React?

Роботы ChatGPT, Claude и Perplexity не выполняют скрипты и читают только то, что сервер отдал сразу. Если в HTML пусто, нейросеть не узнает ни ваших услуг, ни цен.

Обсудим задачу

Сначала посмотрю, что видит робот

Пришлите адрес сайта. Запрошу его от имени Google, Яндекса и роботов нейросетей и скажу, сколько текста они получают на самом деле и что с этим делать.

Оставить заявку

Перезвоню или напишу в WhatsApp в рабочее время. Обычно в течение часа.

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

WhatsApp Позвонить