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

Метаданные — сведения о странице, которые не видны в её тексте: заголовок вкладки (title), описание для поисковиков (description), картинка для превью в соцсетях. В Next.js их не пишут тегами вручную, а экспортируют объект metadata из страницы или макета.

Метаданные сайта

Добавьте объект в корневой макет:

// app/layout.tsx (фрагмент)
import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Мой блог',
  description: 'Статьи Анны о веб-разработке',
};

Next.js сам добавит теги title и meta в head. Вкладка браузера покажет «Мой блог». Метаданные работают только в серверных компонентах.

Метаданные страницы

Страница может задать свои значения — они заменят значения макета:

// app/about/page.tsx (фрагмент)
import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'О блоге',
};

На /about вкладка покажет «О блоге», а описание останется из макета.

Шаблон заголовка

Чтобы к каждому заголовку добавлялось название сайта, в макете задают шаблон:

// app/layout.tsx (фрагмент)
export const metadata: Metadata = {
  title: {
    default: 'Мой блог',
    template: '%s | Мой блог',
  },
};

Вместо %s подставляется заголовок страницы: на /about получится «О блоге | Мой блог». На главной, где своего заголовка нет, будет default.

generateMetadata для статьи

У каждой статьи заголовок свой, он берётся из базы. Для этого вместо объекта экспортируют асинхронную функцию generateMetadata:

// app/posts/[slug]/page.tsx (фрагмент)
import type { Metadata } from 'next';
import { getPost } from '@/lib/posts';
 
type Props = { params: Promise<{ slug: string }> };
 
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
 
  return {
    title: post?.title ?? 'Статья не найдена',
    description: post?.body.slice(0, 150),
    openGraph: { title: post?.title, type: 'article' },
  };
}

Функция получает те же params, что и страница. Вкладка /posts/hello-nextjs покажет «Привет, Next.js | Мой блог». Поле openGraph задаёт превью при отправке ссылки в соцсети и мессенджеры.

Файлы для поисковиков

Частая ошибка

Экспортировать metadata из файла с 'use client'. Next.js завершит сборку ошибкой: метаданные можно задавать только в серверных компонентах. Если страница должна быть клиентской, оставьте page.tsx серверным с metadata, а интерактивную часть вынесите в отдельный компонент.