Внедрите и проверьте изображения OG в приложении Next.js.

Выбирайте metadata на основе файла или кода сознательно.

• Next.js metadata и изображения OG — Официальный обзор App Router
• generateMetadata API — Официальный динамический справочник metadata
• Соглашение opengraph-image — Официальный файл и ссылка ImageResponse

Статический metadata с metadataBase

metadataBase разрешает относительные URL в metadata; абсолютный общедоступный URL изображения, например https://starterpackai.com/og/home.png, проще проверить вне приложения.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://starterpackai.com'),
  title: 'A clear page title',
  description: 'A concise share description',
  openGraph: {
    images: ['https://starterpackai.com/og/home.png'],
  },
}

generateMetadata с учетом маршрута в Next.js 16

В Next.js 16 App Router params имеет тип Promise: выполните await params перед загрузкой данных маршрута и возвратом generateMetadata.

import type { Metadata } from 'next'

type Props = { params: Promise<{ slug: string }> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    openGraph: { images: [post.ogImageUrl] },
  }
}

Динамический opengraph-image с ImageResponse

В серверном opengraph-image.tsx выполните await params и верните ImageResponse с явно заданными размерами.

import { ImageResponse } from 'next/og'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return new ImageResponse(
    <div style={{ display: 'flex', padding: 80 }}>{slug}</div>,
    size
  )
}

Контрольный список проверки развертывания

• ✓Убедитесь, что metadata или generateMetadata работает в сегменте маршрута серверных компонентов.
• ✓Откройте развернутый HTML и проверьте окончательные значения og:title, og:description и og:image.
• ✓Откройте абсолютно общедоступное изображение URL в отдельном сеансе и проверьте успешный ответ изображения.
• ✓Проверьте визуализированную композицию 1200×630 при небольшом размере карты ссылок.
• ✓Запустите общедоступную программу проверки metadata, а затем используйте отладчики для конкретной платформы, если кэши не совпадают.