Générer une image OG dynamique pour chaque page dans Next.js
Une seule route peut générer une image sociale à vos couleurs par page, à partir de son titre et de ses métadonnées — sans outil de design, sans export manuel. Voici le pattern.
Concevoir une image de partage distincte pour chaque page ne passe pas à l'échelle. Le meilleur pattern, c'est une seule route dynamique qui dessine à la demande une carte à vos couleurs à partir du titre et des métadonnées propres à chaque page.
La route opengraph-image
Next.js lit un fichier opengraph-image dans un segment de route et sert ce qu'il renvoie comme og:image de cette route. Rendue avec next/og, ce n'est que du JSX dessiné dans une image.
import { ImageResponse } from "next/og";
export default function Image() {
return new ImageResponse(
<div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
{ width: 1200, height: 630 },
);
}Faites-la varier selon la page
- Récupérez le titre depuis les params de la route ou votre couche de données.
- Habillez la carte avec la couleur d'accent de votre marque pour que l'ensemble reste cohérent.
- Restez sous les limites de taille des plateformes pour qu'elle se charge toujours.
La compétence Image OG échafaude cette route aux couleurs de votre site et câble openGraph.images sur toutes vos pages, de sorte qu'aucune route ne partage le même aperçu.