# Images OG dynamiques : des aperçus de lien automatiques [Canonical HTML page](https://gradiently.design/fr/guide/dynamic-og-images) Créer à la main une image d’aperçu pour chaque page ne passe pas à l’échelle, et une seule image générique pour tout le site gaspille l’image la plus vue que vous ayez. Générez-les plutôt. ## The short version - Une image OG dynamique est une image d’aperçu Open Graph générée automatiquement pour chaque page, en général à partir de son titre, de sa catégorie et d’un fond de marque constant. - La taille standard est de 1200 × 630 pixels, et la page doit pointer vers l’image par une URL absolue dans sa balise og:image. - Vous pouvez générer les images OG une fois à la compilation, ce qui coûte le moins, ou à la demande, ce qui convient aux pages dont les données changent, à condition que le résultat soit mis en cache. - Les plateformes mettent les aperçus en cache par URL : changer une image revient donc en général à changer son adresse ou à demander à la plateforme de relire la page. - Concevez le modèle comme une miniature : un titre court en grand corps, de généreuses marges et un fond qui reste reconnaissable en petit. Une **image OG dynamique** est une image d’aperçu de lien que votre site génère pour chaque page, au lieu qu’une personne la dessine à la main. Quand une page est partagée sur LinkedIn, dans Slack ou dans une appli de messagerie, la plateforme récupère l’image indiquée dans la balise `og:image` de la page. Si cette image est construite à partir du titre et des données de la page, chaque article, produit et profil obtient un aperçu qui dit exactement ce que c’est. Ce guide couvre la conception du modèle, les deux façons de générer les images, les balises qui les relient, la mise en cache et les tests. Pour la taille elle-même et la façon dont les plateformes recadrent, voyez notre guide de [la taille des images Open Graph](https://gradiently.design/fr/guide/open-graph-image-size). ## Pourquoi chaque page doit avoir sa propre image OG L’aperçu est souvent la première chose que l’on voit de votre page, et dans un fil chargé c’est presque tout ce que l’on en voit. Une seule carte-logo générique pour tout le site rend chaque lien partagé identique, si bien qu’aucun ne dit ce qu’il y a derrière. Une image par page porte le vrai titre de la page dans votre identité visuelle : reconnaissablement à vous, et assez précise pour mériter le clic. Une image d’aperçu de lien avec le texte Corriger le banding d’un dégradé sur un fond en dégradé Un seul modèle, rempli avec le titre d’un article… Le même modèle d’aperçu de lien avec le texte Choisir les couleurs de marque …et celui d’un autre. Assez constant pour être reconnu, assez précis pour être cliqué. ## Concevoir un modèle d’image OG Concevez le modèle comme une miniature, car c’est ainsi qu’il est le plus souvent vu. Les aperçus s’affichent à une fraction de leur taille réelle, et certaines applis montrent une version plus petite et recadrée. Les mots qui comptent doivent survivre aux deux. 1. **Partez de 1200 × 630** Concevez en pleine taille, puis vérifiez au quart de cette taille. Si vous ne pouvez pas lire le titre à 300 pixels de large, il est trop petit ou trop long. 2. **Utilisez le titre, pas toute la page** Une ligne de grand texte, deux au plus. Les titres longs demandent une règle : raccourcissez-les dans les données, ou réduisez la taille de police au-delà d’une longueur donnée. 3. **Gardez de larges marges** Tenez le titre et le logo loin des bords pour qu’un recadrage plus serré ne les coupe pas. Environ 60 à 80 pixels de marge à cette taille est un bon point de départ. 4. **Ajoutez un seul élément de contexte** Une petite étiquette pour la rubrique, l’auteur ou la date aide à situer le lien. Plus d’une ligne en plus transforme un aperçu en document. 5. **Faites porter la marque par le fond** Un dégradé ou une matière constants font plus pour la reconnaissance qu’un grand logo. Gardez sa partie la plus claire et la plus chargée loin des mots ; [le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) explique comment. ### Aperçu faible - La même carte-logo sur chaque page - Titre et description complets serrés en petit corps - Du texte qui touche les bords - Une photo chargée derrière des mots blancs ### Aperçu fort - Le titre propre à la page, en grand - Une courte étiquette de contexte - De larges marges qui survivent à un recadrage - Un fond de marque calme avec un contraste net ## Générer des images OG à la compilation ou à la demande Il y a deux moments pour créer l’image. **À la compilation**, votre site génère une image pour chaque page une seule fois et la sert comme fichier statique : rapide, peu coûteux et idéal pour les articles et la documentation. **À la demande**, une route dessine l’image la première fois qu’on la réclame : c’est adapté aux pages dont les données changent, comme le nombre d’abonnés d’un profil ou le prix d’un produit. Les images à la demande doivent être mises en cache, sinon chaque partage et chaque visite de robot refait le travail. | Approche | Idéale pour | À surveiller | | --- | --- | --- | | À la compilation | Articles, documentation, pages d’atterrissage | La durée de compilation croît avec le nombre de pages | | À la demande, en cache | Profils, produits, contenu d’utilisateurs | Définissez les en-têtes de cache ; les rendus à froid sont plus lents | | Faite à la main | Une poignée de pages clés | Ne passe pas à l’échelle et se périme | La plupart des frameworks savent dessiner une image à partir d’un balisage proche du HTML. Dans Next.js, un fichier `opengraph-image.tsx` à côté d’une route génère l’image de cette route avec `ImageResponse`, et Next ajoute les balises meta pour vous. La même idée fonctionne ailleurs avec un navigateur sans interface qui prend une capture d’une page modèle. ```ts // app/guide/[slug]/opengraph-image.tsx import { readFile } from 'node:fs/promises' import { join } from 'node:path' import { ImageResponse } from 'next/og' import { getArticle } from '@/lib/articles' 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 const article = await getArticle(slug) const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf')) return new ImageResponse( (
Field Guide
40 ? 60 : 76, lineHeight: 1.1 }}> {article.title}
), { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] }, ) } ``` Une image OG par article dans Next.js. Le titre réduit sa taille quand il est long, et la police est chargée comme fichier TTF. > **Les générateurs d’images ne parlent qu’une partie du CSS** Les bibliothèques qui transforment un balisage en image, comme celle derrière `ImageResponse`, prennent en charge flexbox et un sous-ensemble du CSS. Les mises en page en grille ne fonctionneront pas, et les polices doivent être en TTF, OTF ou WOFF, pas en WOFF2. Consultez la liste de votre framework avant de concevoir ce qu’il ne sait pas dessiner. ## Les balises Open Graph qui relient l’image Les plateformes trouvent l’image grâce aux balises meta du head de la page. L’adresse de l’image doit être absolue, avec `https://` et le domaine, car le robot la lit depuis l’extérieur de votre site. Déclarer la largeur et la hauteur aide certaines plateformes à composer l’aperçu avant d’avoir téléchargé l’image, et le texte alternatif la décrit aux personnes qui utilisent un lecteur d’écran. ```html ``` Les balises dont une page a besoin pour un grand aperçu. `twitter:card` demande à X la disposition avec grande image. - Open Graph 1200 × 630: 1200 × 630 - Lien LinkedIn 1200 × 627: 1200 × 627 - Post X 1600 × 900: 1600 × 900 Les aperçus de lien sont proches de 1,91:1. Une image de 1200 × 630 couvre les cas courants ; une image distincte pour la pièce jointe d’un post est un autre travail. ## Mettre en cache et tester les images OG Les plateformes mettent les aperçus en cache, parfois longtemps. Si vous changez une image en gardant son adresse, on risque de continuer à voir l’ancienne. Ajoutez une version à l’adresse, comme `?v=2`, quand le design change, ou demandez à la plateforme de relire la page. Pour les images à la demande, envoyez des en-têtes de cache pour que votre serveur et tout CDN gardent le résultat. - Collez la page dans le [Post Inspector](https://www.linkedin.com/post-inspector/) de LinkedIn pour voir l’aperçu et rafraîchir son cache. - Utilisez le Sharing Debugger de Meta pour Facebook, qui peut aussi relire une page. - Collez le lien dans un brouillon de post sur X, ou dans une conversation privée sur Slack ou WhatsApp, pour voir le vrai aperçu sans rien envoyer. - Ouvrez directement l’adresse de l’image dans un navigateur pour confirmer qu’elle renvoie un PNG, à la bonne taille, sans connexion. Traitez les images OG comme une partie de tout lancement : elles figurent dans notre checklist des [visuels du jour de lancement](https://gradiently.design/fr/guide/launch-day-graphics), et l’ensemble des formats est dans [les tailles d’images des réseaux sociaux](https://gradiently.design/fr/guide/social-media-image-sizes). Si vous concevez vos aperçus dans Gradiently, son API peut exporter un design enregistré en PNG exact de 1200 × 630, ce qui convient aux pipelines et aux agents IA qui font des images pour vous. ## FAQ ### Qu’est-ce qu’une image OG dynamique ? C’est une image d’aperçu de lien Open Graph générée automatiquement pour chaque page, en général à partir du titre et des données de la page sur un modèle de marque constant, plutôt que dessinée à la main. ### Quelle taille pour une image OG ? 1200 × 630 pixels est la norme. Gardez les mots importants loin des bords, car certaines applis montrent une version plus petite ou recadrée. ### Pourquoi l’ancien aperçu s’affiche-t-il encore après le changement de mon image OG ? Les plateformes mettent les aperçus en cache par URL. Changez l’adresse de l’image, par exemple avec un paramètre de version, ou utilisez l’inspecteur ou le débogueur de la plateforme pour relire la page. ### Faut-il générer les images OG à la compilation ou à la demande ? La compilation coûte le moins et convient aux pages qui changent peu. Générez à la demande pour les pages dont les données changent, et mettez le résultat en cache pour qu’il ne soit pas redessiné à chaque visite. ### og:image exige-t-il une URL absolue ? Oui. Utilisez l’adresse complète avec https et le domaine, car les robots lisent la balise depuis l’extérieur de votre site.