Next.js: Metadata и SEO — типичные gotcha на собеседовании

Question

Accepted Answer

Интервьюеры ловят на Pages-era подходах, shallow merge и устаревшем размещении viewport.

## Разбор

- **«Как задать title в App Router?»** `next/head` или `document.title` — Pages era. Ответ: export `metadata` / `generateMetadata`.
- **Metadata и page делят fetch.** `generateMetadata` не удваивает запросы — request memoization в одном render.
- **`metadataBase`** нужен (обычно root layout), иначе relative OG/canonical не станут absolute — scrapers требуют absolute URLs.
- **Merge shallow per top-level key.** Child `openGraph` заменяет parent целиком, не deep-merge полей.
- **`viewport` и `themeColor` вынесены** из `metadata` в отдельный `viewport` export — в `metadata` будет warning.
- **Streaming не ломает SEO** — head флашится первым. Client-only metadata через JS-библиотеку *может* быть пропущена non-JS crawlers.

## Итог

App Router metadata — declarative exports + shallow merge; знайте `metadataBase` и отличие от Pages Router.