Aperçu Open Graph

Qu'est-ce qu'un aperçu Open Graph ?

L'aperçu Open Graph est la vignette enrichie qui s'affiche quand vous partagez un lien sur Facebook, LinkedIn, Twitter, Slack, Discord ou WhatsApp. Elle contient un titre, une description et une image, et donne envie de cliquer. C'est un facteur clé du taux d'engagement sur les réseaux sociaux.

Cet aperçu est piloté par les balises meta Open Graph (og:title, og:description, og:image, og:url) placées dans le head de votre page HTML. Un bon Open Graph augmente le CTR de 30 à 100 % par rapport à un lien nu sans aperçu. Cet outil affiche comment votre URL apparaîtra sur chaque plateforme.

Balises Open Graph essentielles

• og:title — le titre affiché dans la carte d'aperçu. Conservez-le en dessous de 60 caractères.
• og:description — un bref résumé du contenu de la page. Conservez-le en dessous de 155 caractères.
• og:image — la vignette d'aperçu. Taille recommandée : 1200x630 pixels pour un meilleur rendu sur toutes les plateformes.
• og:url — l'URL canonique de la page.
• og:type — le type de contenu (website, article, product, etc.).

Comment utiliser cet outil

Saisissez l'URL d'une page. L'outil récupère ses balises Open Graph et affiche une prévisualisation Facebook, Twitter et LinkedIn. Il signale les balises manquantes ou mal configurées et suggère des améliorations pour optimiser le partage.

Twitter Cards vs Open Graph

Twitter utilise ses propres balises meta (twitter:card, twitter:title, twitter:description, twitter:image), mais se rabat sur les balises OG lorsque les balises spécifiques à Twitter sont absentes. Pour une compatibilité maximale, incluez à la fois les balises OG et les balises Twitter Card. La balise twitter:card (réglée sur summary_large_image pour un grand aperçu) est l'ajout spécifique à Twitter le plus important.

Exemple concret

Réglez og:title sur un titre de 55 caractères, og:description sur un résumé de 155 caractères et og:image sur une image de 1200x630 pixels, puis collez l'URL pour prévisualiser la carte. C'est ce rapport (1,91:1) que Facebook et LinkedIn recadrent, donc un sujet centré reste visible. Un og:image manquant force les plateformes à deviner, prenant souvent un logo ou la première image de la page, ce qui paraît rarement intentionnel dans un fil partagé.

Erreurs courantes

L'erreur la plus courante est une image trop petite — les plateformes veulent au moins 1200x630, et tout ce qui est inférieur à 600x315 peut s'afficher en minuscule vignette ou être ignoré. Les URL d'image relatives sont un autre piège : Open Graph exige une URL absolue https:// car le robot s'exécute sur un serveur externe. Enfin, les changements sont mis en cache, alors utilisez le débogueur de chaque plateforme pour forcer une nouvelle lecture après avoir modifié les balises.

Questions fréquentes

Pourquoi mon image OG ne s'affiche pas ?

Causes courantes : URL relative au lieu d'absolue (utiliser https://exemple.com/image.jpg), fichier trop gros, format non supporté, cache du réseau social. Forcez le refresh avec Facebook Debugger ou Twitter Card Validator.

Faut-il une image OG par page ?

Idéalement oui — chaque article ou produit devrait avoir une image unique pour maximiser l'engagement. À défaut, une image par défaut de marque vaut mieux que rien. Évitez la même image générique sur 1000 pages.

Ai-je besoin des balises Twitter Card si j'ai déjà Open Graph ?

Twitter se rabat sur les balises Open Graph pour le titre, la description et l'image, si bien que le partage de base fonctionne sans elles. Ajoutez twitter:card (généralement summary_large_image) quand vous voulez la mise en page plus grande ou une attribution propre à Twitter via twitter:site. Sinon, Open Graph seul suffit.