Les balises Open Graph

Les balises Open Graph contrôlent l'aperçu de votre page lorsqu'elle est partagée sur les réseaux sociaux, dans une messagerie, ou citée dans une conversation avec une IA générative capable d'afficher un aperçu enrichi.

À quoi servent les balises Open Graph

Sans balisage Open Graph, une plateforme qui affiche un aperçu de lien (réseau social, messagerie, certains assistants IA) doit deviner quel titre, quelle image et quelle description utiliser — souvent en piochant maladroitement dans le contenu de la page : une première image trouvée dans le HTML sans lien avec le sujet, un titre tronqué en plein milieu d'une phrase, ou une description absente. Les balises Open Graph reprennent le contrôle de cet aperçu et garantissent une présentation cohérente, quel que soit l'endroit où le lien est partagé.

Ce standard, initialement conçu par Facebook, a depuis été adopté comme référence de fait par la quasi-totalité des plateformes qui affichent des aperçus de liens, ce qui en fait un balisage à faible effort d'implémentation et à bénéfice large — une poignée de balises couvrent l'essentiel des cas d'usage.

Les balises essentielles

<head>
  <meta property="og:title" content="Guide complet de la facturation électronique">
  <meta property="og:description" content="Tout comprendre sur les formats, les obligations et les plateformes de facturation électronique en 2026.">
  <meta property="og:image" content="https://exemple.com/images/guide-facturation-og.jpg">
  <meta property="og:url" content="https://exemple.com/guide-facturation-electronique">
  <meta property="og:type" content="article">
</head>

og:title : titre de l'aperçu, souvent proche du <title> mais peut être reformulé pour un contexte de partage social.
og:description : résumé affiché sous le titre dans l'aperçu.
og:image : image de la carte d'aperçu — élément qui influence le plus le taux de clic sur un partage.
og:url : URL canonique de la page partagée.
og:type : nature du contenu (article, website, product...).

Ces cinq balises couvrent la grande majorité des cas d'usage. D'autres propriétés existent pour des besoins plus spécifiques (og:site_name pour le nom du site, article:author ou article:published_time pour un contenu éditorial), mais elles restent secondaires par rapport au socle formé par le titre, la description et l'image.

Bonnes pratiques pour l'image Open Graph

Une image aux dimensions incorrectes ou absente entraîne un aperçu vide ou mal recadré, ce qui réduit fortement l'engagement sur un partage. Les recommandations les plus courantes :

format recommandé autour de 1200 x 630 pixels (ratio 1,91:1) ;
poids de fichier raisonnable pour un chargement rapide de l'aperçu ;
texte lisible même en petite taille si l'image contient du texte superposé ;
sujet principal centré, car certaines plateformes recadrent l'image différemment selon le format d'affichage (aperçu large, vignette carrée) ;
une image par défaut définie au niveau du site pour les pages qui n'en ont pas de spécifique, plutôt que de laisser le champ vide.

Un impact qui dépasse les réseaux sociaux

Certaines interfaces d'IA génératives qui affichent des résultats de recherche ou des citations de sources utilisent également ces métadonnées pour composer un aperçu visuel de la source citée. Un balisage Open Graph complet et cohérent avec le contenu réel de la page contribue donc, indirectement, à la qualité de présentation de votre marque dans ces contextes.

Erreurs fréquentes

Balises Open Graph absentes, ce qui laisse chaque plateforme deviner un aperçu de manière incohérente.
og:image pointant vers une URL relative au lieu d'une URL absolue, ce qui casse l'affichage sur la plupart des plateformes.
og:description différente au point de contredire le contenu réel de la page.
Oublier de mettre à jour ces balises après une refonte visuelle ou un changement de contenu majeur.

Twitter Cards, et tester son balisage avant publication

Certaines plateformes utilisent leur propre standard en complément d'Open Graph. X (ex-Twitter), par exemple, lit en priorité ses balises twitter:card, twitter:title et twitter:image si elles sont présentes, et retombe sur les balises Open Graph en leur absence :

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Guide complet de la facturation électronique">
<meta name="twitter:image" content="https://exemple.com/images/guide-facturation-twitter.jpg">

Dans la majorité des cas, dupliquer scrupuleusement les valeurs Open Graph dans ces balises complémentaires suffit ; il n'est pas nécessaire de rédiger un contenu totalement distinct pour chaque plateforme, sauf si vous ciblez spécifiquement une audience différente sur l'une d'elles.

Un aperçu Open Graph mal configuré ne se voit généralement pas en naviguant sur le site lui-même — l'erreur n'apparaît qu'au moment du partage, souvent après que le lien a déjà circulé. Les outils de débogage fournis par les principales plateformes sociales permettent de simuler l'aperçu avant publication et de forcer un rafraîchissement du cache si une image ou un titre a été modifié après un premier partage : ces plateformes mettent en cache l'aperçu généré et ne le régénèrent pas automatiquement à chaque visite.

Les balises Open Graph complètent naturellement la balise Title et la Meta Description : les trois ensemble définissent comment votre page se présente, que ce soit dans un moteur de recherche ou lors d'un partage. Pour aller plus loin sur le balisage structuré, la leçon suivante logique est celle sur les données structurées Schema.org.