Le protocole Open Graph (OG) est un ensemble de balises meta créé à l'origine par Facebook en 2010. Ces balises se placent dans la section <head> de votre HTML et indiquent aux plateformes de réseaux sociaux exactement comment afficher votre contenu lorsqu'un lien est partagé. Sans elles, les plateformes tentent de reconstituer un aperçu à partir de ce qu'elles trouvent sur la page, et le résultat est généralement médiocre.
Où apparaissent les balises Open Graph en pratique
Lorsqu'une personne colle un lien dans Facebook, LinkedIn, WhatsApp, Telegram, Slack ou Discord, la plateforme récupère la page et lit ses balises OG. Ces balises déterminent le titre, la description et l'image d'aperçu qui apparaissent dans la publication ou le message. Cet aperçu est souvent la première impression que les internautes ont de votre contenu, il est donc important de le contrôler. Un lien avec une image claire et un titre convaincant obtient nettement plus de clics qu'un lien avec une vignette cassée ou une description générique tirée du pied de page.
Balises Open Graph obligatoires et facultatives
La spécification Open Graph définit quatre propriétés obligatoires :
og:title: le titre de votre contenu tel qu'il doit apparaître dans l'aperçu social.og:type: le type de contenu. Par défaut « website » s'il est omis.og:image: l'URL de l'image à afficher dans l'aperçu.og:url: l'URL canonique de la page.
Au-delà, plusieurs balises facultatives sont couramment utilisées :
og:description: un résumé d'une à deux phrases de la page.og:site_name: le nom global de votre site (par exemple « InspectWP »).og:locale: la langue et le territoire (par exempleen_US,de_DE).og:video: une URL vers un fichier vidéo associé au contenu.
Comprendre les valeurs de og:type
La balise og:type indique aux plateformes le type de contenu que représente la page. Les valeurs les plus courantes sont :
- website : à utiliser pour votre page d'accueil et les pages générales. C'est la valeur par défaut si aucun type n'est spécifié.
- article : à utiliser pour les articles de blog, les actualités et tout contenu rédigé avec une date de publication. Ce type débloque des balises supplémentaires comme
article:published_time,article:authoretarticle:section. - product : utilisé par les sites e-commerce pour décrire des produits. Prend en charge des balises comme
product:price:amountetproduct:price:currency. - profile : pour les pages représentant une personne. Prend en charge
profile:first_nameetprofile:last_name.
Exigences et bonnes pratiques pour og:image
L'image d'aperçu est l'élément le plus visuellement saillant d'un partage social, il est donc important de la soigner. Voici les détails :
- Taille minimale : Facebook recommande au moins 1200 x 630 pixels pour les écrans haute résolution. Les images inférieures à 600 x 315 pixels peuvent ne pas s'afficher correctement ou apparaître sous forme de petite vignette au lieu d'une grande carte.
- Ratio d'aspect : 1,91:1 est la norme pour les grands aperçus de liens sur la plupart des plateformes. Les images carrées (1:1) fonctionnent aussi mais produisent une mise en page différente.
- Taille du fichier : gardez les images sous 8 Mo. Facebook et LinkedIn peuvent être lents à afficher des images très volumineuses.
- Format : JPEG et PNG sont universellement pris en charge. WebP fonctionne sur certaines plateformes mais pas toutes.
- Toujours utiliser des URL absolues : l'URL de l'image doit commencer par
https://. Les chemins relatifs ne fonctionneront pas car la plateforme sociale récupère l'image depuis ses propres serveurs.
Fonctionnement du Facebook Sharing Debugger
Facebook met agressivement en cache vos données OG. Si vous mettez à jour vos balises OG, l'ancien aperçu peut encore s'afficher lorsqu'une personne partage votre lien. Le Facebook Sharing Debugger (developers.facebook.com/tools/debug/) vous permet d'entrer une URL et de voir exactement ce que Facebook en lit. Vous pouvez cliquer sur « Scrape Again » pour forcer Facebook à récupérer à nouveau la page et à mettre à jour son cache. Cet outil est également précieux pour résoudre des problèmes comme les images manquantes, les titres incorrects ou les balises mal interprétées. LinkedIn dispose d'un outil similaire appelé Post Inspector.
Open Graph et Twitter Cards
Twitter (désormais X) a développé son propre système de balises meta appelé Twitter Cards. Les balises Twitter Card utilisent l'attribut name au lieu de property :
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />La bonne nouvelle est que Twitter se rabat sur les balises Open Graph lorsque les balises Twitter Card sont absentes. Donc si vous avez og:title mais pas twitter:title, Twitter utilisera le titre OG. Cependant, la balise twitter:card elle-même n'a pas d'équivalent OG, vous devez donc toujours inclure au moins cette balise spécifique à Twitter. La définir sur summary_large_image produit l'aperçu le plus visuellement attrayant avec une grande image au-dessus du texte.
WordPress et la génération de balises Open Graph
Le cœur de WordPress n'inclut pas de balises Open Graph par défaut. Vous avez besoin d'une extension pour les ajouter. Les options les plus populaires sont :
- Yoast SEO : génère automatiquement toutes les balises OG essentielles à partir du titre de l'article, de l'extrait et de l'image mise en avant. Permet de remplacer le titre OG, la description et l'image par article via l'onglet « Social » dans l'éditeur. Génère également les balises Twitter Card.
- Rank Math : similaire à Yoast avec génération OG automatique et remplacements par article. Inclut une fonctionnalité d'aperçu social qui montre à quoi ressemblera l'article lorsqu'il sera partagé.
- The SEO Framework : une alternative légère qui génère les balises OG et Twitter avec une configuration minimale. Moins d'options de configuration mais des valeurs par défaut solides.
Si vous utilisez un constructeur de pages comme Elementor ou une extension de cache, assurez-vous que les balises OG sont présentes dans le HTML mis en cache. Certaines configurations de cache agressives peuvent supprimer les balises meta de la section <head>.
Balises Open Graph pour les produits WooCommerce
Pour les boutiques WooCommerce, les balises OG deviennent encore plus importantes car les aperçus de produits influencent directement les décisions d'achat. Une page produit bien configurée doit inclure og:type défini sur « product », ainsi que le nom du produit comme titre, une description convaincante et l'image principale du produit. Des extensions SEO comme Yoast WooCommerce SEO ou Rank Math peuvent les générer automatiquement. Le prix et la disponibilité du produit peuvent également être inclus via des balises OG supplémentaires, que certaines plateformes affichent dans l'aperçu.
Erreurs Open Graph courantes
- Mauvaise taille d'image : utiliser une image inférieure à 600 x 315 pixels donne une minuscule vignette au lieu d'un grand aperçu en carte. Utilisez toujours les 1200 x 630 pixels recommandés.
- Balise og:image manquante : sans balise image, les plateformes n'affichent aucune image ou choisissent une image aléatoire de la page, qui peut être une publicité de la barre latérale ou un logo qui rend mal en aperçu.
- URL relatives : toutes les URL OG doivent être absolues.
/images/photo.jpgne fonctionnera pas ; il fauthttps://example.com/images/photo.jpg. - Balises OG en double : avoir deux balises
og:titlesur la même page (par exemple à cause de deux extensions différentes) entraîne un comportement imprévisible. Vérifiez le code source de votre page pour vous assurer que chaque balise OG n'apparaît qu'une seule fois. - Ne pas tester après modification : les données OG sont mises en cache par les plateformes sociales. Après avoir mis à jour les balises, videz toujours le cache à l'aide du Facebook Debugger ou du LinkedIn Post Inspector pour vérifier que les nouvelles balises fonctionnent.
Ce que vérifie InspectWP
InspectWP analyse la section <head> de votre page et indique quelles balises Open Graph et Twitter Card sont présentes. Il affiche les valeurs exactes de chaque balise, ce qui facilite la vérification que les titres, descriptions et URL d'images sont corrects. Les balises meta de réseaux sociaux manquantes sont signalées comme une opportunité d'amélioration SEO, car les pages sans balises OG ont tendance à générer moins d'engagement lorsqu'elles sont partagées sur les plateformes sociales.