Next.js: Metadata и SEO — как это работает на практике

Question

Accepted Answer

В App Router метаданные — это `export const metadata` (статика) или `export async function generateMetadata` (динамика). Next мержит по дереву layout'ов и стримит теги в `` до тела страницы. ## Разбор **Два экспорта, взаимоисключающие на файл:** - `export const metadata: Metadata = {...}` — статика, известна на build. - `export async function generateMetadata({ params, searchParams }, parent)` — async, для title/OG от данных. `generateMetadata` получает те же `params`, что и page, и может `await parent` для родительских metadata. Её `fetch` участвует в **request memoization** — если page тоже вызывает `getPost(id)`, сеть один раз. **`title.template`** в layout: `%s · Acme` один раз; child с string title оборачивается. Escape: `title: { absolute: 'No suffix' }`. **File-based metadata:** `opengraph-image.tsx`, `icon.png`, `sitemap.ts`, `robots.ts`, `manifest.ts` — конвенции, из которых Next делает реальные routes. `opengraph-image.tsx` с `ImageResponse` (JSX → PNG) — динамические OG-карточки без screenshot-сервиса. **Streaming caveat:** при Suspense Next держит metadata и флашит в начальный `` chunk до streamed body — SEO-теги не застревают за boundary. ## Итог Metadata — декларативные данные, не императивный ``; dedupe fetch с page и file-based conventions покрывают SEO без лишних запросов.