Полное руководство по метатегам Next.js 15 — от og:image до hreflang

Краткое содержание

• Next.js 15 позволяет декларативно управлять статическими и динамическими метатегами через Metadata API на основе App Router.
• С помощью функции generateMetadata() можно автоматически создавать динамические og:image, title и description для каждой страницы.
• Можно управлять Twitter Card, hreflang, каноническим URL и структурированными данными (JSON-LD) в одном файле.
• Неправильно настроенные метатеги могут привести к ошибкам в социальных превью и снижению позиций в поисковой выдаче, поэтому обязательно проверьте их с помощью инструмента проверки метатегов перед развертыванием.

Что такое Metadata API в Next.js 15?

App Router, введенный в Next.js 13, предоставляет Metadata API, который заменяет старый способ с использованием компонента . В Next.js 15 этот API стал более продвинутым, и теперь метатеги можно управлять двумя способами: экспортируя объект metadata из файлов layout.tsx и page.tsx или используя функцию generateMetadata().

Статические метаданные

Самый простой способ — это экспортировать объект metadata напрямую.

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Руководство по метатегам Next.js 15',
  description: 'Все о метатегах Next.js, от og:image до hreflang',
}

Этот способ подходит для статических страниц, где содержимое фиксируется на этапе сборки. Используется для страниц, таких как главная блога или страница о нас, где содержание не меняется часто.

Динамические метаданные: generateMetadata()

Для страниц блога или страниц с деталями товаров, где содержимое меняется в зависимости от параметров URL, используется функция generateMetadata().

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const post = await fetchPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
    },
  }
}

Функция generateMetadata() выполняется на сервере, что позволяет выполнять запросы к базе данных или внешним API. Возвращаемое значение имеет тип Metadata, и Next.js автоматически вставляет его в тег .

Как правильно настроить og:image?

Изображение Open Graph — это превью-изображение, которое отображается при обмене ссылками в социальных платформах, таких как KakaoTalk, Slack и Twitter. Неправильная настройка может привести к отображению пустого изображения или сломанного макета, что значительно снижает кликабельность.

Основная настройка og:image

export const metadata: Metadata = {
  openGraph: {
    title: 'Название страницы',
    description: 'Описание страницы',
    url: 'https://example.com/blog/my-post',
    siteName: 'Название сайта',
    images: [
      {
        url: 'https://example.com/og/my-post.png',
        width: 1200,
        height: 630,
        alt: 'Представительное изображение поста',
      },
    ],
    locale: 'ko_KR',
    type: 'article',
  },
}

Динамическое создание og:image в Next.js — ImageResponse

Next.js 15 поддерживает возможность динамического рендеринга OG изображений на сервере с использованием ImageResponse из next/og. Можно управлять дизайном с помощью кода без необходимости редактирования изображений.

// app/og/route.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Основное название'

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 60,
          background: '#0f172a',
          color: 'white',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '40px',
        }}
      >
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

Затем просто ссылайтесь на этот конечный пункт в generateMetadata().

images: [{ url: `https://example.com/og?title=${encodeURIComponent(post.title)}` }]

Настройка Twitter Card

Twitter (ныне X) использует собственные метатеговые стандарты, но API метаданных Next.js объединяет их под ключом twitter.

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Название страницы',
    description: 'Описание страницы',
    creator: '@handle',
    images: ['https://example.com/og/my-post.png'],
  },
}

Значение card можно выбрать из summary, summary_large_image, app, player. Для постов в блоге наиболее подходит summary_large_image.

Как завершить многоязычный SEO с помощью hreflang

Тег hreflang является сигналом для поисковых систем о языковых и региональных версиях одного и того же контента. Если ваш сайт работает на корейском и английском языках, обязательно настройте его. Если настройка пропущена, Google может считать языковые страницы дублирующимся контентом, что приведет к снижению видимости в поиске.

Настройка hreflang с помощью alternates

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/ko/blog/my-post',
    languages: {
      'ko-KR': 'https://example.com/ko/blog/my-post',
      'en-US': 'https://example.com/en/blog/my-post',
      'ja-JP': 'https://example.com/ja/blog/my-post',
    },
  },
}

Next.js автоматически создаст теги на основе этой настройки.

<link rel="canonical" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="ko-KR" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en/blog/my-post" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/blog/my-post" />

Важность настройки канонического URL

Канонический URL — это тег, который сообщает поисковым системам, что "этот URL является оригиналом", когда один и тот же или схожий контент существует по нескольким URL. Если возникают дублирующиеся URL из-за пагинации, UTM-параметров или различий в www, отсутствие настройки канонического URL может привести к рассеиванию поисковых оценок.

alternates: {
  canonical: 'https://example.com/blog/my-post',
}

Используйте абсолютные пути и поддерживайте согласованность в отношении HTTPS и наличия www по всему сайту.

Получение богатых результатов с помощью структурированных данных (JSON-LD)

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