Vérificateur Open Graph : testez vos balises OG et vos aperçus de liens
Saisissez une URL pour voir son allure une fois partagée sur Facebook, X, LinkedIn et les messageries. Le vérificateur lit chaque balise og:* et twitter:*, mesure l’image d’aperçu et vous dit exactement quoi corriger.
Aperçus de liens (approximatifs : chaque plateforme applique sa propre mise en page, son recadrage et son cache)
Contrôles
Image d’aperçu
Balises trouvées
| Champ | Valeur |
|---|
Balises suggérées
Vos valeurs actuelles, avec des espaces réservés là où il manque quelque chose. Collez le tout dans le <head> de la page et modifiez les lignes « À FAIRE ».
Un vérificateur Open Graph montre ce que voit un robot quand quelqu’un colle votre lien dans une publication ou une conversation : le titre, la description et l’image déclarés dans les balises metaog:* et twitter:* de votre page. Si un aperçu affiche la mauvaise image, aucune image, ou le nom de votre site à la place du titre de l’article, la cause se trouve presque toujours dans ces quelques lignes de HTML, et cette page vous dit laquelle.
Comment vérifier vos balises Open Graph
- Saisissez l’URL de la page que vous voulez partager et cliquez sur Vérifier les balises. Les redirections sont suivies, et c’est l’URL finale qui est analysée.
- Regardez les aperçus. Ce sont des approximations de la façon dont Facebook, X, LinkedIn et les messageries disposent une carte de lien, construites à partir des balises que chacun lit.
- Passez les contrôles en revue. Les erreurs cassent les aperçus ; les avertissements les dégradent sur certaines plateformes ; les remarques relèvent des bonnes pratiques. Chacune indique ce qu’il faut changer.
- Corrigez et revérifiez. La zone Balises suggérées vous donne un bloc de balises prêt à modifier, avec vos valeurs actuelles déjà renseignées.
- Actualisez le cache des plateformes après avoir déployé la correction (voir plus bas), sinon les anciens partages garderont l’ancien aperçu.
Pour un site de préproduction, une page derrière une connexion ou tout ce qui se trouve sur localhost, passez à l’onglet Coller du HTML : collez le code source de la page et les mêmes contrôles s’exécutent dans votre navigateur.
Les balises Open Graph dont chaque page a besoin
Open Graph est le protocole derrière la plupart des aperçus de liens. Il déclare quatre propriétés obligatoires pour chaque page (ogp.me, en anglais), et LinkedIn cite le titre, l’image, la description et l’URL parmi les balises qui doivent exister pour ses aperçus de partage (aide LinkedIn).
| Balise | Rôle | Conseil |
|---|---|---|
og:title | Le titre de la carte. Obligatoire. | Écrivez-le pour un fil d’actualité, pas pour la recherche : il n’a pas besoin du nom de votre marque. |
og:type | Le type d’objet, par exemple website ou article. Obligatoire. | Utilisez article pour les articles : cela débloque les balises article:*. |
og:image | L’image d’aperçu. Obligatoire. | Utilisez une URL https:// complète ; renseignez aussi la largeur, la hauteur et le texte alternatif. |
og:url | L’URL canonique de l’objet, utilisée comme identifiant permanent. Obligatoire. | Alignez-la sur votre <link rel="canonical">. |
og:description | Une ou deux phrases sous le titre. Facultative dans le protocole, exigée par LinkedIn. | Dites ce que le lecteur y gagne, pas ce qu’est la page. |
og:site_name | Le nom de l’ensemble du site. | Affiché au-dessus du titre dans de nombreuses messageries. |
og:image:alt | Une description de l’image. Le protocole indique qu’une page qui précise og:image devrait aussi la préciser. | Décrivez l’image, pas la page. |
og:image:width / og:image:height | Dimensions de l’image en pixels. | Facebook demande de les indiquer pour que l’image se charge correctement dès le premier partage du lien. |
og:locale | La langue et la région du contenu, par exemple fr_FR. | Facebook la recommande avec og:type. |
Si une balise apparaît deux fois, la première l’emporte : en cas de valeurs contradictoires, le protocole donne la préférence à la première balise, de haut en bas. Les doublons viennent généralement d’un thème et d’une extension SEO qui écrivent tous deux des balises : le vérificateur les signale.
Les balises de carte Twitter (X)
X lit ses propres balises twitter:* et se rabat sur Open Graph pour la plupart d’entre elles, d’après la référence du balisage des cartes de X (documentation développeur de X, archivée) :
twitter:card: le type de carte,summary(petite image carrée) ousummary_large_image(image large). En son absence, siog:type,og:titleetog:descriptionexistent, une carte résumé peut être affichée.twitter:title: 70 caractères au maximum ; se rabat surog:title.twitter:description: 200 caractères au maximum ; se rabat surog:description.twitter:image: moins de 5 Mo ; JPG, PNG, WEBP et GIF (première image seulement) ; le SVG n’est pas pris en charge. Se rabat surog:image.twitter:image:alt: jusqu’à 420 caractères ; se rabat surog:image:alt.
En pratique, Open Graph plus une ligne, <meta name="twitter:card" content="summary_large_image">, suffit pour X.
Taille d’og:image : ce que demande chaque plateforme
| Plateforme | Exigence documentée |
|---|---|
| Minimum 1 200 × 627 px, ratio recommandé 1,91:1, poids maximal 5 Mo (aide LinkedIn) | |
Au moins 1 080 px de large pour un affichage optimal sur les appareils haute résolution ; renseigner og:image:width et og:image:height (bonnes pratiques de partage de Meta) | |
| X : carte à grande image | Ratio 2:1, minimum 300 × 157, maximum 4 096 × 4 096 px, moins de 5 Mo (documentation X, archivée) |
| X : carte résumé | Ratio 1:1, minimum 144 × 144, maximum 4 096 × 4 096 px, moins de 5 Mo, recadrée en carré (documentation X, archivée) |
Une seule image peut satisfaire tout le monde : 1 200 × 630 pixels, PNG ou JPEG, moins de 5 Mo. Elle dépasse le minimum de LinkedIn et la recommandation de largeur de Facebook, se situe autour de 1,91:1, et X la recadre légèrement pour sa grande carte 2:1. Gardez le texte et les logos à l’écart des bords pour que le recadrage ne les coupe pas. X demande aussi une image propre à chaque page plutôt qu’un logo de site générique, une règle de bon sens partout.
Pourquoi l’aperçu de votre lien est faux, et comment le corriger
L’ancienne image ou l’ancien titre s’affichent toujours
Les plateformes mettent les aperçus en cache. Facebook met les images en cache par URL et ne les met à jour que si l’URL change (Meta pour les développeurs) : envoyez donc une image modifiée sous un nouveau nom de fichier, puis passez la page dans ledébogueur de partage, qui déclenche une nouvelle exploration. Sur LinkedIn, utilisezPost Inspector pour actualiser l’URL.
Aucune image du tout
Consultez le tableau Image d’aperçu ci-dessus. Causes fréquentes : og:image est un chemin relatif, l’image renvoie une erreur 403 ou 404 aux robots (protection contre le téléchargement direct, dossier protégé, règle de CDN), c’est un SVG, ou elle dépasse 5 Mo. LinkedIn précise qu’une image conforme aux exigences peut quand même échouer si le site empêche LinkedIn de la récupérer.
Les balises existent dans le navigateur mais pas ici
Les balises sont probablement ajoutées par JavaScript après le chargement de la page. Les robots lisent le HTML envoyé par le serveur : déplacez donc les balises dans du HTML généré côté serveur ou précompilé. Les applications monopages ont généralement besoin d’un rendu côté serveur ou d’un prérendu pour les aperçus de partage.
C’est la mauvaise page qui s’affiche
Si l’URL redirige, les robots prévisualisent la page finale. Le vérificateur indique le nombre de redirections ; levérificateur de redirection liste chaque étape. Assurez-vous aussi qu’og:url pointe vers la page elle-même et non vers votre page d’accueil : c’est une erreur de modèle très courante.
Balises Open Graph et balises meta SEO
Le <title>, la meta description et le lien canonique s’adressent aux moteurs de recherche ; les balises Open Graph et Twitter s’adressent aux partages. Elles peuvent différer, un titre de partage pouvant être plus percutant qu’un titre de recherche, mais l’URL canonique et og:url doivent concorder, et une directive robots noindex mérite d’être connue avant de promouvoir une page. Le vérificateur les signale toutes, y compris un en-tête HTTP X-Robots-Tag.
Ce que fait le vérificateur de votre URL
Notre serveur demande la page une seule fois, suit jusqu’à huit redirections, lit au plus les 600 premiers Ko (il s’arrête à la fin du <head>), et télécharge le début d’un maximum de deux images d’aperçu pour en lire la taille et le format. Il ne récupère que des adresses http(s) publiques sur les ports standard et refuse les IP privées, locales et de métadonnées cloud, y compris lorsqu’une redirection y mène. Rien n’est conservé. Les cartes d’aperçu chargent ensuite l’image directement dans votre navigateur. Si vous partagez un lien de campagne, construisez-le avec le générateur UTM ; si vous partagez celui de quelqu’un d’autre, retirez d’abord le suivi avec le nettoyeur d’URL.
Questions fréquentes
À quoi sert un vérificateur Open Graph ?
Il récupère une page comme le fait un robot d’aperçu de liens, lit les balises Open Graph (og:*) et les balises de carte Twitter (twitter:*) dans l’en-tête HTML, et montre l’allure qu’aura un lien partagé. Celui-ci télécharge aussi l’image d’aperçu pour contrôler son format, ses dimensions en pixels et son poids, et liste chaque balise manquante ou invalide avec la correction à apporter.
Quelles balises Open Graph sont obligatoires ?
Le protocole Open Graph désigne quatre propriétés obligatoires : og:title, og:type, og:image et og:url. LinkedIn précise que og:title, og:image, og:description et og:url doivent exister pour ses aperçus : en pratique, renseignez les cinq, ainsi que og:image:alt pour l’image.
Quelle taille doit avoir mon og:image ?
Il n’existe pas de taille officielle unique. LinkedIn demande au moins 1 200 × 627 pixels, au ratio 1,91:1 et sous 5 Mo. Facebook recommande des images d’au moins 1 080 pixels de large. La carte à grande image de X utilise un ratio 2:1, avec un minimum de 300 × 157 et une limite de 5 Mo. Un PNG ou un JPEG de 1 200 × 630 sous 5 Mo répond à tout cela.
Pourquoi Facebook ou LinkedIn affichent-ils encore mon ancien aperçu ?
Les plateformes mettent les aperçus de liens en cache. Facebook met les images en cache par URL et ne les actualise pas tant que l’URL ne change pas : publiez donc l’image mise à jour sous un nouveau nom de fichier, puis passez la page dans le débogueur de partage de Facebook pour déclencher une nouvelle exploration. L’outil d’inspection des publications de LinkedIn fait la même chose pour LinkedIn.
Faut-il des balises de carte Twitter si j’ai déjà des balises Open Graph ?
X se rabat sur Open Graph pour la plupart des champs : twitter:title se rabat sur og:title, twitter:description sur og:description et twitter:image sur og:image. Sans twitter:card, X peut quand même afficher une petite carte résumé à partir d’og:type, og:title et og:description. Ajoutez twitter:card avec la valeur summary_large_image si vous voulez la disposition à grande image.
Le vérificateur exécute-t-il JavaScript ?
Non. Il lit le HTML renvoyé par le serveur, comme la plupart des robots d’aperçu de liens. Si vos balises n’apparaissent qu’après l’exécution de JavaScript côté client, elles seront absentes ici, et probablement aussi dans les vrais partages. Générez-les côté serveur ou à la compilation.
Puis-je vérifier une page de préproduction ou en localhost ?
Pas par URL : par sécurité, le vérificateur ne récupère que des adresses publiques et bloque les IP privées, locales et de métadonnées cloud. Utilisez plutôt l’onglet Coller du HTML : collez le code source de la page, elle est analysée entièrement dans votre navigateur, et les tailles d’image sont mesurées en local.
Les aperçus sont-ils exactement ceux que chaque plateforme affichera ?
Non, ce sont des approximations, construites à partir des balises que chaque plateforme documente. Chaque réseau applique sa propre mise en page, son propre recadrage, sa propre troncature et son propre cache, et les modifie au fil du temps. Servez-vous des aperçus pour repérer les images manquantes et les mauvais titres, puis confirmez avec le débogueur de la plateforme avant un lancement important.
