Open Graph : optimiser l'aperçu de vos pages sur les réseaux sociaux

Vous publiez un lien sur LinkedIn, et l'aperçu affiche une vieille image, un titre tronqué ou pire, rien du tout. Ça arrive tout le temps. La cause est presque toujours la même : les balises Open Graph sont absentes, incomplètes ou mal configurées. En clair : vous laissez les plateformes sociales deviner comment afficher votre page. Et elles devinent mal.

Le protocole Open Graph, créé par Facebook en 2010, reste en 2026 le standard de facto pour contrôler l'aperçu de vos pages quand elles sont partagées sur Facebook, LinkedIn, X (ex-Twitter), WhatsApp, Slack, Discord et la plupart des messageries. Le principe est simple : vous indiquez explicitement aux plateformes quel titre, quelle description, quelle image et quelle URL afficher.

Arrêtons de tourner autour du pot. Voici comment faire ça proprement.

Les quatre balises obligatoires#

Tout commence dans le <head> de votre page HTML. Quatre balises <meta> sont indispensables :

<meta property="og:title" content="Votre titre optimisé" />
<meta property="og:description" content="Description concise et engageante" />
<meta property="og:image" content="https://votresite.com/image-og.jpg" />
<meta property="og:url" content="https://votresite.com/page" />

Sans ces quatre balises, les plateformes font du reverse-engineering sur votre page : elles piochent le <title>, le premier paragraphe, la première image trouvée. Le résultat est aléatoire et rarement flatteur.

Quelques règles concrètes :

