L’essentiel en bref
- La taille d’image Open Graph qui fonctionne sur presque toutes les plateformes est 1200×630 pixels, un rapport d’environ 1,91 pour 1.
- Les plateformes lisent la balise og:image dans le HTML de votre page quand un lien est partagé, puis mettent l’image en cache : les changements peuvent donc n’apparaître qu’après actualisation de l’aperçu.
- L’adresse og:image doit être une URL https complète qui se charge sans connexion, et les balises doivent figurer dans le HTML envoyé par le serveur, pas être ajoutées plus tard par JavaScript.
- Les aperçus de lien s’affichent souvent en petit : une image OG demande donc un titre court en grands caractères, centré, avec de généreuses marges.
- Certaines messageries recadrent les aperçus en carré : les mots les plus importants doivent donc se trouver au milieu de l’image.
Sur cette page
La taille d’image OG qui fonctionne presque partout est 1200×630 pixels, un format paysage d’environ 1,91 pour 1. Facebook, LinkedIn, X, Slack, Discord et la plupart des messageries construisent leurs aperçus de lien à partir de cette seule image, déclarée dans la balise og:image de votre page. LinkedIn indique 1200×627 pour son image de lien, assez proche pour qu’un seul fichier 1200×630 serve aux deux.
Open Graph 1200×630
1200 × 630
Image de lien LinkedIn 1200×627
1200 × 627
Carré central 630×630
630 × 630
Ce qu’est une image Open Graph, et comment les aperçus sont récupérés
Open Graph est un ensemble de balises meta dans le head d’une page web. Quand quelqu’un colle votre lien dans un post ou un chat, la plateforme envoie un robot sur la page, lit ces balises, télécharge l’image et dessine la carte d’aperçu. Elle ne le fait qu’une fois, puis met le résultat en cache, parfois pendant des jours.
Trois détails piègent la plupart des gens. L’adresse de l’image doit être une URL complète, commençant par https://, pas un chemin relatif. Elle doit se charger pour tout le monde, sans connexion ni bandeau de cookies en travers. Et les balises doivent être dans le HTML envoyé par votre serveur : la plupart des robots n’exécutent pas JavaScript, donc les balises ajoutées par un script après le chargement de la page ne sont jamais vues.
<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />twitter:card réglé sur summary_large_image demande le grand aperçu.Concevoir une image OG lisible en miniature
Une image 1200×630 est rarement vue à 1200 pixels. Dans un fil sur téléphone, elle se réduit à une bande de la largeur de l’écran, et dans un chat elle peut être encore plus petite. Concevez pour la petite version : un titre court, de grands caractères, un fort contraste, et rien d’important dans les coins.
- Trois à sept mots. Le titre de la page réduit à l’essentiel, pas le titre complet.
- De grands caractères. Sur le canevas 1200×630, un titre d’environ 64 à 96 pixels de haut reste lisible quand l’aperçu rétrécit.
- Des marges d’environ 60 pixels ou plus, pour que rien ne touche un bord qu’une plateforme pourrait arrondir ou recadrer.
- Une petite signature de marque, comme un logotype ou le nom de votre site, au même endroit sur chaque image.
- Un arrière-plan constant, pour que les gens reconnaissent vos liens avant de les lire.
Un aperçu de lien conçu pour la petite version : une ligne courte, grande et centrée, avec une petite signature au-dessus.
À éviter
- Le titre complet de la page en petits caractères
- Une capture d’écran de la page elle-même
- Des mots dans les coins, que les recadrages carrés coupent
- Du texte sur une photo chargée sans zone calme
À faire
- Un titre raccourci qu’on lit d’un coup d’œil
- Une carte conçue avec une seule idée
- Les mots clés dans le carré central
- Un arrière-plan calme, très contrasté derrière le texte
Le contraste compte plus, pas moins, aux petites tailles. Vérifiez que votre titre respecte les rapports du contraste des couleurs, et si l’arrière-plan est un dégradé, testez le contraste là où les mots se trouvent vraiment. Du texte sur un dégradé montre comment trouver la zone calme.
Une image OG pour tout le site, ou une par page
Chaque site a besoin d’une image par défaut pour les pages qui n’ont rien de mieux. Mais une image par défaut sur chaque page rend chaque lien partagé identique, et personne ne peut deviner d’après l’aperçu de quelle page il s’agit. Les pages les plus partagées méritent la leur.
| Type de page | Ce que l’image doit dire | Comment la faire |
|---|---|---|
| Page d’accueil | Votre nom et une promesse en une ligne | Conçue une fois, à la main |
| Article ou guide | Le titre court de l’article | Générée à partir du titre |
| Page produit | Le nom du produit, avec le produit montré | Générée, avec l’image du produit |
| Page d’événement | Le nom et la date de l’événement | Conçue avec le style de l’événement |
| Tout le reste | Votre nom et votre arrière-plan signature | La valeur par défaut du site |
Faire à la main une image distincte pour chaque article ne passe pas à l’échelle. La plupart des frameworks modernes savent produire une image OG à partir d’un modèle à la construction de la page ou à sa première requête ; les images OG dynamiques détaillent l’approche.
Comment tester vos aperçus de lien
- 1
Vérifiez les balises
Ouvrez la page, affichez son code source et cherchez
og:image. Si elle n’est pas dans le source, les robots ne la verront pas. - 2
Ouvrez l’adresse de l’image
Collez l’URL
og:imagedans une fenêtre de navigation privée. Elle doit se charger directement, en https, sans connexion. - 3
Utilisez l’inspecteur de la plateforme
Le LinkedIn Post Inspector montre comment LinkedIn voit une URL et actualise son cache. Facebook a un outil similaire, le Sharing Debugger.
- 4
Envoyez-le vous-même
Collez le lien dans une messagerie et dans un brouillon de post. Regardez l’aperçu sur un téléphone, où il est le plus petit.
- 5
Videz le cache après un changement
Si une ancienne image continue d’apparaître, donnez à la nouvelle une nouvelle adresse, par exemple en ajoutant
?v=2à son URL, puis inspectez de nouveau.
Format et poids du fichier
Utilisez le PNG pour les cartes conçues avec du texte et des aplats, et le JPEG pour les images photographiques. Évitez le SVG, que la plupart des robots n’acceptent pas pour les aperçus, et soyez prudent avec les formats récents que certaines plateformes ne lisent peut-être pas. Gardez le fichier léger pour que le robot le récupère vite ; une carte conçue a rarement besoin d’être lourde. Une pointe de grain évite qu’un dégradé forme des bandes quand une plateforme le recompresse.
Dans Gradiently, Aperçu de lien (Open Graph) 1200×630 est l’une des tailles intégrées : vous pouvez donc recomposer un post en aperçu avec copier vers les tailles et garder un seul style entre le post et le lien. Pour un lancement, l’image OG n’est qu’un point d’une liste plus longue ; les visuels du jour de lancement donnent la liste de contrôle complète.
Les questions qu’on nous pose
Quelle est la meilleure taille d’image OG ?
1200×630 pixels, un rapport d’environ 1,91 pour 1. Elle convient à Facebook, LinkedIn, X, Slack et à la plupart des messageries.
Pourquoi mon aperçu de lien affiche-t-il une ancienne image ?
Les plateformes mettent les aperçus en cache. Actualisez la page dans l’inspecteur de la plateforme, comme LinkedIn Post Inspector, ou donnez à la nouvelle image une nouvelle URL pour qu’elle soit récupérée de nouveau.
Pourquoi mon image OG ne s’affiche-t-elle pas du tout ?
En général, l’URL og:image est relative, bloquée par une connexion, ou ajoutée par JavaScript après le chargement de la page. Utilisez une URL https complète dans le HTML rendu par le serveur.
X utilise-t-il les images Open Graph ?
Oui. X se rabat sur les balises Open Graph quand les siennes manquent. Ajoutez une balise twitter:card réglée sur summary_large_image pour obtenir le grand aperçu.
Chaque page doit-elle avoir sa propre image OG ?
Les pages souvent partagées, comme les articles, les produits et les événements, gagnent à avoir la leur. Tout le reste peut utiliser une valeur par défaut soignée pour tout le 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
