SEO для React: рендеринг, метаданные и ссылки для React-приложения, которое ранжируется

Короткий тест

Подходит ли вам SEO и с чего начать?

Вопрос 1 из 425%

Ищут ли люди в Google то, что вы продаёте?

Да, думаю, ищутНет, это новое или очень нишевоеНе знаю

SEO для React означает работу над тем, чтобы React-приложение было доступно для сканирования, индексирования и понимания поисковыми системами и ИИ-ассистентами. Сам React нейтрален: проблемы возникают, когда все рендерится в браузере. Google подтверждает в основах SEO для JavaScript, что обрабатывает JavaScript-приложения в три этапа (сканирование, рендеринг, индексирование) и что рендеринг на сервере или предварительный рендеринг «по-прежнему отличная идея, потому что ускоряет сайт для пользователей и роботов, а JavaScript умеют выполнять не все боты».

Почему React сложен для SEO?

React-приложение, созданное как одностраничное, отдает HTML-файл, в котором почти ничего нет, кроме пустого корневого div и тега script. Браузер загружает JavaScript, выполняет его и собирает страницу. Робот, читающий только HTML, не видит ничего для индексирования: ни заголовков, ни текста, ни ссылок.

Googlebot выполняет JavaScript, но на отдельном этапе: страница сканируется, попадает в очередь на рендеринг, рендерится в Chromium без интерфейса, и только после этого используются отрендеренные ссылки и контент. Каждый лишний этап дает шанс на сбой (ошибка скрипта, заблокированный API, превышение времени ожидания) и добавляет задержку, прежде чем новые страницы появятся в поиске. Наше руководство по SEO для JavaScript описывает этот процесс, а статья об индексировании в Google объясняет, как ускорить индексацию страниц.

Другие боты менее терпеливы. Анализ Vercel от декабря 2024 года, The rise of the AI crawler, показал, что «ни один из крупных краулеров ИИ в настоящее время не рендерит JavaScript», и назвал GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot и PerplexityBot. Страница React с клиентским рендерингом невидима для ChatGPT, Claude и Perplexity, даже если Google ее проиндексировал.

Какой подход к рендерингу выбрать для сайта на React?

Команда React теперь рекомендует начинать новые приложения с фреймворка. Прекращая поддержку Create React App 14 февраля 2025 года, она написала в анонсе, что «серверный рендеринг может улучшить SEO», а также повышает производительность, сокращая объем JavaScript, который нужно загрузить до показа контента. Варианты от самого слабого до самого сильного для поиска:

О динамическом рендеринге документация Google говорит прямо: он «был временным решением, а не долгосрочным», и вместо него Google рекомендует серверный рендеринг, статический рендеринг или гидратацию. Если вы выбираете фреймворк, наше руководство по SEO для Next.js подробно разбирает режимы рендеринга, Metadata API и карты сайта.

Если миграция невозможна, Google все равно может проиндексировать одностраничное приложение при соблюдении некоторых условий. Они перечислены в нашем руководстве по SEO для одностраничных приложений; остальная часть статьи относится к обоим случаям.

Как задать заголовки и метатеги в React?

Начиная с React 19 (стабильная версия с 5 декабря 2024 года) компоненты могут напрямую рендерить теги title, meta и link, а React переносит их в head документа. В примечаниях к выпуску React 19 сказано, что эта встроенная поддержка работает «в приложениях только на клиенте, с потоковым SSR и с Server Components». До React 19 эту задачу решали библиотеки вроде react-helmet или react-helmet-async, и они по-прежнему полезны, чтобы переопределять значения по умолчанию для отдельных маршрутов.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Три правила действуют при любом способе:

• Один заголовок на страницу, уникальный и описательный. Документация React предупреждает: если несколько компонентов одновременно рендерят заголовок, «поведение браузеров и поисковых систем не определено». Передавайте одну строку (шаблонную строку), а не смесь текста и переменных.
• Одно описание и один canonical на URL, сгенерированные из данных страницы. Генератор метатегов поможет их составить, а проверка canonical подтвердит, что опубликовано.
• Теги Open Graph в исходном HTML для страниц, которыми делятся, потому что боты предпросмотра ссылок обычно читают исходный HTML.

