Переходя между страницами, вы заметите, что title и другие метаданные на всех страницах одинаковы. Это происходит потому, что у нас один общий шаблон в папке layout, с экспортируемым объектом metadata, содержащим title и description.
Изменение метаданных на отдельных страницах
Чтобы изменить метаданные на конкретной странице, скопируйте объект metadata из файла layout и вставьте его в файл page.js соответствующей страницы (например, about/page.js). Задайте новые значения:
export const metadata = {
title: 'Страница про нас',
description: 'Страница про нас'
};После сохранения, на странице /about будут отображаться новые значения title и description. Проверить это можно, просмотрев исходный код страницы.
Добавление и динамическая генерация метаданных
Помимо title и description, можно добавлять другие метаданные, например, keywords:
export const metadata = {
title: 'Заголовок страницы',
description: 'Описание страницы',
keywords: 'ключевые, слова, страницы'
};Аналогично можно добавить любые другие метатеги, например, author, main и т.д.
Для динамической генерации метаданных, например, для отдельных постов, используйте асинхронную функцию:
export async function generateMetadata() {
const post = await fetchPageData(params.id); // params.id берется из URL
return {
title: `Пост ${post.id} – статья на сайте`,
description: post.body
};
}В этом примере функция fetchPageData получает данные поста по ID из URL. Затем, возвращается объект metadata с динамически сгенерированными title и description.
Правильно настроенные метаданные необходимы для SEO-оптимизации сайта. В Next.js это реализовано на стороне сервера, в отличие от React, где генерация происходит в браузере, что делает данную возможность более эффективной.