Prévisualisateur Open Graph
EXAMPLE WEBSITE
Exemple de Titre de Page
Ceci est un exemple de description du contenu de la page qui apparaîtrait lors du partage sur les médias sociaux.
https://example.com/page
Exemple de Titre de Page
Ceci est un exemple de description du contenu de la page qui apparaîtrait lors du partage sur les médias sociaux.
example.com
websiteComment utiliser Open Graph Previewer
- 1
Saisissez l'URL d'une page
Collez l'URL complète de la page à vérifier dans le champ URL du site web.
- 2
Récupérez les données OG
Cliquez sur « Récupérer les données OG » pour extraire le titre, la description, l'image et le nom de site Open Graph existants de la page.
- 3
Modifiez manuellement si besoin
Passez en mode Modifier manuellement pour ajuster le titre, la description, l'URL de l'image, le type et d'autres champs, et voir l'aperçu se mettre à jour.
- 4
Prévisualisez et copiez les balises
Examinez les aperçus des cartes Facebook et Twitter, puis copiez les balises meta générées pour les ajouter à votre page.
Le guide de référence d'Open Graph et des aperçus de liens
Ce qu'est le protocole Open Graph
Le protocole Open Graph est un petit ensemble de balises meta, introduit à l'origine par Facebook, qui permet à n'importe quelle page web de se décrire comme un objet riche lorsqu'elle est partagée. Au lieu d'un simple lien bleu, une page dotée de balises Open Graph se transforme en une carte avec un titre, un résumé et une grande image. Les balises résident dans le head de la page et utilisent l'attribut property avec un préfixe og, par exemple og:title et og:image, associé à un attribut content contenant la valeur. Comme la norme a été largement adoptée, ces mêmes balises og pilotent désormais les aperçus sur bien plus que le seul Facebook.
Open Graph concerne uniquement la présentation dans les contextes sociaux et de messagerie. Il n'a aucun effet direct sur le classement de recherche, mais il a un grand effet sur le taux de clic et le partage, car une carte convaincante est cliquée et repartagée, tandis qu'une carte terne ou cassée est dépassée d'un coup de molette.
Les balises Open Graph principales
Cinq propriétés font l'essentiel du travail. og:title est le titre de la carte et peut différer de votre balise title HTML, ce qui vous permet d'écrire une formulation optimisée pour le partage. og:description est la ligne de soutien en dessous. og:image est la miniature, et c'est elle qui porte de loin le plus de poids visuel. og:url est l'URL canonique vers laquelle la carte doit pointer, ce qui consolide les partages sur une seule adresse même lorsque le même contenu est accessible par plusieurs URL. og:type décrit l'objet, généralement website pour une page générique ou article pour un billet de blog ou un article de presse.
Des propriétés supplémentaires affinent le résultat : og:site_name désigne la source, og:locale déclare la langue, et pour les images, og:image:width et og:image:height aident les plateformes à disposer la carte avant que l'image n'ait fini de se télécharger. Les renseigner produit un aperçu plus fiable et au rendu plus rapide.
Les Twitter Cards et la façon dont X lit vos balises
X utilise ses propres balises twitter card, mais il est tolérant : si les balises spécifiques à Twitter sont absentes, il se rabat sur vos balises Open Graph. La balise clé est twitter:card, où summary_large_image produit la disposition à grande image que la plupart des marques recherchent, tandis que summary donne une miniature plus petite à côté du texte. Vous pouvez aussi définir twitter:title, twitter:description, twitter:image et twitter:site pour remplacer les valeurs Open Graph spécifiquement pour X lorsque vous y voulez un texte différent.
En pratique, une bonne stratégie consiste à définir des balises Open Graph complètes pour une large couverture et à n'ajouter que twitter:card pour opter pour la disposition à grande image, en laissant X hériter du reste depuis Open Graph. Cela évite de maintenir deux ensembles de balises quasi identiques tout en obtenant la carte plus riche sur X.
Les exigences d'image qui font ou défont la carte
L'og:image est l'endroit où la plupart des aperçus réussissent ou échouent. La taille largement recommandée est de 1200 sur 630 pixels, un ratio d'environ 1,91 pour 1, qui remplit proprement la carte à grande image sur Facebook, LinkedIn et X sans recadrage. Utilisez une URL absolue, accessible publiquement et commençant par https ; les chemins relatifs comme /images/card.png sont la première raison pour laquelle une miniature n'apparaît tout simplement pas, car le robot d'extraction n'a aucune URL de base pour les résoudre. Gardez le fichier sous quelques centaines de kilooctets et évitez de placer du texte essentiel près des bords, car les différentes plateformes recadrent légèrement différemment.
Chaque plateforme impose aussi ses propres minimums et maximums. Les images trop petites se rabattent sur une minuscule miniature ou aucune image du tout, et les fichiers extrêmement volumineux peuvent être ignorés. S'en tenir à un seul JPEG ou PNG de 1200 sur 630 servi en HTTPS est le choix le plus sûr pour un rendu cohérent partout.
Comment Facebook, LinkedIn, Discord et Slack rendent les aperçus
Lorsqu'un lien est collé dans l'une de ces plateformes, la plateforme envoie son propre robot d'extraction pour récupérer la page et lire le head avant de rendre une carte. Facebook utilise facebookexternalhit, Slack et Discord ont leurs propres robots, et chacun analyse les balises og pour construire l'aperçu. Cela signifie que l'aperçu reflète ce que le robot voit côté serveur, ce qui peut différer de ce que voit un utilisateur connecté, surtout sur les pages qui exigent une connexion ou qui rendent leurs balises meta en JavaScript après le chargement.
Comme le rendu se produit côté robot, deux choses comptent. D'abord, vos balises og doivent être présentes dans le HTML initial que renvoie le serveur, et non injectées plus tard par des scripts côté client que le robot peut ne pas exécuter. Ensuite, la page doit être accessible au robot sans authentification, sinon le robot d'extraction obtient un mur de connexion à la place de votre contenu et l'aperçu revient vide.
Mise en cache, débogueurs et forcer une nouvelle extraction
Les plateformes sociales mettent agressivement en cache l'aperçu qu'elles extraient, parfois pendant des jours. C'est la source de la plainte classique selon laquelle des balises Open Graph mises à jour ne s'affichent pas : la plateforme sert encore la version en cache d'avant votre modification. La solution est d'utiliser l'outil de débogage de la plateforme pour forcer une nouvelle extraction. Le Sharing Debugger de Facebook, le Post Inspector de LinkedIn et le validateur de cartes de X récupèrent tous la page à nouveau et vous montrent exactement quelles balises ils ont analysées, ce qui sert aussi à diagnostiquer pourquoi une carte a un mauvais rendu.
Faites de la nouvelle extraction une partie de votre routine de publication chaque fois que vous modifiez un titre, une description ou une image sur une URL déjà partagée. Sans cela, les premiers partages peuvent figer une carte périmée ou cassée qui persiste longtemps après que la page elle-même est correcte. Ce prévisualisateur vous permet de vérifier les balises avant de publier, pour que moins de corrections soient nécessaires ensuite.
Les erreurs Open Graph les plus courantes
Les échecs récurrents sont prévisibles : une og:image manquante, donc la carte n'a aucune miniature ; une URL d'image relative que le robot ne peut pas résoudre ; une og:image servie en HTTP sur une page par ailleurs en HTTPS (ce que certaines plateformes rejettent) ; et des balises injectées par JavaScript que le robot n'exécute jamais. Une autre erreur fréquente est de laisser og:url pointer vers une URL non canonique ou de préproduction, ce qui éparpille les compteurs de partage et peut envoyer les utilisateurs au mauvais endroit.
Une erreur plus subtile est d'oublier qu'Open Graph et votre extrait de recherche sont distincts. og:title et og:description contrôlent la carte sociale, tandis que la balise title HTML et la meta description contrôlent le résultat Google, et ils n'ont pas besoin d'être identiques. Optimisez chacun pour son contexte : percutant et propre à éveiller la curiosité pour la carte sociale, clair et attentif aux mots-clés pour l'extrait de recherche.
Questions fréquentes
Que sont les balises Open Graph et pourquoi sont-elles importantes ?
Comment fonctionne l'aperçu Facebook et Twitter ?
Puis-je générer des balises sans page existante ?
Pourquoi la récupération d'une URL peut-elle échouer ou ne renvoyer aucune donnée ?
L'outil est-il gratuit et qu'advient-il de l'URL que je saisis ?
Outils similaires
Continuez avec ces outils pratiques