Какие ошибки маршрутизации и ссылок мешают индексированию?

Google указывает, что «может обнаружить ваши ссылки, только если это HTML-элементы a с атрибутом href», и не советует использовать фрагменты URL для загрузки разного контента. Большинство проблем SEO в React связаны с деталями маршрутизации:

Чтобы увидеть, что рендерит Google, откройте инструмент проверки URL в Search Console и посмотрите HTML проверенной страницы или прогоните ключевые шаблоны через проверку индексируемости.

Как работать с картой сайта и структурированными данными в React?

В React нет встроенной карты сайта. Генерируйте sitemap.xml при сборке из маршрутов и данных (или функцией карты сайта во фреймворке), включайте только канонические URL с ответом 200 и укажите файл в robots.txt. Для небольшого статического сайта хватит генератора XML-карты сайта.

Структурированные данные подчиняются тому же правилу, что и метаданные: рендерьте скрипт JSON-LD вместе со страницей, из тех же данных, желательно на сервере. Google может прочитать JSON-LD, вставленный через JavaScript, после рендеринга, но разметка, которой нет в исходном HTML, отсутствует и для роботов, которые не рендерят страницы. Используйте Article для статей, Product для интернет-магазина, Organization на всем сайте и BreadcrumbList для глубоких страниц.

Как производительность влияет на SEO для React?

Большие JavaScript-бандлы ухудшают Core Web Vitals: браузер должен загрузить, разобрать и гидратировать код, прежде чем страница начнет реагировать, а это нагружает Largest Contentful Paint и Interaction to Next Paint, особенно на мобильных. В анонсе команды React о Create React App отмечается, что серверный рендеринг отправляет меньше JavaScript и полный HTML-документ, что ускоряет First Contentful Paint и может снизить INP. Практические рычаги: разделение кода по маршрутам через React.lazy, изображения с явными размерами, ленивая загрузка компонентов ниже первого экрана и аудит сторонних скриптов.

Что должно входить в чек-лист SEO для React?

1. Каждый индексируемый URL отдает полный HTML (серверный рендеринг или пререндеринг), что проверено через curl.
2. Уникальные заголовок, описание и canonical на саму себя для каждого URL.
3. Маршруты на основе History API, никаких хеш-URL, каждая внутренняя ссылка рендерится как a с href.
4. Настоящие коды ответа: 404 для отсутствующих страниц, 301 или 308 для перенесенных.
5. sitemap.xml, сгенерированная из тех же данных, что и маршруты, и указанная в robots.txt.
6. JSON-LD рендерится вместе со страницей и проверен инструментом проверки расширенных результатов.
7. Скрипты, стили и API, нужные для рендеринга, разрешены в robots.txt.
8. Код разделен по маршрутам, а Core Web Vitals отслеживаются на реальных пользователях.

Как сделать сайт на React видимым в ответах ИИ?

GEO (оптимизация для генеративных систем) начинается с доступа. Поскольку краулеры ИИ забирают исходный HTML, страница React должна отдавать текст, заголовки и JSON-LD без JavaScript, чтобы ее прочитали, пересказали и процитировали. Аудит доступности сайта для ИИ показывает, что эти боты получают с ваших страниц. Второе условие: контент, который стоит цитировать, то есть страницы, где каждый раздел отвечает на один вопрос, с источниками, цифрами и четкими определениями.

Эту контентную часть автоматизирует Sorank, наш продукт. Sorank: программа для SEO и GEO в режиме autopilot. Ее Генератор статей для блога пишет и публикует 20, 60 или 120 статей в месяц с источниками, внутренними ссылками и изображениями и подключается через webhook к сайтам на собственном стеке, например на React или Next.js. SEO Chat отвечает в формате диалога на вопросы о результатах вашего сайта в поиске.

Итог: отдавайте HTML с сервера, задайте каждому URL собственные заголовок, описание и canonical и используйте настоящие ссылки. Тогда React-сайт ранжируется как любой другой, а ИИ-ассистенты могут его прочитать. Чтобы регулярно наполнять такой сайт статьями для Google и ИИ, посмотрите тарифы Sorank: от 49 долларов в месяц и 3 дня бесплатного пробного периода.