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 дні безкоштовного пробного періоду.