Quand vous collez un lien dans un message, un tweet, une publication LinkedIn ou un canal Slack, la plateforme génère une carte d'aperçu : une grande image, un titre, un extrait. Cette image, c'est l'image Open Graph (OG), et elle travaille plus dur que votre titre. Dans un fil qui défile vite, c'est l'image qui arrête le pouce. Un aperçu vide ou cassé donne une impression de négligence et se fait dépasser.
Voici comment en créer une qui mérite le clic, au bon format, avec un texte réellement lisible.
Le format : 1200×630
L'image OG standard fait 1200×630 pixels, un ratio de 1,91:1. Facebook, LinkedIn, Slack, Discord et la plupart des systèmes d'aperçu de lien sont construits autour de ce format. Réussissez celui-ci et vous êtes couvert presque partout.
Quelques formats voisins reviennent selon l'endroit où le lien atterrit :
| Plateforme / usage | Format | Ratio |
|---|---|---|
| Open Graph (par défaut) | 1200×630 | 1,91:1 |
| Grande carte Twitter/X | 1200×628 | ~1,91:1 |
| Miniature YouTube | 1280×720 | 16:9 |
| Carré (fils / IG) | 1080×1080 | 1:1 |
| Story / vertical | 1080×1920 | 9:16 |
Vous n'avez pas besoin de tous ces formats pour un article de blog : le 1200×630 est le cheval de bataille. Mais si vous créez aussi une miniature vidéo ou une publication carrée, mieux vaut générer la bonne forme plutôt que de recadrer maladroitement une image pour l'adapter.
Règles typographiques : lisible en taille miniature
L'erreur qui tue une image OG, c'est de la traiter comme une affiche qu'on regardera en plein écran. Ce ne sera pas le cas. La plupart des gens voient la carte à peut-être un tiers de sa taille réelle, sur un téléphone, en plein défilement. Concevez pour ça.
- Grand texte, peu de mots. Un titre court — cinq à huit mots — qui reste lisible une fois la carte réduite. Si vous devez plisser les yeux à taille réelle, c'est illisible dans le fil.
- Contraste fort. Texte clair sur fond sombre ou saturé, ou l'inverse. Un texte posé sur une photo chargée sans fond disparaît.
- Gardez l'essentiel centré. Chaque plateforme recadre légèrement les bords différemment. Éloignez texte et logos des marges extérieures pour que rien ne soit coupé.
- Une seule idée par image. L'image OG est un hameçon, pas un résumé. Un titre, éventuellement un sous-titre, terminé.
Des fonds qui font ressortir le texte
Un dégradé uni est le choix sûr. Il offre au texte un support propre, a un rendu moderne et ne se bat jamais avec les mots comme le fait une photo chargée. Un dégradé du sombre au un peu plus sombre avec du texte clair est quasiment infaillible.
L'outil Image OG est justement bâti autour de cette idée : choisissez un préréglage de format (OG 1200×630, Twitter, YouTube, carré ou story), sélectionnez un fond en dégradé, ajoutez votre titre et votre sous-titre. Vous obtenez une carte de partage lisible à toutes les tailles, sans ouvrir une application de design complète.
Le HTML qui la fait apparaître
Créer l'image ne fait que la moitié du travail. La plateforme doit savoir où la trouver. Ajoutez ces balises dans le <head> de votre page :
<meta property="og:image" content="https://votresite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Votre titre">
<meta property="og:description" content="Une phrase claire.">
<meta name="twitter:card" content="summary_large_image">
La ligne twitter:card réglée sur summary_large_image est ce qui vous donne la grande carte sur X plutôt qu'une minuscule vignette. Les URL absolues (avec https://) comptent : les chemins relatifs échouent souvent à se résoudre quand un robot récupère votre page.
Après le déploiement, testez. Collez votre URL dans un débogueur d'aperçu de lien (le Sharing Debugger de Facebook, le Post Inspector de LinkedIn) pour confirmer que l'image se charge et purger toute ancienne version en cache. Les plateformes mettent les aperçus en cache de façon agressive : si vous avez mis l'image à jour et voyez toujours l'ancienne, le bouton « re-scan » du débogueur est la solution.
Créez-la, ne la téléversez pas
Tout se passe dans votre navigateur : l'image est composée localement avec Canvas et n'est jamais téléversée sur un serveur. C'est gratuit, sans inscription, sans filigrane tamponné en travers de votre carte de partage, et ça fonctionne hors ligne après la première visite. Générez le 1200×630, câblez les balises meta, faites-le passer une fois dans un débogueur, et vos liens commencent à porter leur poids.