Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Metadata API в Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Metadata API у Next.js** - це вбудований механізм для керування **метаданими сторінки**: `<title>`, `<meta>`, Open Graph, Twitter Cards, favicon та іншими даними в `<head>`.

Простіше кажучи:

> Metadata API - це спосіб описувати SEO та метаінформацію **декларативно й безпечно**, прямо в коді.

---

## Навіщо потрібен Metadata API

Він вирішує одразу кілька проблем:

- централізоване керування SEO
- автоматичне формування `<head>`
- успадкування метаданих через layout'и
- коректна робота з Server Components
- менше ручної роботи з `<Head />`

---

## Як використовується Metadata API

### 1. Статичні метадані

Можна експортувати об'єкт `metadata`:

```ts
export const metadata = {
  title: 'Головна сторінка',
  description: 'Опис сайту'
}
```

Next.js сам перетворить це на теги `<title>` та `<meta>`.

---

### 2. Динамічні метадані

Якщо дані залежать від параметрів чи запиту, використовується функція:

```ts
export async function generateMetadata({ params }) {
  return {
    title: `Пост ${params.slug}`,
    description: 'Опис поста'
  }
}
```

Метадані будуть розраховані **на сервері** перед рендером сторінки.

---

## Де можна використовувати Metadata API

Metadata API працює в:

- `page.tsx`
- `layout.tsx`
- `route groups`
- вкладених layout'ах

Метадані:

- успадковуються згори донизу
- можуть доповнюватися або перевизначатися

---

## Що можна описувати через Metadata API

Через API можна задати:

- `title` (зокрема шаблони)
- `description`
- `keywords`
- `robots`
- `icons` (favicon)
- Open Graph (`og:title`, `og:image` тощо)
- Twitter Cards
- `alternates` (canonical, hreflang)

Все це описується звичайним об'єктом, без ручного HTML.

---

## Чим Metadata API кращий за `<Head />`

| `<Head />` | Metadata API |
|---|---|
| Ручне керування тегами | Декларативний підхід |
| Можна допустити дублі | Next.js сам об'єднує |
| Працює тільки на клієнті | Працює на сервері |
| Немає успадкування | Є успадкування |
| Потрібно стежити за порядком | Порядок автоматичний |

Metadata API краще вписується в архітектуру App Router.

---

## Зв'язок з layout'ами

Layout'и часто використовують для:

- спільних SEO-налаштувань розділу
- шаблонів заголовків
- спільних OG-тегів

```ts
export const metadata = {
  title: {
    template: '%s | My Site',
    default: 'My Site'
  }
}
```

Сторінки всередині автоматично підставляють свої значення.

---

### Підсумок

Metadata API в Next.js - це:

- офіційний спосіб роботи з SEO
- частина архітектури App Router
- серверний і безпечний
- підтримує успадкування
- позбавляє від ручного `<head>`

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати378 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.