Метаданные и SEO: generateMetadata

Задаём title, description и превью для соцсетей прямо из кода страницы — статически и динамически.

В App Router мета-теги задаются не вручную в <head>, а экспортом объекта metadata или асинхронной функции generateMetadata из серверного компонента.

Статические метаданные

Для страницы с фиксированным заголовком достаточно экспортировать объект metadata. Next.js сам подставит нужные теги в <head>:

// app/about/page.tsx
export const metadata = {
  title: "О нас — Мой сайт",
  description: "Команда и история нашего проекта.",
};

export default function AboutPage() {
  return <h1>О нас</h1>;
}

Динамические метаданные

Для страницы статьи заголовок зависит от данных. Тогда экспортируют async-функцию generateMetadata — она получает те же params, что и страница:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { title: post.title, images: [post.cover] },
  };
}

Так каждый адрес получает свой уникальный title и корректное превью при шеринге — то, чего так не хватало SPA.

Что можно задать

Поле	Назначение
`title`	Заголовок вкладки и в выдаче
`description`	Описание для поисковика
`openGraph`	Превью в соцсетях и мессенджерах
`robots`	Указания для поисковых роботов

Почему это серверное

Метаданные генерируются на сервере и попадают в HTML до отправки клиенту. Поэтому поисковик и превью-бот видят правильные теги сразу, без выполнения JavaScript. Соберём типичный заголовок вкладки из шаблона:

function pageTitle(pageName, siteName) {
  return pageName ? pageName + " — " + siteName : siteName;
}

console.log(pageTitle("Блог", "CodeChick"));
console.log(pageTitle("", "CodeChick"));

Вывод:

Блог — CodeChick
CodeChick

Итог

Статичные теги — экспорт объекта metadata из страницы или layout.
Динамические — функция generateMetadata({ params }), грузящая данные.
Метаданные формируются на сервере и сразу попадают в HTML — отличный SEO «из коробки».