Що таке Metadata API в Next.js?

Next.jsMiddle~1 хв читання

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:

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

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

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

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

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-тегів

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

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

Підсумок

Metadata API в Next.js - це:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.