Aperçu Open Graph
Prévisualisez comment votre URL apparaît dans les partages Facebook, X, LinkedIn et Slack — sans déployer.
Qu'est-ce qu'Open Graph ?
Open Graph est le protocole publié par Facebook en 2010 pour permettre aux sites web de déclarer des métadonnées structurées sur une page — titre, description, image, type, URL canonique — afin que les liens partagés sur les plateformes sociales s'affichent comme des cartes riches au lieu d'URL nues. La plupart des plateformes le consomment désormais : Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage. X/Twitter possède son propre espace de noms twitter:* mais se rabat sur Open Graph lorsque les balises Twitter sont absentes, donc un seul ensemble de balises og: couvre la majeure partie de l'écosystème.
Comment utiliser ce prévisualiseur
Collez une URL pour récupérer ses balises existantes, ou remplissez manuellement les quatre champs principaux pour concevoir une carte avant publication. L'aperçu se met à jour en direct et se rapproche de la façon dont Facebook, LinkedIn et Slack affichent la carte. Surveillez l'image : tout ce qui est plus étroit que 1200 px ou avec un rapport d'aspect très éloigné du carré sera recadré ou réduit. Lorsque la carte semble correcte, copiez l'extrait en bas et collez-le dans la balise <head> de votre page.
Pourquoi votre image de partage ne se met pas à jour
Facebook, LinkedIn et la plupart des autres plateformes mettent agressivement en cache les métadonnées récupérées — parfois pendant des jours. Une fois qu'une URL a été partagée, modifier seulement og:image ne rafraîchira généralement pas la carte. Les solutions sont : (1) utiliser le Sharing Debugger de Facebook pour forcer un nouveau scraping, (2) changer le nom du fichier image (card-v2.png) pour invalider la version en cache, ou (3) publier sur une nouvelle URL. Planifiez cela dans votre liste de vérification de lancement plutôt que de le déboguer sous la pression d'une échéance.
Référence des balises
| Balise | Objectif | Conseil |
|---|---|---|
og:title | Restez sous 60 caractères pour éviter la troncature. | Titre affiché sur la carte. |
og:description | 110-200 caractères s'affichent bien sur la plupart des plateformes. | Sous-titre / ligne de résumé. |
og:image | PNG ou JPEG 1200×630 en HTTPS, < 5 Mo. | Image de la carte. |
og:url | Utilisez l'URL canonique, pas celle avec des balises de suivi. | URL canonique vers laquelle le partage redirige. |
twitter:card | summary_large_image correspond au style de la carte OG. | Type de carte Twitter. |
Questions fréquentes
Ai-je besoin à la fois des balises Open Graph et Twitter card ?
twitter:* sont absentes, X/Twitter se rabat sur les balises og:*. Ajouter les balises Twitter n'a d'intérêt que lorsque vous voulez une image ou un texte différent sur X par rapport à Facebook/LinkedIn. Pour la plupart des pages, un bloc OG propre suffit.Quelle est la bonne taille d'image ?
Pourquoi l'aperçu ne ressemble-t-il pas exactement à la carte de Facebook ?
L'outil récupère-t-il les URL via un serveur ?
Puis-je utiliser une vidéo comme og:image ?
og:video pour cela, accompagné d'une og:image fixe en repli. La plupart des plateformes affichent encore l'image fixe sur la carte et ne lisent la vidéo qu'au clic.À quoi sert og:type ?
website, article, book, profile, etc. Facebook affichait autrefois des mises en page différentes selon le type ; aujourd'hui, cela affecte surtout les fonctionnalités de découverte. Réglez-le sur article pour les billets de blog et website pour tout le reste et tout ira bien.