Implementieren und überprüfen Sie OG-Bilder in einer Next.js-App

Wählen Sie bewusst dateibasiert oder codebasiert metadata

• Next.js metadata und OG-Bilder — Offizielle App Router-Übersicht
• generateMetadata-API — Offizielle dynamische metadata-Referenz
• opengraph-image-Konvention — Offizielle Datei und ImageResponse-Referenz

Statisch metadata mit metadataBase

metadataBase löst relative metadata-URLs auf; eine absolute öffentliche Bild-URL wie https://starterpackai.com/og/home.png lässt sich außerhalb der Anwendung leicht prüfen.

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'],
  },
}

Routenbewusst generateMetadata in Next.js 16

Im Next.js 16 App Router ist params ein Promise: Führen Sie await params aus, bevor Sie Routendaten laden und generateMetadata zurückgeben.

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] },
  }
}

Dynamisches opengraph-image mit ImageResponse

Führen Sie in der serverseitigen opengraph-image.tsx await params aus und geben Sie eine ImageResponse mit festen Abmessungen zurück.

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
  )
}

Checkliste zur Bereitstellungsüberprüfung

• ✓Bestätigen Sie, dass metadata oder generateMetadata in einem Serverkomponenten-Routensegment ausgeführt wird.
• ✓Öffnen Sie das bereitgestellte HTML und überprüfen Sie die endgültigen Werte für og:title, og:description und og:image.
• ✓Öffnen Sie die absolute öffentliche Bild-URL in einer separaten Sitzung und prüfen Sie, ob die Bilddatei erfolgreich geladen wird.
• ✓Überprüfen Sie die gerenderte 1200×630-Komposition in kleiner Linkkartengröße.
• ✓Führen Sie einen öffentlichen metadata-Prüfer aus und verwenden Sie dann plattformspezifische Debugger, wenn die Caches nicht übereinstimmen.