SEO для React SPA у 2026: prerendering, SSR, react-helmet-async

React SPA рендериться у браузері — Google бачить порожній HTML до виконання JS. У 2026 Googlebot робить рендер з затримкою до 2 тижнів. LinkedIn, Facebook, Telegram — взагалі не виконують JS. Результат: ваш сайт не індексується.

Три рішення

1. Prerendering — на білді запускаємо Puppeteer, рендеримо кожен роут у статичний HTML
2. SSR (Server-Side Rendering) — Next.js рендерить HTML на сервері на кожен запит
3. SSG (Static Site Generation) — Next.js / Astro генерують HTML на білді (тільки для контентних сайтів)

Prerendering для існуючого React-сайту

Не хочеться переписувати на Next.js? Додаємо prerender-постбілд скрипт:

// scripts/prerender.mjs import Prerenderer from "@prerenderer/prerenderer"; import PuppeteerRenderer from "@prerenderer/renderer-puppeteer"; const routes = getRoutesFromSitemap(); await prerenderer.renderRoutes(routes); // → dist/blog/post-1/index.html, dist/about/index.html ...

Apache віддає правильний HTML для кожного роуту, JS гідратується після.

react-helmet-async для динамічних meta

Кожна сторінка повинна мати свій title, description, canonical, og:* і JSON-LD. react-helmet-async інжектить це в head, а prerender фіксує в статиці.

Що ще критично

• Sitemap.xml з усіма роутами без trailing slash
• robots.txt з посиланням на sitemap
• Canonical URL на кожній сторінці
• Hreflang для мультимовних сайтів
• Core Web Vitals у зеленій зоні

Робимо SEO-аудит і налаштування існуючого React-сайту або переробляємо на Next.js — /services/web-development.