Aperçu Open Graph, gratuit

Ce qu'est vraiment Open Graph

Le protocole Open Graph a été créé par Facebook en 2010 comme moyen de transformer toute page web en un « objet riche » dans un graphe social, un ensemble structuré de métadonnées que d'autres applications (initialement Facebook, désormais aussi LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp, et des dizaines d'autres) peuvent lire pour rendre une carte d'aperçu quand quelqu'un colle votre URL. La spec officielle vit à ogp.me et le protocole est devenu de fait la lingua franca du partage de liens sur le web.

Sans balises OG, les plateformes sociales scrapent votre page et devinent : elles attrapent un titre, prennent la première image qu'elles trouvent et appellent ça une carte. Le résultat est rarement ce que vous voulez. Avec les balises OG vous contrôlez le titre, la description et l'image, ce qui est la différence entre un lien soigné et un lien cassé.

Les quatre balises requises (selon ogp.me)

La spec officielle d'Open Graph définit quatre propriétés requises. Pour qu'une page soit qualifiée d'objet Open Graph, elle doit déclarer les quatre :

Les balises optionnelles recommandées incluent og:description (un résumé d'une ou deux phrases), og:site_name (le nom de votre site comme étiquette), og:locale (langue et région), et les indices de dimension d'image og:image:width / og:image:height / og:image:alt. Inclure les indices de dimension permet aux clients sociaux de pré-allouer la bonne quantité d'espace et évite le décalage de mise en page pendant le chargement de l'image.

Cartes Twitter / X : même idée, balises légèrement différentes

X (anciennement Twitter) a son propre espace de noms de métadonnées, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, mais surtout, X retombe sur les balises OG quand celles spécifiques à Twitter sont absentes. Donc une page qui ne livre que les balises OG obtient quand même une carte sur X. Là où les deux diffèrent, c'est dans le type de carte :

• twitter:card = summary, petite vignette carrée, titre, description.
• twitter:card = summary_large_image, image pleine largeur en haut de la carte. Le défaut moderne pour le partage de contenu parce qu'elle attire plus l'attention visuelle dans le fil.
• app et player, pour l'installation d'apps et la vidéo en ligne respectivement.

Note : la prévisualisation autonome Twitter Card Validator à cards-dev.twitter.com/validator a été retirée par X le 2 août 2022. La méthode actuelle pour vérifier une carte est de commencer un nouveau tweet dans le compositeur, coller l'URL et laisser l'aperçu se rendre, vous n'avez pas besoin de réellement publier le tweet. Certains outils tiers (celui-ci inclus) approchent la carte rendue pour vous laisser itérer avant la mise en ligne.

Dimensions d'image qui marchent vraiment

Il n'y a pas de taille parfaite unique, mais une image 1200×630 (ratio 1,91:1) est le pari unique le plus fiable, elle marche partout sans recadrage majeur. Recommandations par plateforme :

Gardez le texte important et les visages près du centre de l'image, chaque plateforme recadre différemment et un logo dans le coin peut disparaître derrière les superpositions UI de la plateforme.

Pourquoi votre carte ne s'affiche parfois pas

Si vous avez ajouté des balises OG mais que l'aperçu reste cassé ou vide, les suspects habituels :

• HTTPS requis. Facebook et la plupart des plateformes modernes rejettent les URL d'image en http://. Servez og:image en HTTPS.
• Image non publiquement accessible. Derrière une authentification, bloquée par allow-list IP, ou renvoyant 403 au crawler de la plateforme. Testez en ouvrant l'URL de l'image dans une fenêtre privée.
• Image trop petite. En dessous du minimum de la plateforme (Facebook 200×200, LinkedIn 1200×627), la carte retombe sur une petite vignette ou aucune image.
• Mauvais ratio. Une image carrée 1:1 soumise comme summary_large_image sur X est centre-recadrée, souvent mal.
• Cache. Les plateformes sociales mettent agressivement en cache vos métadonnées OG. Après correction des balises, allez sur le Sharing Debugger de Facebook et cliquez « Scrape Again » pour rafraîchir ; le Post Inspector de LinkedIn fait pareil ; X récupère les changements la prochaine fois que quelqu'un colle l'URL.
• Robots.txt bloque le crawler social. Assurez-vous que les user agents comme facebookexternalhit, Twitterbot, LinkedInBot, Slackbot peuvent récupérer votre page et votre image.
• Le serveur renvoie un non-2xx au crawler. Vérifiez vos logs serveur pour les user agents des bots sociaux.
• URL d'image relatives. og:image doit être une URL absolue (https://votresite.com/og.jpg), jamais /og.jpg.

Le problème de cache

Une fois qu'une plateforme sociale a scrapé votre page, les métadonnées sont mises en cache pour une certaine période, le folklore communautaire la situe autour de 7 jours pour Facebook et LinkedIn, bien qu'aucune des deux plateformes ne documente le TTL exact. Mettre à jour vos balises OG ne rafraîchit pas le cache automatiquement. Pour forcer un re-scrape, utilisez les outils officiels : Facebook Sharing Debugger, LinkedIn Post Inspector. X récupère les nouvelles métadonnées la prochaine fois que l'URL est partagée. Slack et Discord rafraîchissent leurs aperçus à partir des balises OG au moment du fetch, donc ils se mettent à jour plus vite que Facebook.

Valeurs courantes de og:type

La balise og:type dit à la plateforme sociale quel type d'objet la page représente. La plupart des pages sont website (le défaut) ou article ; les valeurs spécifiques aux verticales laissent les plateformes rendre des cartes plus riches. Selon la spec :

• website, défaut pour les pages générales.
• article, articles de blog, actualités. S'apparie avec article:published_time, article:author, article:section, article:tag.
• book, s'apparie avec book:author, book:isbn.
• profile, pour les pages de profil utilisateur.
• video.movie / video.episode / video.tv_show / video.other, pour le contenu vidéo.
• music.song / music.album / music.playlist / music.radio_station, pour la musique.

Limites de longueur en pratique

Aucune plateforme n'impose de plafond strict sur la longueur du titre ou de la description, mais chacune tronque après un certain point :

• Titre, gardez-le sous ~60 caractères pour être tranquille sur toutes les plateformes ; ~70 tronque sur la plupart. Message critique dans les 50 premiers.
• Description, sous ~155–200 caractères avant troncature. Moins sur mobile (autour de 100). Mettez l'information clé au début.
• Texte alt de l'image, doit être présent (og:image:alt) pour les lecteurs d'écran et les clients soucieux d'accessibilité ; sous 100 caractères.

JSON-LD vs Open Graph (ce sont des choses différentes)

Confusion courante : les données structurées JSON-LD (avec les vocabulaires schema.org) et les balises méta Open Graph font des travaux différents. OG / Twitter Cards contrôlent les aperçus de partage social, ce qui apparaît quand quelqu'un colle votre URL dans Slack ou Facebook. JSON-LD avec schema.org aide Google à parser votre page pour les résultats de recherche enrichis, cartes de recettes, infos produit, extraits FAQ dans la recherche Google. Les deux sont recommandés et ne se remplacent pas l'un l'autre.

Erreurs courantes

1. Utiliser une URL og:image relative. La spec exige une URL absolue. Les chemins relatifs sont silencieusement ignorés.
2. Utiliser un logo de site générique pour chaque page. L'image OG est le héros de votre carte, chaque page mérite une image unique, idéalement reliée au contenu de la page.
3. Oublier og:image:width et og:image:height. Certains clients pré-allouent l'espace et ratent l'image sans ces indices.
4. Manquer le type twitter:card summary_large_image. Sans lui, X par défaut sur la carte summary plus petite avec une vignette carrée, souvent moins engageante.
5. Mettre du texte clé dans les coins de l'image. Les plateformes recadrent différemment. Sujets et texte important devraient être dans les 80 % centraux.
6. Mettre à jour les balises mais pas rafraîchir le cache. Visitez le Sharing Debugger / Post Inspector officiel après chaque changement.
7. Soumettre une URL d'image en HTTP. La plupart des plateformes rejettent les images non-HTTPS ; la carte apparaîtra sans.
8. Utiliser uniquement og:title et og:description. Sans og:image la carte se rend comme un stub texte clairsemé sur la plupart des plateformes.

Questions fréquentes

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

Outils associés