‌
10 - metadata and generateMetadata

Для доступа к видео войдите в систему

10 - metadata and generateMetadata

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

metadata and generateMetadata

Автор конспекта: Стогниева Виктория

📚 Введение

В современной веб-разработке метаданные, в частности title и description, играют критически важную роль. Это не просто технические детали, а фундаментальные элементы, напрямую влияющие на поисковую оптимизацию (SEO) и пользовательский опыт.

📌 Ключевые элементы:

  • 🎯 Title (Заголовок): Выполняет двойную функцию:

  • Для пользователей: название страницы на вкладке браузера

  • Для поисковых систем: ключевой элемент для индексации и определения релевантности

  • 📝 Description (Описание): Краткое описание содержимого страницы:

  • Используется поисковыми системами для формирования сниппета

  • Повышает CTR (кликабельность) в результатах поиска

1. 📄 Статическая генерация метаданных

💡 Реализация через экспорт объекта metadata

page.tsx
import { Metadata } from 'next';
import styles from '../page.module.css';
 
export const metadata: Metadata = {
  title: "Books page",
  description: "Generated by create next app books page",
};
 
export default async function Home() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const todoList = await response.json();
 
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        Books
        <div>List</div>
        <div>{todoList?.title}</div>
      </main>
    </div>
  );
}

🔍 Проверка результата

После добавления кода убедиться в его корректной работе можно двумя основными способами:

1. 👁️ Визуальная проверка через заголовок вкладки

Title из объекта metadata отображается как название вкладки браузера.

  • Измените значение в коде (например, на Books Page 333)
  • Обновите страницу (Ctrl+R / Cmd+R)
  • Изменение немедленно отразится в браузере
⚡
Это самый быстрый способ визуальной проверки!

2. 🛠️ Проверка через инструменты разработчика

Чтобы найти мета-тег description:

  1. Откройте инструменты разработчика (F12 или Ctrl+Shift+I / Cmd+Option+I)
  2. Перейдите на вкладку Elements (Элементы)
  3. Раскройте тег <head>
  4. Найдите тег <meta name="description">

description

📥 Принцип наследования

Если для какой-либо страницы метаданные не будут указаны явно, они будут унаследованы от ближайшего родительского layout.tsx.

📊 Как это работает на практике:

    • layout.tsx
    • page.tsx
      • layout.tsx
      • page.tsx
        • page.tsx

    • 🔗 Иерархия наследования:

    1. Сначала Next.js ищет метаданные в текущей странице (page.tsx)
    2. Если не находит → переходит к ближайшему layout.tsx
    3. Если и там нет → поднимается выше по иерархии
    ❗

    Важно для SEO: Хотя система наследования удобна, для эффективной SEO-оптимизации крайне важно определять уникальные и релевантные title и description для каждой отдельной страницы!

    ⚡ 2. Динамическая генерация метаданных

    🎯 Когда статический подход не работает?

    Статический подход неприменим для динамических маршрутов:

    • books/[id] - страница конкретной книги
    • blog/[slug] - отдельная статья блога
    • products/[category]/[productId] - карточка товара

    📈 Почему это критично? Для сайтов с большим объемом динамического контента:

    • 📚 Блоги и новостные порталы - каждая статья уникальна
    • 🏪 Интернет-магазины - у каждого товара своё название
    • 🎬 Медиа-платформы - каждый фильм/сериал имеет описание
    • 📱 Каталоги приложений - каждое приложение требует отдельного SEO
    💡

    Золотое правило: Заголовок и описание должны точно соответствовать содержимому страницы!

    🚀 Знакомство с generateMetadata

    Что это? Специальная асинхронная функция в Next.js, которая позволяет генерировать метаданные на основе динамических параметров маршрута и данных, полученных из внешних источников (например, API).

    📋3. Анализ сигнатуры и использования generateMetadata

    🎯 Что передается в функцию?

    Функция generateMetadata принимает те же входные параметры (props), что и компонент страницы:

    ПараметрТипОписание
    paramsobjectПараметры маршрута (например, { id: '123' })
    searchParamsobjectПараметры запроса из URL (например, ?page=1)
    💡

    Ключевое преимущество: Это позволяет получить доступ к уникальному идентификатору страницы прямо внутри функции!

    Пошаговый процесс генерации метаданных

    Логика внутри generateMetadata обычно следует четкому алгоритму:

    1. Получение ID

    Извлечение динамического параметра (например, id) из объекта params, который передается в функцию.

    2. Запрос данных

    Использование полученного id для выполнения асинхронного запроса к API с помощью fetch. Этот шаг позволяет получить данные, специфичные для текущей страницы (например, заголовок статьи, название товара или описание задачи).

    3. Формирование объекта metadata

    Использование данных, полученных на предыдущем шаге (например, todolist.title), для динамического конструирования значений title и description.

    4. Возврат результата

    Функция должна вернуть объект Metadata, обернутый в Promise, так как она является асинхронной. Его структура полностью идентична статическому объекту metadata.

    Пример реализации

    Ниже приведен полный пример реализации generateMetadata для динамического маршрута books/[id]. В качестве демонстрации мы будем использовать тестовый API jsonplaceholder для получения данных о задачах (todos), хотя наш маршрут для примера — /books/[id].

    page.tsx
    import type { Metadata } from "next"
import styles from "../page.module.css"
 
type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string }>
}
 
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const id = (await params).id
 
  const todoList = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then((res) =>
    res.json(),
  )
 
  return {
    title: todoList.title,
    description: `Generated by create next app ${todoList.title}`,
  }
}

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

    🔍 Верификация динамических метаданных

    Проверить корректность работы динамических метаданных очень просто 🧪

    Достаточно:

    • 🌐 открыть в браузере разные динамические URL,
    • 👀 обратить внимание на заголовок вкладки браузера,
    • 🛠️ заглянуть в инструменты разработчика и проверить содержимое мета-тегов.

    Вы увидите, что:

    • 🏷️ заголовок страницы будет уникальным для каждого URL,
    • 📝 описание страницы также будет отличаться и соответствовать загруженным данным.

    Это подтверждает, что метаданные формируются динамически и корректно.

    🚀 Возможности generateMetadata

    Функция генерации метаданных предоставляет мощный и элегантный инструмент для глубокой SEO-оптимизации 📈

    Она позволяет:

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

    📌 4. Ключевые выводы

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

    🌍 Важность SEO

    Корректная настройка заголовков и описаний — это фундамент поисковой оптимизации. Она напрямую влияет на:

    • 🔎 видимость сайта,
    • 📊 позиции в поисковой выдаче,
    • 👥 приток органического трафика.

    🧱 Статический подход

    Подходит для страниц с неизменным контентом:

    • ⚡ быстрый,
    • 🧩 декларативный,
    • 🛡️ простой в использовании.

    🔄 Динамический подход

    Используется для страниц, зависящих от параметров URL:

    • 🧠 позволяет запрашивать данные,
    • 🏷️ формирует мета-теги «на лету»,
    • 🎯 обеспечивает максимальную релевантность.

    🏆 Итог

    Освоение этих техник позволяет создавать современные веб-приложения, которые:

    • 🎨 отлично выглядят,
    • ⚙️ стабильно работают,
    • 📈 эффективно ранжируются в поисковых системах.

    Next.js Базовый Курс

    Видеоурок - 12 видео из 17