Перейти к содержанию

Метаданные

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

Вот темы, которые мы рассмотрим

  • Что такое метаданные.
  • Типы метаданных.
  • Как добавить изображение Open Graph с помощью метаданных.
  • Как добавить фавикон с помощью метаданных.

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

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

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

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

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

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

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

1
<title>Page Title</title>

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

1
2
3
4
<meta
    name="description"
    content="A brief description of the page content."
/>

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

1
2
3
4
<meta
    name="keywords"
    content="keyword1, keyword2, keyword3"
/>

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

1
2
3
4
5
6
<meta property="og:title" content="Title Here" />
<meta
    property="og:description"
    content="Description Here"
/>
<meta property="og:image" content="image_url_here" />

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

1
<link rel="icon" href="path/to/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: Предоставляет инструкции для поисковых систем
    • itemap.xml: Предоставляет информацию о структуре сайта.

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

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

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

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

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

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

Полезно знать

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

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

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

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

/app/layout.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { Metadata } from 'next';

export const metadata: Metadata = {
    title: 'Acme Dashboard',
    description:
        'The official Next.js Course Dashboard, built with 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
1
2
3
4
5
import { Metadata } from 'next';

export const metadata: Metadata = {
    title: 'Invoices | Acme Dashboard',
};

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

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

В корневом макете обновите объект metadata, чтобы включить в него шаблон:

/app/layout.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { Metadata } from 'next';

export const metadata: Metadata = {
    title: {
        template: '%s | Acme Dashboard',
        default: 'Acme Dashboard',
    },
    description:
        'The official Next.js Learn Dashboard built with App Router.',
    metadataBase: new URL(
        'https://next-learn-dashboard.vercel.sh'
    ),
};

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

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

/app/dashboard/invoices/page.tsx
1
2
3
export const metadata: Metadata = {
    title: 'Invoices',
};

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

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

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

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

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

Источник — https://nextjs.org/learn/dashboard-app/adding-metadata

Комментарии