raatools/

Aperçu Open Graph

Prévisualisez l'apparence de votre page sur les réseaux sociaux.

Facebook / LinkedIn Preview

1200 × 630 image
example.com
My Amazing Page Title
A detailed description of what this page is about. Make it compelling!

Twitter / X Preview

1200 × 628 image
My Amazing Page Title
A detailed description of what this page is about. Make it compelling!
🔗 example.com

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.

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.