Как настроить метаданные в Next.js 13.2+ для лучшего SEO

Содержание

1. 📂 Введение
2. 📂 Изменения в версиях 13.2 и выше
3. 📂 Основы новой системы метаданных
4. 📂 Использование тега title
5. 📂 Использование шаблонов заголовков
6. 📂 Добавление описания страницы
7. 📂 Использование ключевых слов
8. 📂 Настройка метаданных для социальных сетей
9. 📂 Работа с иконками
10. 📂 Другие возможности метаданных
11. 📂 Заключение

Введение

В этом видео мы рассмотрим новую систему метаданных в Next.js, с версии 13.2 и выше. Если вы недавно создали приложение на Next.js и заметили изменения в структуре файлов, то вероятно, вам понадобится обновить вашу систему метаданных.

Изменения в версиях 13.2 и выше

С версии 13.2 в Next.js была удалена и устарела особая файл head.js, где раньше хранилась метаинформация. Вместо этого, начиная с версии 13.3, всю метаинформацию следует хранить в файле layout.js.

Основы новой системы метаданных

В новой системе метаданных в Next.js, вам следует использовать экспорт const metadata в верхней части файлов. Это место, где вы будете хранить вашу метаинформацию. Позвольте мне показать вам, как это работает.

Если вы откроете файл layout.js, вы заметите, что вверху есть экспорт const metadata. Именно здесь необходимо указать все доступные теги метаданных.

Использование тега title

Один из самых важных тегов метаданных - это тег title, который контролирует название вашего сайта и отображается во вкладке браузера. Например, если вы хотите изменить текст во вкладке на "Мой сайт на Next.js", вы можете сделать следующее:

export const metadata = {
  title: 'Мой сайт на Next.js',
}

Использование шаблонов заголовков

Если вы хотите иметь общий шаблон заголовков для всех страниц вашего приложения, вы можете использовать шаблон заголовков. Например, внутри вашего файла layout.js вы можете создать шаблон по умолчанию, указав объект со значением "default" для ключа title. Этот шаблон будет использоваться для всех страниц, если они сами не переопределят значение заголовка.

Добавление описания страницы

Еще одним важным тегом метаданных является description, где вы можете указать краткое описание страницы. Это описание отображается в результатах поиска Google и на самой странице. Если вы хотите иметь уникальное описание для каждой страницы, вы должны добавить значение description в объект metadata каждой страницы.

Использование ключевых слов

Ключевые слова (keywords) в метаданных помогают поисковым системам лучше понять о чем ваш сайт. Вы можете указать различные ключевые слова, разделенные запятыми. Например:

export const metadata = {
  keywords: 'Next.js, JavaScript, разработка веб-приложений',
}

Настройка метаданных для социальных сетей

Next.js предоставляет возможность указать метаданные для различных социальных сетей, таких как Twitter и Facebook, чтобы они могли правильно отображать вашу страницу при ее распространении. Вы можете добавить соответствующие ключи и значения в объект metadata.

Работа с иконками

Если вам необходимо указать иконки для вашего сайта, вы можете использовать ключ icons в объекте metadata. Здесь вы можете указать пути к файлам различных иконок, таких как favicon и apple-touch-icon.

Другие возможности метаданных

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

Заключение

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