Implémenter et vérifier les images OG dans une application Next.js

Choisissez délibérément metadata basé sur un fichier ou un code

• Next.js metadata et images OG — Présentation officielle du App Router
• API generateMetadata — Référence dynamique officielle metadata
• Convention opengraph-image — Dossier officiel et référence ImageResponse

Statique metadata avec metadataBase

metadataBase résout les URL relatives de metadata ; une URL absolue publique telle que https://starterpackai.com/og/home.png facilite la vérification hors de l’application.

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 prenant en compte l'itinéraire dans Next.js 16

Dans l’App Router de Next.js 16, params est une Promise : exécutez await params avant de charger les données de la route et de renvoyer 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] },
  }
}

Dynamique opengraph-image avec ImageResponse

Dans le fichier serveur opengraph-image.tsx, exécutez await params puis renvoyez une ImageResponse aux dimensions explicites.

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

Liste de contrôle de vérification du déploiement

• ✓Confirmez que metadata ou generateMetadata s'exécute dans un segment de routage de composant serveur.
• ✓Ouvrez le HTML déployé et vérifiez les valeurs finales og:title, og:description et og:image.
• ✓Ouvrez l'image publique absolue URL dans une session distincte et vérifiez une réponse d'image réussie.
• ✓Vérifiez la composition 1200×630 rendue avec une petite taille de carte de lien.
• ✓Exécutez un vérificateur public metadata, puis utilisez des débogueurs spécifiques à la plate-forme lorsque les caches ne sont pas d'accord.