Урок 01

SEO в Next.js: Metadata API

Что такое Metadata API

Metadata API — встроенный способ задавать метатеги в Next.js App Router.

Что даёт:

Автоматический <head>.
Типизация метаданных.
Динамические метаданные.
Вложенность layouts.

Правило: Metadata API заменяет next/head из Pages Router.

Static Metadata

В layout.tsx или page.tsx:

import type { Metadata } from 'next';

export const metadata: Metadata = {
    title: 'Главная',
    description: 'Описание главной страницы',
};

export default function Page() {
    return <h1>Главная</h1>;
}

Что происходит: Next.js сам вставит в <head>.

Основные поля

export const metadata: Metadata = {
    title: 'Заголовок',
    description: 'Описание',
    keywords: ['laravel', 'react'],
    authors: [{ name: 'Иван Иванов' }],
    creator: 'SKILLS-DEV.RU',
    publisher: 'SKILLS-DEV.RU',
    robots: {
        index: true,
        follow: true,
    },
    alternates: {
        canonical: 'https://example.com/page',
    },
    openGraph: {
        title: 'Заголовок',
        description: 'Описание',
        url: 'https://example.com/page',
        siteName: 'SKILLS-DEV.RU',
        images: [{ url: 'https://example.com/preview.jpg', width: 1200, height: 630 }],
        locale: 'ru_RU',
        type: 'website',
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Заголовок',
        description: 'Описание',
        images: ['https://example.com/preview.jpg'],
    },
};

`title`

Простой:

export const metadata: Metadata = {
    title: 'О нас',
};

С шаблоном:

// app/layout.tsx
export const metadata: Metadata = {
    title: {
        default: 'SKILLS-DEV.RU',
        template: '%s | SKILLS-DEV.RU',
    },
};

В page.tsx:

export const metadata: Metadata = {
    title: 'О нас',
};

Что получится: <title>О нас | SKILLS-DEV.RU</title>.

Правило: шаблон в layout — дети добавляют имя.

`description`

export const metadata: Metadata = {
    description: '150-160 символов, осмысленное описание страницы с ключом',
};

Правило: уникальный для каждой.

`openGraph`

export const metadata: Metadata = {
    openGraph: {
        title: 'Заголовок',
        description: 'Описание',
        url: 'https://example.com/page',
        siteName: 'SKILLS-DEV.RU',
        images: [
            {
                url: 'https://example.com/og.jpg',
                width: 1200,
                height: 630,
                alt: 'Превью',
            },
        ],
        locale: 'ru_RU',
        type: 'website',
    },
};

Что даёт: превью в соцсетях.

`robots`

export const metadata: Metadata = {
    robots: {
        index: true,
        follow: true,
        nocache: false,
        googleBot: {
            index: true,
            follow: true,
            'max-image-preview': 'large',
            'max-snippet': -1,
        },
    },
};

Что даёт: управление индексацией.

`alternates`

Canonical:

export const metadata: Metadata = {
    alternates: {
        canonical: 'https://example.com/page',
    },
};

Мультиязычный:

export const metadata: Metadata = {
    alternates: {
        canonical: 'https://example.com/ru/page',
        languages: {
            'ru-RU': 'https://example.com/ru/page',
            'en-US': 'https://example.com/en/page',
        },
    },
};

Что даёт: правильный canonical + hreflang.

`icons`

export const metadata: Metadata = {
    icons: {
        icon: '/favicon.ico',
        shortcut: '/favicon-16x16.png',
        apple: '/apple-touch-icon.png',
    },
};

Верификация

export const metadata: Metadata = {
    verification: {
        google: 'abc123def456',
        yandex: 'xyz789',
    },
};

Что даёт: мета-теги для верификации.

Что важно

Рендеринг:

Server Components — метаданные работают.
Client Components — только через generateMetadata.

Наследование:

Layout задаёт базу.
Page дополняет.
Дочерние переопределяют.

Правило: не дублировать, а дополнять.

Проверка

Chrome DevTools:

Правый клик → «Просмотр кода».
Смотреть <head>.

Сервисы:

Facebook Sharing Debugger.
Twitter Card Validator.
Telegram Web Preview.
Rich Results Test.

Практика

1. Добавьте metadata в layout.**

2. Настройте шаблон title.

3. Добавьте description на главной.**

4. Настройте Open Graph.

5. Добавьте canonical.

6. Проверьте через «Просмотр кода».

7. Прогоните через Facebook Debugger.

Частые ошибки

1. Нет metadata:

Дефолтные значения

Решение: добавить.

2. next/head в App Router:

Не работает

Решение: Metadata API.

3. Одинаковые description:

Дубли

Решение: уникальные.

4. Client Component без generateMetadata:

Не работает

Решение: использовать generateMetadata.

5. OG image 400x400:

Обрезается

Решение: 1200×630.

6. Забыли canonical:

Дубли

Решение: добавить.

7. Дубли title через layout + page:

Склеивается

Решение: template.

8. Не проверять:

Ошибки незаметны

Решение: Debugger.

Итог

Metadata API — App Router.
metadata для статики.
generateMetadata для динамики.
Шаблон title в layout.
Open Graph — 1200×630.
Canonical — обязательно.
Robots — управление.
Verification — для GSC и Вебмастера.
Server Components — ок, Client — нет.
Проверка через Debugger.

Дальше — SEO в Next.js: generateMetadata.