Validateur OGP et balises meta
Collez votre HTML pour valider les balises meta Open Graph (OGP) et Twitter Card. Détecte les balises manquantes et les og:image invalides, avec aperçu de la carte.
Astuces
- La taille recommandée pour og:image est 1200×630px (rapport 1,91:1). Une image trop petite ou avec un mauvais rapport d'aspect peut être recadrée de façon inattendue par les plateformes sociales.
- Les robots de Facebook, LINE et Slack lisent og:title/og:description, tandis que X (Twitter) utilise ses propres twitter:title/twitter:description. Définir les deux garantit un aperçu correct sur toutes les plateformes.
- Si twitter:card est absent, X tentera de se rabattre sur og:title/og:description, mais l'image peut ne pas s'afficher correctement ; mieux vaut donc le définir explicitement.
- Renseignez og:url avec l'URL canonique et absolue (https://) de la page. Cela évite aussi les confusions de contenu dupliqué causées par des URL avec des paramètres de suivi.
- Juste après avoir modifié vos balises meta, les réseaux sociaux peuvent encore afficher un aperçu obsolète mis en cache. Utilisez l'outil de réexploration de chaque plateforme (par exemple le débogueur de partage de Facebook) pour actualiser le cache.
Questions fréquentes
/img/a.png). La plupart des robots ne peuvent pas résoudre les URL relatives ; utilisez donc toujours une URL absolue commençant par https://. Cela peut aussi échouer si votre serveur bloque le User-Agent du robot, ou si l'image est trop petite.<title> est utilisée pour le titre dans les résultats de recherche et l'onglet du navigateur, tandis que og:title est utilisée pour le titre de la carte lors d'un partage sur les réseaux sociaux. De nombreux robots se rabattent sur <title> si og:title est absent, mais le résultat peut ne pas correspondre à ce que vous souhaitiez.summary_large_image est recommandé car il affiche une grande image. Si une petite vignette suffit, utilisez plutôt summary. app et player sont respectivement destinés aux invites d'installation d'application et au contenu vidéo/audio intégré, et ne conviennent pas à une page web classique.<title> et meta description pour générer un aperçu, mais aucune image ne sera affichée, ce qui donne un aperçu sobre composé d'un lien et de texte. Cela affectant le taux de clic, il est conseillé de définir au moins og:title, og:description et og:image.
Anecdote — Pourquoi l'OGP existe — Facebook l'a créé pour faire fonctionner le bouton « J'aime »
L'Open Graph Protocol (OGP) a été créé par Facebook en 2010 pour populariser son bouton « J'aime ». À l'époque, partager une page web sur Facebook n'affichait guère plus qu'un lien nu et un titre, et les taux de clic en pâtissaient. La solution de Facebook a été de permettre à la page elle-même de déclarer son apparence lors d'un partage, en ajoutant un nouvel espace de noms <meta property="og:xxx"> au HTML ordinaire.
Fait intéressant, l'OGP repose sur RDFa, une spécification du W3C permettant d'intégrer des données structurées dans le HTML. En réutilisant une norme existante, Facebook a pu lancer cette nouvelle fonctionnalité sans avoir besoin de la coopération des fabricants de navigateurs ni d'autres entreprises — quelques balises meta supplémentaires sur des pages déjà existantes suffisaient. Cette approche consistant à « étendre sans casser la rétrocompatibilité » a fonctionné, et l'OGP est devenu une norme de facto adoptée bien au-delà de Facebook, sur des plateformes comme Slack, LINE et Discord.
Twitter n'a jamais adopté l'OGP directement ; il a créé son propre espace de noms séparé, Twitter Cards (twitter:xxx). C'était sans doute autant un choix concurrentiel qu'un choix technique — ne pas vouloir simplement adopter une spécification issue de son rival Facebook. Résultat : la plupart des sites doivent encore aujourd'hui dupliquer à la fois les balises og: et twitter:, ce qui explique en partie pourquoi des outils comme ce validateur restent utiles.