Pendant la première année du blog SEOJuice, je n’ai pratiquement pas réfléchi aux images Open Graph. On publiait des articles, on les partageait sur LinkedIn et Twitter, puis on passait au suivant. Les aperçus me semblaient corrects — enfin, c’est ce que je croyais, parce que je n’avais jamais vraiment vérifié ce que les autres voyaient quand ils cliquaient sur « partager ».
Puis un client m’a envoyé une capture d’écran d’un de nos articles partagé dans le Slack de son entreprise. L’aperçu affichait notre logo en 50x50 pixels, étiré dans un rectangle gris. Le titre était tronqué. Ça avait l’air cassé. Cet article nous avait pris deux jours à écrire, et l’aperçu social lui donnait l’air d’un spam douteux.
J’ai passé un week-end à ajouter des images Open Graph personnalisées à nos 20 meilleurs articles. En moins d’un mois, le taux de clic depuis les réseaux sociaux sur ces articles est passé d’une moyenne de 1,8 % à 4,1 %. Cela représente une amélioration de 2,3x pour, honnêtement, environ 15 minutes de travail par article. (Je précise : ce sont nos propres données issues des analytics LinkedIn et Twitter, pas une étude contrôlée. Tes résultats varieront selon ton audience et la plateforme.)
Open Graph est un protocole créé par Facebook en 2010 qui te permet de contrôler la façon dont tes pages apparaissent quand elles sont partagées sur les réseaux sociaux. L’image Open Graph, c’est l’aperçu visuel — la grande image qui apparaît dans la carte de lien sur Facebook, Twitter/X, LinkedIn, Slack, WhatsApp, Discord, ou n’importe quelle plateforme qui prend en charge les aperçus de liens. Sans balises Open Graph, les plateformes devinent. Avec elles, c’est toi qui conçois la pub de ton contenu.
Toutes les plateformes lisent les balises Open Graph, mais elles ne les affichent pas de la même manière. Je l’ai appris à mes dépens quand un aperçu parfaitement correct sur Facebook s’est retrouvé recadré sur LinkedIn. Voici le tableau de référence que je garde en favori :
| Plateforme | Taille recommandée | Ratio | Format | Taille max du fichier | Notes |
|---|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 8 MB | N’affiche pas les images sous 200x200px. 600x315 minimum pour une grande carte. | |
| Twitter / X | 1200 x 675 px | 1.78:1 (16:9) | JPEG, PNG, GIF, WebP | 5 MB | N’affiche pas de grande carte pour les images sous 300x157px. Utilise twitter:image s’il est défini, sinon utilise og:image comme solution de repli. |
| 1200 x 627 px | 1.91:1 | JPEG, PNG | 5 MB | Minimum strict : 1200x627. En dessous, LinkedIn n’affiche tout simplement pas l’image. | |
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 300 KB recommandé | A du mal avec les images au-dessus de 300KB sur des connexions mobiles lentes. Vise moins de 200KB pour un affichage fiable. | |
| Slack | 1200 x 630 px | 1.91:1 | JPEG, PNG | 5 MB | Déplie automatiquement les aperçus de liens dans les canaux. |
| Discord | 1200 x 630 px | 1.91:1 | JPEG, PNG, GIF | 8 MB | Prend en charge les GIF animés dans les aperçus. |
| iMessage | 1200 x 630 px | 1.91:1 | JPEG, PNG | N/A | Utilise les balises Open Graph pour les aperçus de liens dans les bulles de discussion. |
Le ratio légèrement plus haut de Twitter (16:9 contre 1.91:1) signifie que ton image 1200x630 peut subir un tout petit recadrage. En pratique, je n’ai jamais vu de différence notable. Ne crée pas une image différente par plateforme, sauf si tu lances une grosse campagne où chaque pixel compte.
Un point que je veux vraiment signaler parce qu’il m’a fait perdre du temps : le minimum de LinkedIn est un minimum strict. Si ton image fait 1199 pixels de large, LinkedIn n’affiche rien. Pas une version réduite — rien du tout. J’ai grillé une demi-heure à déboguer ça avant de mesurer les dimensions réelles de l’image.
Les balises Open Graph se placent dans la section <head> de ton HTML. Voici l’ensemble complet dont tu as besoin pour chaque page :
<!-- Essential OG Tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary" />
<meta property="og:image" content="https://yoursite.com/images/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter-Specific (falls back to OG if not set) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary" />
<meta name="twitter:image" content="https://yoursite.com/images/og/page-name.jpg" />
Détails techniques importants, que j’ai ratés au moins une fois pour la plupart :
og:image. Les chemins relatifs cassent sur la plupart des plateformes. C’était de loin mon erreur la plus fréquente quand on a mis ça en place au début.og:image:width et og:image:height aident les plateformes à afficher l’aperçu plus vite sans devoir télécharger l’image complète d’abord.twitter:card sur summary_large_image pour obtenir une carte avec image en pleine largeur. Sans ça, Twitter affiche à la place une minuscule miniature carrée. J’avais raté ce point lors de notre première implémentation et je ne comprenais pas pourquoi les aperçus Twitter étaient si petits.WordPress : Des plugins comme Yoast SEO, RankMath et SEOPress ajoutent des champs de balises Open Graph dans l’éditeur de chaque article et page. Tu téléverses l’image, tu renseignes le titre et la description, et le plugin génère les métadonnées. C’est la voie la plus simple si tu es sur WordPress.
Next.js / React : Utilise le composant next/head ou la Metadata API (App Router) pour définir les balises Open Graph page par page. Si tu construis avec l’App Router, l’export metadata rend ça assez direct.
Sites statiques : Ajoute les meta tags directement dans ton template HTML. La plupart des générateurs de sites statiques (Hugo, Eleventy, Jekyll) prennent en charge des variables de front matter qui remplissent automatiquement les balises Open Graph.
Une image Open Graph techniquement correcte mais visuellement ratée, c’est pire que pas d’image du tout. J’ai probablement itéré cinq fois sur notre template d’image Open Graph, et voilà ce que j’ai appris :
Chaque plateforme recadre un peu différemment. Garde tout le contenu important — texte, logos, visuels clés — dans les 80% centraux de l’image. Ça veut dire au moins 120px d’espace de respiration depuis chaque bord sur un canvas de 1200x630. Je l’ai appris après que LinkedIn a coupé la première lettre d’un titre sur une de nos images Open Graph.
Si ton image Open Graph contient du texte (et en général, elle devrait — le titre de l’article ou de la page), fais-le grand. Au moins 48px sur un canvas de 1200px de large. Ces images sont souvent affichées à 300px de large dans les feeds mobiles. Si tu n’arrives pas à lire le texte quand l’image fait 300px de large, c’est qu’il est trop petit. Mon test, c’est de dézoomer dans Figma à environ 25% — si je peux encore lire le titre, ça passera.
Utilise tes couleurs de marque, tes polices et un placement de logo cohérent. Quand quelqu’un voit ton image Open Graph dans un feed, il doit pouvoir reconnaître ta marque avant même de lire le texte. On a créé un template Canva avec nos couleurs et notre placement de logo, puis on le réutilise pour chaque article. Maintenant, ça prend environ 5 minutes par image.
Ce qui ne marche pas : les photos de stock génériques, ton logo seul sur fond blanc, ou une image qui n’a rien à voir avec le contenu. J’ai testé les trois. Les gens passent dessus à chaque fois.
Je vérifie les balises Open Graph dans chaque audit de site qu’on lance via SEOJuice. Les mêmes problèmes reviennent encore et encore :
og:image explicite, les plateformes détectent automatiquement une image sur ta page. Le résultat, c’est souvent ton logo en 100x100 pixels ou une image aléatoire de sidebar. Vérifie tes pages avec notre outil d’audit SEO — il signale les balises Open Graph manquantes.http://, elle ne s’affichera pas.Teste toujours tes balises Open Graph avant et après les modifications. Je fais passer chaque article dans au moins deux de ces outils avant publication :
| Outil | Plateforme | URL | Notes |
|---|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
Vide aussi le cache Open Graph de Facebook. Clique sur « Scrape Again » après avoir mis à jour les balises. | |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
Prévisualise le rendu de ta carte. Vide aussi le cache de Twitter. |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
Permet de vérifier et vider le cache Open Graph de LinkedIn. | |
| OpenGraph.xyz | Multi-plateforme | opengraph.xyz |
Prévisualise plusieurs plateformes à la fois. Génère aussi des images Open Graph. |
| SEOJuice Screenshot Generator | Création | /tools/screenshot-generator/ | Génère automatiquement des images Open Graph aux couleurs de ta marque à partir de tes pages. |
yoursite.com/page/?v=2. Supprime-le une fois le cache mis à jour.
Je veux être précis ici, parce que c’est souvent exagéré : les images Open Graph n’ont pas d’impact direct sur les classements Google. Google n’utilise pas ta balise og:image comme signal de classement. Point final.
Mais les effets indirects sont bien réels, et je les ai observés de première main sur notre propre contenu :
<img> standard sur ta page, avoir une image Open Graph de haute qualité en solution de secours ne fait pas de mal.Les données de CTR dans l’industrie sont parlantes : les pages avec des images d’aperçu social optimisées enregistrent jusqu’à 70 % de taux de clic en plus depuis les plateformes sociales par rapport aux pages sans image ou avec des miniatures générées automatiquement. Même les estimations prudentes placent le gain à 20 %+ pour les pages qui passent de zéro image Open Graph à une image bien conçue. Nos propres chiffres se situent à peu près au milieu de cette fourchette.
Non. Une image en 1200x630 fonctionne sur les deux. Twitter préfère techniquement 1200x675, mais la différence de 45 pixels est invisible en pratique. Ne crée des images spécifiques par plateforme que si tu gères des campagnes social payantes où chaque détail compte.
JPEG pour les photos et les images complexes (taille de fichier plus légère). PNG pour les visuels avec texte, logos ou transparence (bords plus nets). Pour la plupart des images Open Graph qui combinent du texte sur un fond, un JPEG à 80-85 % de qualité offre le meilleur ratio poids/qualité. C’est ce qu’on utilise pour toutes les nôtres.
Twitter prend en charge WebP. Facebook et LinkedIn, pas de manière fiable. Reste sur JPEG ou PNG pour une compatibilité maximale. Le jour où toutes les plateformes prendront WebP en charge de façon fiable, bascule — mais en mars 2026, on n’y est pas encore.
Seulement quand le contenu change de manière significative. Si tu mets à jour un article et ajoutes « Guide 2026 » dans le titre, mets aussi l’image Open Graph à jour pour qu’elle corresponde. Ne mets pas à jour tes images Open Graph juste pour le principe — tu devras vider les caches sur toutes les plateformes, et ça ne vaut pas l’effort tant que le contenu n’a pas réellement changé.
Vérifie dans cet ordre : (1) l’URL est-elle absolue et en HTTPS ? (2) l’image est-elle réellement accessible à cette URL ? (3) respecte-t-elle les tailles minimales requises ? (4) le cache de la plateforme est-il obsolète ? Utilise les outils de debug ci-dessus pour diagnostiquer. D’après mon expérience, la cause la plus fréquente reste une URL relative au lieu d’une URL absolue.
Oui, pour les pages de contenu (articles de blog, articles, guides). Le titre superposé sur un fond aux couleurs de la marque est le format d’image Open Graph le plus efficace. Pour les pages produit, une capture d’écran propre du produit avec ton logo fonctionne mieux. La seule exception : n’ajoute pas de texte sur des images où le titre apparaît déjà dans la carte de lien — certaines plateformes affichent les deux, et le rendu paraît redondant.
no credit card required
No related articles found.