og:title : gardez-le sous 70 caractères. Facebook peut afficher jusqu'à 120 caractères, LinkedIn un peu moins, mais au-delà de 70 l'affichage devient imprévisible selon le device. Ce titre peut (et devrait) être différent de votre <title> SEO. Le <title> est optimisé pour Google, le og:title est optimisé pour le clic social.
og:description : 100 à 200 caractères. Facebook affiche jusqu'à 200-300 caractères selon le contexte, LinkedIn tronque l'affichage à environ 70 caractères (même s'il stocke davantage). Visez 155 caractères pour couvrir la majorité des cas.
og:image : URL absolue, HTTPS obligatoire. C'est la balise la plus impactante (on y revient en détail juste après).
og:url : l'URL canonique de la page. Pas l'URL avec les paramètres UTM, pas l'URL de prévisualisation. L'URL propre.

J'ajoute systématiquement deux balises supplémentaires sur les sites que je configure :

<meta property="og:type" content="article" />
<meta property="og:site_name" content="Nom du site" />

Le og:type aide les plateformes à contextualiser votre contenu (article, website, product). Le og:site_name affiche le nom de votre site sous l'aperçu sur Facebook, ce qui renforce la reconnaissance de marque.

L'image : le levier que tout le monde bâcle#

Concrètement, l'image Open Graph représente plus de 80 % de l'impact visuel d'un aperçu social. Un bon titre avec une mauvaise image, personne ne clique. Une image forte avec un titre moyen, les gens cliquent quand même.

Les dimensions recommandées en 2026, selon les plateformes :

Facebook : 1200 x 630 pixels (ratio 1.91:1)
LinkedIn : 1200 x 627 pixels (ratio 1.91:1)
X (Twitter) : 1200 x 628 pixels pour les summary_large_image cards

En pratique, 1200 x 630 fonctionne partout. C'est la dimension universelle. Inutile de créer trois versions différentes sauf si vous avez des besoins très spécifiques.

Le format : JPEG ou PNG. Poids max recommandé : moins de 5 Mo (limite courante des plateformes ; Facebook accepte jusqu'à 8 Mo, mais inutile de flirter avec la limite). Je préconise de rester sous 300 Ko pour le temps de chargement. Un passage en WebP ou AVIF pour votre site est pertinent, mais pour les images OG, restez en JPEG : certains crawlers de plateformes sociales ne gèrent pas encore correctement WebP dans les balises og:image.

Les pages avec des images OG optimisées (bonnes dimensions, visuellement impactantes) génèrent significativement plus d'engagement sur les partages sociaux par rapport aux pages sans image OG ou avec une image par défaut. Selon Moz, l'impact peut atteindre jusqu'à 50 % d'engagement en plus. La différence est massive.

Un client e-commerce que j'accompagnais avait une seule image OG par défaut pour tout son site : le logo sur fond blanc. On a mis en place des images OG dynamiques par catégorie de produit (product shots sur fond coloré, 1200 x 630). Le trafic social a bondi de 35 % en trois semaines. Pas grâce à un changement d'algorithme ; juste parce que les aperçus donnaient enfin envie de cliquer.

Twitter Cards : le complément qu'on oublie#

X (Twitter) utilise ses propres balises en plus de Open Graph :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Votre titre" />
<meta name="twitter:description" content="Description" />
<meta name="twitter:image" content="https://votresite.com/image.jpg" />

Si les Twitter Cards ne sont pas présentes, X se rabat sur les balises Open Graph. Ça fonctionne, mais vous perdez le contrôle du type de card (summary vs summary_large_image). La summary_large_image affiche une image en pleine largeur dans le feed, la summary classique affiche une miniature à gauche. La différence de visibilité est significative.

Mon conseil : ajoutez au minimum twitter:card avec la valeur summary_large_image. Pour le reste, les balises OG suffisent comme fallback.

Debugger, tester, purger le cache#

Vous avez tout configuré, mais LinkedIn affiche toujours l'ancien aperçu ? Normal. Les plateformes mettent en cache les métadonnées OG. Modifier vos balises ne suffit pas, il faut forcer le rafraîchissement.

Les outils de debug indispensables :

Facebook Sharing Debugger (developers.facebook.com/tools/debug/) : collez votre URL, cliquez "Scrape Again" pour purger le cache Facebook
LinkedIn Post Inspector (linkedin.com/post-inspector/) : même principe pour LinkedIn
X Card Validator : intégré dans la plateforme publicitaire de X

Ces outils vous montrent exactement ce que la plateforme "voit" sur votre page. Si l'image est absente, le titre tronqué ou la description manquante, vous le saurez immédiatement.

Je les utilise systématiquement après chaque mise en production. J'ai changé d'avis là-dessus d'ailleurs : avant, je testais uniquement quand un client signalait un problème. Maintenant c'est dans ma checklist de déploiement, au même titre que la vérification des redirections et du SEO technique. Parce que découvrir un aperçu cassé quand le DG de votre client partage fièrement sa nouvelle page sur LinkedIn, c'est le genre de moment qu'on ne veut vivre qu'une fois.

Les erreurs fréquentes (et comment les éviter)#

Après des dizaines d'audits sur le sujet, les mêmes problèmes reviennent :

Image en URL relative. og:image doit contenir une URL absolue avec le protocole HTTPS. /images/hero.jpg ne fonctionne pas. https://votresite.com/images/hero.jpg fonctionne. C'est l'erreur numéro un.

Image trop petite. En dessous de 200 x 200 pixels, Facebook refuse l'image. Entre 200 et 600 pixels de large, l'image s'affiche en miniature au lieu du format large. Visez toujours 1200 x 630.

Pas de fallback. Si votre page n'a pas de balise og:image, Facebook va chercher la première image de la page. Ça peut être votre logo en 50 x 50, une icône, ou une image de publicité. La réalité du terrain : je vois régulièrement des sites corporate dont l'aperçu social affiche une image de tracking pixel invisible. Résultat : un gros rectangle gris.

Balises dans le <body>. Les balises <meta> Open Graph doivent être dans le <head>. Si votre CMS ou votre thème les injecte dans le <body>, les crawlers ne les trouvent pas. Ça arrive plus souvent qu'on ne le pense avec les page builders WordPress.

Contenu dynamique non crawlable. Si votre page charge les balises OG via JavaScript côté client, le crawler de Facebook ne les verra pas. Facebook n'exécute pas de JavaScript (contrairement à LinkedIn dont le scraper utilise un mode headless Chrome). Dans le doute, ne comptez pas sur le JS côté client pour vos balises OG. Les balises OG doivent être rendues côté serveur (SSR) ou présentes dans le HTML statique. Le crawler de Facebook a à peu près la patience technique d'un recruteur qui lit un CV : si c'est pas visible en 2 secondes, ça n'existe pas.

L'impact SEO indirect (arrêtons le fantasme)#

Il faut être honnête : les balises Open Graph n'ont aucun impact direct sur votre classement Google. Google ne lit pas og:title pour décider de votre position. Ce n'est pas un facteur de ranking.

L'impact est indirect, via les signaux sociaux et le trafic référent. Un aperçu social attractif génère plus de clics, plus de trafic, plus de partages, potentiellement plus de backlinks naturels. C'est ce trafic et ces backlinks qui comptent pour le SEO. L'Open Graph est un maillon de la chaîne, pas un raccourci magique.

Ceux qui vous vendent l'Open Graph comme une technique SEO à part entière exagèrent. Ceux qui l'ignorent complètement passent à côté d'un levier de trafic réel, surtout si votre stratégie de visibilité inclut les réseaux sociaux (et en 2026, elle devrait).

En résumé : la checklist minimale#

Pour chaque page importante de votre site :

Quatre balises OG obligatoires : og:title, og:description, og:image, og:url
Image en 1200 x 630, JPEG, HTTPS, URL absolue, moins de 300 Ko
twitter:card avec summary_large_image
Test systématique via Facebook Debugger et LinkedIn Post Inspector après publication
Rendu côté serveur des balises (pas de JavaScript client-side)

C'est 30 minutes de travail par page. Pas par mois. Une seule fois, puis ça roule. Et la différence entre un aperçu social qui donne envie de cliquer et un rectangle gris avec un titre tronqué, c'est souvent ces 30 minutes que personne n'a prises.