Open Graph : définition et explications

Open Graph est un protocole créé par Facebook en 2010 et documenté sur ogp.me, qui permet à une page de se décrire à n’importe quelle application qui construit un aperçu de lien. Quand quelqu’un colle votre URL dans Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage ou de nombreuses autres applications, l’application récupère la page, lit ses balises meta og: et affiche une carte avec un titre, une description et une image.

Sans balises Open Graph, chaque application devine, et choisit souvent votre logo, une phrase du bandeau de cookies, ou rien du tout.

Les balises qui comptent

<meta property="og:type" content="article">
<meta property="og:title" content="How to Waterproof Leather Hiking Boots">
<meta property="og:description" content="A 15-minute method that keeps boots dry for a full season.">
<meta property="og:url" content="https://www.example.com/guides/waterproof-boots/">
<meta property="og:image" content="https://www.example.com/img/waterproof-boots-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Hands rubbing wax into a brown leather boot">
<meta property="og:site_name" content="Example Outdoor">

Le protocole définit quatre propriétés obligatoires (og:title, og:type, og:image et og:url), et la plupart des plateformes utilisent aussi og:description. Utilisez l’attribut property, comme le fait la spécification.

Soigner l’image

L’image fait l’essentiel du travail dans un fil d’actualité. Une image de 1200 × 630 pixels (environ 1,91:1) s’affiche bien sur la plupart des plateformes ; les images plus petites peuvent être montrées en simple miniature plutôt qu’en grande carte. Gardez le texte important et les visages loin des bords, car certaines applications recadrent en carré. Utilisez une URL HTTPS absolue et un fichier JPEG, PNG ou WebP de taille raisonnable, et assurez-vous que l’image n’est pas bloquée par le robots.txt ou une protection anti-hotlink, sinon l’aperçu sera vide.

Open Graph influence-t-il le SEO ?

Les balises Open Graph ne sont pas un facteur de classement de Google, qui construit ses propres extraits de résultats à partir de la balise title et de la meta description. Le bénéfice est indirect mais réel : les liens partagés avec un aperçu clair et attrayant obtiennent plus de clics et de repartages, ce qui amène des visiteurs et, avec le temps, des mentions et des liens. Les cartes d’aperçu de lien sont aussi la façon dont beaucoup de gens découvrent d’abord votre contenu, dans des discussions de groupe et des communautés, bien avant de vous chercher.

Erreurs courantes

• Des URL d’image relatives comme /img/share.jpg. De nombreux analyseurs exigent l’URL https:// complète.
• La même image générique sur toutes les pages, si bien que chaque lien partagé a le même aspect.
• Un og:url différent de l’URL canonique, qui répartit les compteurs de partages entre plusieurs versions.
• Des balises ajoutées en JavaScript. La plupart des robots d’aperçu n’exécutent pas les scripts ; placez les balises dans le HTML rendu côté serveur.
• Des caches périmés. Les plateformes mettent les aperçus en cache. Après avoir corrigé les balises, utilisez l’outil de débogage de la plateforme (comme le Sharing Debugger de Facebook ou le Post Inspector de LinkedIn) pour les actualiser.

Comment vérifier

L’Vérificateur Open Graph prévisualise l’aspect de votre lien sur Facebook, X, LinkedIn, WhatsApp et Slack, valide chaque balise et contrôle la taille de votre og:image. X peut aussi utiliser ses propres balises : voir Twitter Card.

Questions fréquentes