Aperçu Open Graph

Prévisualisez comment votre page apparaîtra lorsqu'elle sera partagée sur Facebook, Twitter/X, LinkedIn et Slack. Générez des balises meta Open Graph et Twitter Card à partir d'un formulaire.

39/70
119/160

Use an absolute URL. Ideal: 1200×630px JPG/PNG under 1MB.

Facebook

example.com

My Awesome Blog Post — A Complete Guide

Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike.

Generated Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:title" content="My Awesome Blog Post — A Complete Guide" />
<meta property="og:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />
<meta property="og:site_name" content="My Website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Blog Post — A Complete Guide" />
<meta name="twitter:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />

OG Tag Checklist

og:title set (50–70 chars)
og:description set (120–160 chars)
Missing or not absolute
og:url is absolute HTTPS URL
og:site_name set
og:type selected

Comment utiliser Aperçu Open Graph

  1. 1Entrez le titre, la description, l'URL et l'URL de l'image de votre page.
  2. 2Prévisualisez comment le lien apparaîtra sur Facebook, Twitter/X, LinkedIn et Slack.
  3. 3Copiez les balises meta générées dans votre HTML <head>.
ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Questions fréquemment posées

Que sont les balises Open Graph ?
Les balises Open Graph (OG) sont des méta-tags HTML qui contrôlent la façon dont les URL apparaissent lorsqu'elles sont partagées sur les plateformes de réseaux sociaux comme Facebook, LinkedIn, Twitter/X, Slack et Discord. Développé par Facebook en 2010, le protocole OG est désormais le standard pour les aperçus de lien sur le web. Balises clés : og:title (titre), og:description (résumé), og:image (miniature), og:url (URL canonique). Sans balises OG, les plateformes devinent le contenu — souvent mal. Avec des balises OG appropriées, vous contrôlez exactement la façon dont votre contenu apparaît lorsqu'il est partagé, améliorant considérablement les taux de clics.
Quelle est la différence entre Open Graph et Twitter Cards ?
Open Graph est le standard général utilisé par Facebook, LinkedIn, Slack, Discord et la plupart des plateformes. Les Twitter Cards sont des méta-tags spécifiques à Twitter/X (twitter:card, twitter:title, twitter:description, twitter:image). La plupart des implémentations nécessitent les deux. Bonne nouvelle : si les balises spécifiques à Twitter sont absentes, Twitter se replie sur les balises OG. Recommandé : définissez les deux pour une compatibilité maximale. Types de cartes Twitter : summary (petite image), summary_large_image (bannière pleine largeur — le plus courant), app (application mobile), player (vidéo). Le type summary_large_image avec une image 1200×628px crée les aperçus les plus accrocheurs.
Quelle est la taille idéale pour une image Open Graph ?
Taille OG recommandée : 1200×630px (ratio 1,91:1). Minimum : 600×315px. Taille de fichier maximale : sous 8 Mo (limite Facebook), idéalement sous 1 Mo pour un chargement rapide. Facebook recadrera les images qui ne respectent pas le ratio. LinkedIn préfère 1200×627px. Twitter/X summary_large_image : 1200×675px (ratio 16:9). Utilisez toujours des URL absolues pour og:image (incluant https://). Utilisez le format JPG ou PNG. Incluez du texte alternatif via og:image:alt pour l'accessibilité. Conseil pro : incluez votre marque/logo dans l'image car elle apparaît sans contexte dans les flux sociaux.
Comment valider mes balises Open Graph ?
Outils de test : Facebook Sharing Debugger (developers.facebook.com/tools/debug) — collez votre URL, extrait et affiche l'aperçu + les erreurs. LinkedIn Post Inspector (linkedin.com/post-inspector) — pareil pour LinkedIn. Twitter Card Validator (cards-dev.twitter.com/validator) — pour les cartes Twitter. Note : Facebook et LinkedIn mettent agressivement en cache les aperçus. Après avoir corrigé les balises, utilisez le bouton « Scrape Again » du débogueur pour forcer l'actualisation du cache. Problèmes courants : og:image manquant (aucun aperçu affiché), image trop petite (ignorée), URL d'image relatives (non prises en charge), og:title manquant renvoyant au titre de la page.
Qu'est-ce que og:type et quand devrais-je utiliser différentes valeurs ?
og:type indique aux plateformes quel type de contenu la page contient. Valeurs les plus courantes : website (par défaut — pages d'accueil ou pages générales). article (billets de blog, articles d'actualité — active article:published_time, article:author). product (articles e-commerce — active og:price:amount). video.movie / video.episode (contenu vidéo). music.song / music.album (contenu audio). Pour les articles : ajoutez article:published_time (date ISO 8601), article:author (URL de la page d'auteur), article:section (catégorie), article:tag (mots-clés). Pour la plupart des sites, website et article couvrent 99 % des cas d'utilisation.