SEO в React: react-helmet и аналоги

Проблема SEO в SPA

SPA (React без SSR):

• HTML — пустой <div id="root">.
• Контент через JS.
• Поисковики видят пусто.

Что было:

• Google рендерит JS.
• Яндекс — хуже.
• Соцсети — вообще пусто.

Правило: для SEO нужен SSR / SSG / Next.js.

Когда react-helmet

Используется:

• CRA (Create React App) — устаревшее.
• Vite + React — чистый SPA.
• Старые проекты.
• Не для новых.

Что НЕ даёт:

• SSR.
• Правильную индексацию.
• Правильные превью в соцсетях.

Правило: react-helmet не заменяет SSR.

react-helmet

Установка:

npm install react-helmet-async

⚠️ react-helmet устарел. Использовать react-helmet-async.

Настройка:

import { HelmetProvider } from 'react-helmet-async';

function App() {
    return (
        <HelmetProvider>
            <Router>
                <Routes />
            </Router>
        </HelmetProvider>
    );
}

Использование

В компоненте:

import { Helmet } from 'react-helmet-async';

function About() {
    return (
        <>
            <Helmet>
                <title>О нас | SKILLS-DEV.RU</title>
                <meta name="description" content="Информация о компании" />
                <link rel="canonical" href="https://example.com/about" />
                <meta property="og:title" content="О нас" />
                <meta property="og:description" content="Информация о компании" />
                <meta property="og:image" content="https://example.com/og.jpg" />
            </Helmet>
            <h1>О нас</h1>
        </>
    );
}

Что даёт:

• Меняет <head>.
• На клиенте.
• Не для SSR.

Проблемы

Что НЕ работает:

• Поисковики видят только дефолтный HTML.
• Соцсети — тоже.
• Яндекс — особенно плохо.

Что нужно:

• SSR (Next.js, Remix).
• SSG (Next.js, Gatsby).
• Пререндер (vite-plugin-ssr, prerender.io).

React без SSR: варианты

1. Next.js — рекомендуется.

2. Remix — альтернатива.

3. Vite + vite-plugin-ssr — для SPA.

4. Prerender.io — динамический пререндер.

5. Static Site Generation — Gatsby.

Правило: новый проект — Next.js.

Prerender.io

Что это: сервис, рендерит SPA для ботов.

Как:

1. Бот приходит.
2. Nginx проксирует на prerender.io.
3. Prerender рендерит JS.
4. Отдаёт HTML боту.

Nginx:

location / {
    if ($http_user_agent ~* "(googlebot|yandexbot|bingbot)") {
        proxy_pass https://service.prerender.io;
    }
    try_files $uri /index.html;
}

Плюс: работает. Минус: платно, костыль.

Правило: только если Next.js не вариант.

React + Vite: ssr

vite-plugin-ssr (теперь vike):

npm install vike

Настройка: преобразует SPA в SSR.

Что даёт: правильный HTML.

Когда: если начали на Vite и нужен SSR.

SSR метаданных

Как работает в SSR:

1. Сервер рендерит компонент.
2. Helmet собирает мета.
3. Helmet отдаёт их в HTML.
4. Клиент получает уже с мета.

Что нужно:

• HelmetProvider — на сервере.
• helmetContext — сбор.
• Вставка в HTML.

Пример: SSR + Helmet

Server:

import express from 'express';
import { renderToString } from 'react-dom/server';
import { HelmetProvider } from 'react-helmet-async';
import App from './App';

const app = express();

app.get('*', (req, res) => {
    const helmetContext = {};
    const html = renderToString(
        <HelmetProvider context={helmetContext}>
            <App url={req.url} />
        </HelmetProvider>,
    );

    const { helmet } = helmetContext;

    res.send(`
        <!DOCTYPE html>
        <html>
            <head>
                ${helmet.title.toString()}
                ${helmet.meta.toString()}
                ${helmet.link.toString()}
            </head>
            <body>
                <div id="root">${html}</div>
                <script src="/bundle.js"></script>
            </body>
        </html>
    `);
});

Что даёт: правильные метатеги в HTML.

Аналоги

React 19:

• Встроенные <title>, <meta>, <link>.
• Без Helmet.
• Автоматический hoisting в <head>.

React 19 пример:

function About() {
    return (
        <>
            <title>О нас | SKILLS-DEV.RU</title>
            <meta name="description" content="Информация о компании" />
            <link rel="canonical" href="https://example.com/about" />
            <h1>О нас</h1>
        </>
    );
}

Что даёт: встроенно, без библиотек.

Правило: React 19+ — не нужен Helmet.

Comparison

Правило: Next.js — лучший вариант.

Что делать в 2026

Если CRA:

• Перейти на Next.js.
• Или Vite + SSG.
• Или Prerender.io.

Если React 19 + Vite:

• Встроенные теги.
• vite-plugin-ssr для SSR.

Если Next.js:

• Metadata API (не Helmet).

Практика

1. Определите свой стек.

2. Если Next.js — Metadata API.

3. Если React 19 — встроенные теги.

4. Если React 18 и ниже — react-helmet-async.

5. Настройте SSR где возможно.

6. Проверьте через curl — что в HTML.

7. Проверьте в GSC — проверка URL.

Частые ошибки

1. Helmet для CRA:

Работает только на клиенте

Решение: SSR.

2. Нет SSR:

Поисковик видит пусто

Решение: Next.js / Vike.

3. Без HelmetProvider:

Ошибка

Решение: обернуть.

4. Старый react-helmet:

Проблемы с React 18

Решение: react-helmet-async.

5. Metadata в JS:

Не видно в HTML

Решение: SSR.

6. Prerender без fallback:

Боты без JS — ничего

Решение: проверить.

7. Игнорировать соцсети:

Серые ссылки

Решение: OG.

8. Не проверять:

Ошибки незаметны

Решение: curl, GSC.

Итог

• SPA без SSR — плохо для SEO.
• react-helmet-async — для старых.
• React 19 — встроенные теги.
• Next.js — Metadata API (лучший).
• Prerender.io — костыль.
• vite-plugin-ssr / Vike — SSR для Vite.
• SSR обязателен для SEO.
• OG — для соцсетей.
• Новые проекты — Next.js.
• Проверка через curl и GSC.

Дальше — SEO в Laravel: метатеги и Blade.