logoNext.js Русский
ДокументацияБлогИзучение

Добавление метаданных

Метаданные играют ключевую роль для SEO и возможности делиться контентом. В этой главе мы обсудим, как можно добавить метаданные в ваше приложение Next.js.

Что такое метаданные?

В веб-разработке метаданные предоставляют дополнительную информацию о веб-странице. Они не видны пользователям, посещающим страницу, а работают "за кулисами", встраиваясь в HTML-код страницы, обычно внутри элемента <head>. Эта скрытая информация крайне важна для поисковых систем и других систем, которым необходимо лучше понимать содержание вашей веб-страницы.

Почему метаданные важны?

Метаданные значительно улучшают SEO веб-страницы, делая её более доступной и понятной для поисковых систем и социальных платформ. Правильные метаданные помогают поисковым системам эффективно индексировать страницы, улучшая их позиции в результатах поиска. Кроме того, метаданные, такие как Open Graph, улучшают внешний вид ссылок при их публикации в социальных сетях, делая контент более привлекательным и информативным для пользователей.

Типы метаданных

Существуют различные типы метаданных, каждый из которых служит своей цели. Вот некоторые распространённые типы:

Метаданные заголовка: Отвечают за заголовок страницы, который отображается во вкладке браузера. Критически важны для SEO, так как помогают поисковым системам понять содержание страницы.

<title>Заголовок страницы</title>

Метаданные описания: Предоставляют краткое описание содержания страницы, которое часто отображается в результатах поиска.

<meta name="description" content="Краткое описание содержания страницы." />

Метаданные ключевых слов: Содержат ключевые слова, связанные с контентом страницы, помогая поисковым системам индексировать страницу.

<meta name="keywords" content="ключевое_слово1, ключевое_слово2, ключевое_слово3" />

Метаданные Open Graph: Улучшают представление страницы при публикации в социальных сетях, предоставляя такую информацию, как заголовок, описание и изображение для предпросмотра.

<meta property="og:title" content="Заголовок здесь" />
<meta property="og:description" content="Описание здесь" />
<meta property="og:image" content="ссылка_на_изображение" />

Метаданные фавиконки: Связывают фавиконку (маленькую иконку) со страницей, которая отображается в адресной строке или вкладке браузера.

<link rel="icon" href="путь/к/favicon.ico" />

Добавление метаданных

Next.js предоставляет API для работы с метаданными, который можно использовать для определения метаданных вашего приложения. Есть два способа добавления метаданных:

  • На основе конфигурации: Экспортируйте статический объект metadata или динамическую функцию generateMetadata в файле layout.js или page.js.

  • На основе файлов: Next.js поддерживает специальные файлы, предназначенные для метаданных:

    • favicon.ico, apple-icon.jpg и icon.jpg: Используются для фавиконок и иконок
    • opengraph-image.jpg и twitter-image.jpg: Применяются для изображений в социальных сетях
    • robots.txt: Содержит инструкции для поисковых роботов
    • sitemap.xml: Предоставляет информацию о структуре сайта

Вы можете использовать эти файлы для статических метаданных или генерировать их программно в вашем проекте.

В обоих случаях Next.js автоматически сгенерирует соответствующие элементы <head> для ваших страниц.

Фавиконка и изображение Open Graph

В папке /public вы найдёте два изображения: favicon.ico и opengraph-image.jpg.

Перенесите эти изображения в корень папки /app.

После этого Next.js автоматически распознает и использует эти файлы в качестве фавиконки и OG-изображения. Вы можете проверить это, посмотрев элемент <head> вашего приложения в инструментах разработчика.

Полезно знать: Вы также можете создавать динамические OG-изображения с помощью конструктора ImageResponse.

Заголовок и описание страницы

Вы также можете добавить объект metadata в любой файл layout.js или page.js, чтобы указать дополнительную информацию о странице, такую как заголовок и описание. Метаданные из layout.js будут унаследованы всеми страницами, которые его используют.

В корневом макете создайте новый объект metadata со следующими полями:

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'Официальная панель управления курса Next.js, созданная с использованием App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

Next.js автоматически добавит заголовок и метаданные в ваше приложение.

Но что, если вы хотите добавить собственный заголовок для конкретной страницы? Вы можете сделать это, добавив объект metadata на самой странице. Метаданные вложенных страниц переопределят метаданные родительского элемента.

Например, на странице /dashboard/invoices вы можете обновить заголовок:

/app/dashboard/invoices/page.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Счета | Acme Dashboard',
};

Это работает, но мы повторяем название приложения на каждой странице. Если что-то изменится (например, название компании), вам придётся обновлять его на всех страницах.

Вместо этого вы можете использовать поле title.template в объекте metadata для определения шаблона заголовков страниц. Этот шаблон может включать заголовок страницы и другую информацию.

В корневом макете обновите объект metadata, добавив шаблон:

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'Официальная учебная панель управления Next.js, созданная с использованием App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

Символ %s в шаблоне будет заменён на конкретный заголовок страницы.

Теперь на странице /dashboard/invoices вы можете добавить только заголовок страницы:

/app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
  title: 'Счета',
};

Перейдите на страницу /dashboard/invoices и проверьте элемент <head>. Вы должны увидеть, что заголовок страницы теперь выглядит как Счета | Acme Dashboard.

Практика: Добавление метаданных

Теперь, когда вы узнали о метаданных, попрактикуйтесь, добавив заголовки на другие страницы:

  1. Страница /login.
  2. Страница /dashboard/.
  3. Страница /dashboard/customers.
  4. Страница /dashboard/invoices/create.
  5. Страница /dashboard/invoices/[id]/edit.

API метаданных Next.js мощный и гибкий, давая вам полный контроль над метаданными вашего приложения. Здесь мы показали, как добавить базовые метаданные, но вы можете добавить множество других полей, включая keywords, robots, canonical и другие. Не стесняйтесь изучить документацию и добавить любые дополнительные метаданные в ваше приложение.

Добавление аутентификации

Добавьте аутентификацию для защиты маршрутов вашей панели управления с использованием NextAuth.js, Server Actions и Middleware.