App Router имеет встроенный Metadata API для SEO-тегов (<title>, <meta>, Open Graph и т.д.) — вы экспортируете метаданные из layout.tsx или page.tsx, и Next.js отрисовывает правильные теги <head>.
App Router имеет встроенный Metadata API для SEO-тегов (<title>, <meta>, Open Graph и т.д.) — вы экспортируете метаданные из layout.tsx или page.tsx, и Next.js отрисовывает правильные теги <head>.
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js читает экспортированный объект metadata и генерирует <title>, <meta name="description">, OG-теги и т.д. — никакого ручного редактирования <head> не требуется.
Для страниц, у которых заголовок зависит от полученного содержимого (пост блога, продукт), экспортируйте асинхронную функцию generateMetadata:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Она работает на сервере и позволяет каждой динамической странице иметь точные, специфичные для содержимого метаданные — необходимо для SEO и социального обмена динамическим содержимым.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
Метаданные, определённые в layout, объединяются с (и могут быть переопределены) дочерними страницами — поэтому вы устанавливаете сайт-широкие значения по умолчанию один раз и значения для отдельных страниц там, где это необходимо. template автоматически добавляет имя сайта.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Специальные файлы автоматически генерируют соответствующие метаданные/маршруты.
Хорошие метаданные способствуют SEO и предпросмотрам социальных сетей.
Metadata API делает это декларативным и типобезопасным — статические metadata для фиксированных страниц, асинхронная generateMetadata для управляемых данными страниц, и значения по умолчанию на уровне layout с шаблонами — заменяя ручное управление <head> чистой, отрисованной на сервере системой.