Код, который не видят поисковики: SEO для React, Vue и Angular без потери трафика
Ваше React или Vue-приложение может занимать первые строчки в Google и одновременно быть невидимым для ChatGPT и Perplexity. Причина простая: Google рендерит JavaScript перед индексацией. AI-краулеры читают только первый HTML-ответ сервера, без выполнения скриптов. Если заголовок, текст и мета-данные подгружаются скриптом после загрузки страницы, нейросеть увидит пустой div и слово «Loading...» вместо контента.
Решение – перенести ключевой контент публичных страниц в SSR или SSG (Next.js, Nuxt, Angular Universal): заголовок, H1, основной текст и структурированные данные должны быть в первом HTML-ответе без выполнения JS. Проверить это можно за пять минут: откройте исходный код страницы (Ctrl+U) или сравните crawled HTML и rendered HTML в Google Search Console через URL Inspection. Если текст есть только во второй версии, AI-поиск не приводит вам клиентов через эту страницу.
Почему Google видит ваш сайт, а ChatGPT нет
Google Bot умеет рендерить JavaScript. Он загружает страницу, выполняет скрипты, дожидается отрисовки и только потом индексирует результат. Это дорогая операция, но Google может себе её позволить – у него огромные вычислительные ресурсы и десятилетия оптимизации этого процесса.
AI-краулеры Perplexity, ChatGPT и других сервисов устроены иначе. По наблюдениям специалистов по JavaScript SEO, большинство из них читают только первый HTML-ответ сервера – без выполнения JavaScript. Если ваш React-компонент собирает контент на клиенте после загрузки, эти боты видят пустой каркас страницы или временный текст вроде «Loading...». Для человека и Google страница выглядит нормально. Для нейросети её просто нет.
Это расхождение стоит денег. Если раньше клиника или юрфирма конкурировали только за позиции в Google, теперь часть спроса уходит через AI-ответы – и туда невидимый сайт не попадает вообще, независимо от позиций в классическом поиске. Подробнее о том, как формируется видимость бизнеса в нейросетях, мы разбирали в материале о <a href="/blog/geo-dlya-yuridicheskoy-firmy">GEO для юридической фирмы</a>.
Что именно проверять в SPA-приложении
Чек-лист ниже собран из конкретных точек отказа – они встречаются в реальных проектах на React, Vue и Angular.
- Откройте страницу через «просмотр код страницы» (не через DevTools – там уже отрисованный DOM). Если title, H1 и основной текст видны сразу – хорошо. Если видите только – контент рендерится на клиенте.
- Сравните crawled HTML и rendered HTML в Google Search Console через URL Inspection. Расхождение между версиями – прямой сигнал, что часть контента доступна только после выполнения JS.
- Проверьте роутинг: используется ли History API с человекопонятными URL (/uslugi/razvod) или устаревший hash-роутинг (/#/uslugi/razvod). Второй вариант хуже читается и краулерами, и пользователями.
- Зайдите на несуществующую страницу сайта и проверьте код ответа сервера. Многие SPA возвращают HTTP 200 вместо 404 – это мешает поисковикам и AI-системам понимать структуру сайта.
- Проверьте уникальность title, description, canonical и Open Graph для каждого публичного маршрута. Часто в SPA один и тот же шаблон meta используется для всех страниц.
- Убедитесь, что для страниц услуг, статей и профилей специалистов есть JSON-LD разметка нужного типа (Service, Article, Person).
Частые ошибки в React/Vue/Angular-проектах
- Ленивая загрузка (lazy loading) всего контента страницы, включая текст, который должен быть виден сразу.
- JS-библиотека (react-helmet и аналоги) задаёт мета-теги без предварительного рендера – бот без JS их не увидит.
- Один общий title/description для всех страниц каталога услуг.
- Хеш-роутинг вместо чистых URL на старых Angular-проектах.
- Отсутствие серверного статуса 404 для несуществующих маршрутов – SPA отдаёт 200 и рендерит клиентский компонент "страница не найдена".
SSR и SSG: что выбрать и почему это дешевле переделки
Для новых проектов, где важен поисковый и AI-трафик, вывод один: ключевые публичные страницы – услуги, блог, карточки специалистов – стоит отдавать через SSR (Server-Side Rendering) или SSG (Static Site Generation). Чистый CSR (Client-Side Rendering) оставляет AI-ботов без контента: логи серверов показывают, что GPTBot, ClaudeBot и PerplexityBot скачивают HTML-ответ, но не выполняют JavaScript и не видят страницу, собранную в браузере. Разница между подходами – в том, когда собирается HTML с контентом: на сервере при каждом запросе (SSR), заранее при сборке (SSG) или в браузере пользователя (CSR).
| Подход | Когда контент готов | Плюс для GEO | Минус |
|---|---|---|---|
| CSR (чистый React/Vue) | В браузере после загрузки JS | – | AI-боты не видят контент |
| SSR (Next.js, Nuxt) | На сервере при каждом запросе | Контент виден сразу в HTML | Требует серверных ресурсов |
| SSG (статическая генерация) | При сборке проекта | Быстрая загрузка, контент в HTML | Не подходит для часто меняющихся данных |
| Гибрид (ISR, частичная гидрация) | Смешанно по типу страниц | Баланс скорости и актуальности | Сложнее в настройке |
Практический вывод простой: страницы услуг, блог и карточки специалистов держите на SSR или SSG. Внутренние панели и личные кабинеты, куда AI-краулеры не заходят, можно оставить на CSR – там рендеринг в браузере никому не мешает.
Core Web Vitals: не только про скорость, но и про доверие
В SPA-приложениях легко испортить метрики Core Web Vitals: тяжёлые бандлы, отсутствие code splitting, изображения без зарезервированного места под них. Google считает страницу быстрой, если у 75% пользователей LCP укладывается в 2.5 секунды, INP – в 200 мс, а CLS остаётся ниже 0.1. Эти пороги показывают, как быстро человек видит основной контент и насколько стабильна разметка при загрузке.
Для GEO это важно вдвойне: если страница долго собирается на клиенте, краулер не станет ждать. Он уйдёт с тем HTML, который получил сразу – часто пустым.
Проверьте свой сайт за 40 секунд
Найдут ли вас в ChatGPT и Perplexity?
Ответьте на несколько вопросов о сайте – получите список конкретных технических проблем (рендеринг, скорость, доступ для ботов) и понимание, что чинить первым: своими силами или с разработчиком.
Чек-лист: видно ли ваше React/Vue/Angular-приложение нейросетям
18 практических проверок для SPA-сайта: от первого HTML-ответа до правильных 404 и JSON-LD.
«Мы полгода не понимали, почему сайт на React в топе Google, а в Perplexity нас просто нет. Оказалось, весь текст услуг подгружался через JS – бот видел пустую страницу.»
Технический директор · юридическая компания, автоматизация документооборота
Проверьте, что видит нейросеть на вашем сайте прямо сейчас
Пройдите короткую проверку сайта. В конце вы получите список конкретных проблем: какие страницы не видит нейросеть, что мешает роботам прочитать текст, с чего начинать исправление. Если находок много – предложим бесплатную консультацию со специалистом по технической оптимизации.
Частые вопросы
Если Google уже хорошо индексирует мой React-сайт, зачем что-то менять?
Потому что Google и AI-поисковики работают по-разному. Google рендерит JavaScript перед индексацией, большинство AI-краулеров – нет. Хорошие позиции в Google не гарантируют видимость в ChatGPT или Perplexity, если контент подгружается только на клиенте.
Обязательно переписывать весь сайт на Next.js или Nuxt?
Нет. Достаточно перевести на SSR или SSG публичные страницы, которые должны попадать в поиск: услуги, блог, карточки специалистов. Личный кабинет и внутренние панели можно оставить как есть – туда краулеры не заходят и не должны.
Как быстро проверить, видит ли AI-бот мой сайт, без привлечения разработчика?
Откройте исходный код страницы через Ctrl+U. Если там виден заголовок и основной текст – контент доступен без JS. Если видите пустой
или похожую конструкцию – контент рендерится на клиенте и невидим для большинства AI-краулеров.Что делать, если сайт уже большой и переход на SSR дорог?
Начните с самых важных страниц по трафику и конверсии: топ-10 страниц услуг, главная, блог. Гибридный подход (частичный SSR только для публичных маршрутов) закрывает большую часть проблемы без полной переделки архитектуры.
Влияет ли hash-роутинг (/#/) на индексацию в AI-поиске?
Да, негативно. Чистые URL с History API читаются и людьми, и краулерами лучше. Хеш-роутинг усложняет разбор структуры сайта и может привести к тому, что отдельные разделы вообще не попадут в индекс AI-систем.
Нужна ли JSON-LD разметка, если у меня уже есть хорошие meta-теги?
Да, это разные уровни. Meta-теги описывают страницу для сниппета в поиске. JSON-LD явно сообщает системе тип контента (услуга, статья, специалист) и структурированные данные о нём, что помогает и Google, и AI-системам точнее понять и процитировать страницу.