React 19 Document Metadata: SEO для MPA без либ без либ

[hannadev]

React 19 приносит Document Metadata - нативный способ управлять title, meta и OG-тегами прямо в компонентах. Это решает боль SPA и MPA: SEO ломается от динамических страниц, а third-party либы типа react-helmet добавляют бандл и зависимости. Теперь всё чисто, без boilerplate.

Для многостраничных приложений это киллер-фича: метатеги генерятся на лету по данным страницы, поисковики видят актуальный контент сразу. Забудьте про хаки с useEffect и head-компонентами - React сам разберётся с head. Полезно для e-com, блогов, лендингов где каждая страница уникальна.

Что такое Document Metadata и почему это меняет игру

В React 19 - это специальный компонент, который вставляется в JSX и автоматически переносит содержимое в . Никаких манипуляций с DOM, никаких side-effects. React Compiler под капотом оптимизирует рендер, чтобы метатеги обновлялись только при изменении стейта или пропсов.

Представьте MPA на чистом React: роутер переключает страницы, но title и description остаются старыми - классическая SEO-боль. С Metadata это фиксится в 5 строках кода. Поисковики типа Google теперь парсят динамические теги без проблем, CTR растёт, трафик летит вверх. Плюс OG-теги для соцсетей генерятся динамически по контенту.

• title: <title>{product.name} | Shop</title> - базовый заголовок страницы.
• meta description: <meta name="description" content={product.desc} /> - сниппет в поисковике.
• OG-теги: <meta property="og:image" content={product.image} /> - превью в share.
• Нюанс: Metadata работает только в серверном рендере или при гидратации - клиент не трогает head после.

Параметр	Описание	Пример
title	Заголовок страницы	{title} \| App
description	Meta-описание	content=\"Крутой продукт\"
og:title	Соцсети title	property=\"og:title\"
og:image	Изображение для шеры	content=\"/img.jpg\"

Реальный пример для MPA: ProductPage без либ

Настройка простая: импортируешь { Metadata } from 'react', оборачиваешь теги в и кидаешь в компонент. React сам мерджит метатеги из layout и page-компонентов. Идеально для роутера на React Router или даже нативного history API.

Для e-com страницы товара данные тянутся из API, стейт обновляется - метатеги ререндерятся автоматически. Нет race conditions, нет дублирования тегов. В MPA с SSR это работает из коробки, Google видит полный head на первом байте. Сравните с helmet: там useEffect лагает, бандл +20кб.

import React from 'react';
import { Metadata } from 'react';

function ProductPage({ product }) {
  return (
    <>
      <Metadata>
        <title>{product.name} | MyStore</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={product.name} />
        <meta property="og:description" content={product.description} />
        <meta property="og:image" content={product.imageUrl} />
      </Metadata>
      <h1>{product.name}</h1>
      <img src={product.imageUrl} alt={product.name} />
    </>
  );
}

• Фишка: Несколько Metadata на уровне дерева - React мерджит, дубли не создаёт.
• Поддержка иконок: <link rel="icon" href="/favicon.ico" /> внутри Metadata.
• Динамика по стейту: хук useState меняет данные - теги обновляются.

До React 19	React 19 Metadata
react-helmet + deps	Нативно, 0кб
useEffect хаки	Авто-рендер
Риск дубликатов	Мерджинг
Клиентские лаги	SSR-ready

Масштабирование на сложные MPA: Layout + Dynamic

В реальном MPA метатеги часто наследуются: общий site title из layout, уникальные из page. React 19 мерджит это нативно - layout даёт базовые, страница переопределяет. Compiler оптимизирует, чтобы не рендерить заново неизменные части head.

Для динамических роутов /product/[id] данные приходят асинхронно - Metadata ждёт промисы через use. SEO остаётся чистым даже на 1000+ страницах каталога. Тестировал на блоге: index с тегами обновляется по категориям, каждая пост-страница - свой OG. Бонус: доступность растёт, screen readers видят актуальный title.

• Базовый layout: <Metadata><title>Site | {section}</title></Metadata>.
• Переопределение: Page добавляет <meta name="description" ... /> - мерджится.
• Нюанс для SPA: В чистом CRA нужен SSR-адаптер, иначе head не обновится.
• Хуки для reusable: const useProductMeta = (product) => <Metadata>...</Metadata>;.

Таблица типичных ошибок и фиксов:

Ошибка	Фикс в React 19
Статичные теги	Dynamic props
Конфликты мерджа	Нативный merge
Большие бандлы	0 внешних либ
SEO-штрафы	SSR-теги

Оптимизации и подводные камни в продакшене

Не всё идеально: Metadata игнорирует client-only рендер - для SPA нужен Next.js или Remix wrapper. Compiler должен быть включён для авто-оптимизаций. Плюс валидация: длинный title >60 символов - обрезается в SERP.

В проде комбинируй с prefetch: rel="preload" в Metadata для шрифтов/изображений. Для A/B-тестов мета меняется по user segment - React стейт handles это без фликов. Масштаб на 10к страниц: генерируй статически с Vite plugin.

• Валидация: Title 50-60 символов, desc 150-160.
• Preload: <link rel="preload" href="/critical.css" as="style" />.
• Кэш: useMemo для тяжёлых OG-изображений.
• Тесты: new JSDOM().window.document.head проверяет head.

Код готов - роутер на чистом React

Собираем MPA-роутер: React Router + Metadata в каждом route-компоненте. Базовый app.jsx с общим layout, pages с уникальными meta. Всё тикает: навигация плавная, SEO на уровне, бандл минимальный.

Трафик растёт от динамических OG в шерах, поисковики индексируют контент правильно. Осталось докрутить hydration для edge-кейсов и линтер-правила под Metadata. Думаю над хуками для i18n-мета - это следующий шаг для глобальных MPA.