L’essentiel en bref
- 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.
Sur cette page
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.
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.
Un seul modèle, rempli avec le titre d’un article…
…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é 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.
// 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(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
padding: 72,
backgroundImage: 'linear-gradient(135deg, #120a2e 0%, #4c1d95 55%, #db2777 100%)',
color: '#ffffff',
fontFamily: 'Inter',
}}
>
<div style={{ fontSize: 28, opacity: 0.8 }}>Field Guide</div>
<div style={{ fontSize: article.title.length > 40 ? 60 : 76, lineHeight: 1.1 }}>
{article.title}
</div>
</div>
),
{ ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] },
)
}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.
<meta property="og:title" content="How to fix gradient banding" />
<meta property="og:description" content="Why gradients show stripes, and four fixes that work." />
<meta property="og:image" content="https://example.com/guide/gradient-banding/opengraph-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words How to fix gradient banding on a violet gradient" />
<meta name="twitter:card" content="summary_large_image" />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
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 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, et l’ensemble des formats est dans les tailles d’images des réseaux sociaux. 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.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
