Aperçu Open Graph

Un outil Open Graph Preview vous montre à quoi ressemblera un lien partagé avant de le publier Vous entrez côte à côte vos champs og : titre, og : description, og : image, og : url et Twitter Card - ou collez le bloc de balises méta que vous avez déjà - et l'outil rend côte à côte les cartes sociales approximatives pour Facebook, X/Twitter, LinkedIn, Slack et Discord Au lieu de pousser une page en direct, de la partager et de découvrir que le titre est coupé en deux ou que l'image ne se charge jamais, vous voyez le problème alors que vous pouvez toujours le résoudre.

Le protocole Open Graph est le vocabulaire partagé que presque toutes les plateformes utilisent pour construire ces cartes Un grattoir visite votre page, lit les balises og : meta dans le <head> et assemble un aperçu à partir d'elles. Le problème est que chaque plateforme restitue ces mêmes balises différemment : X tronque les descriptions à environ 110 caractères tandis que Facebook affiche plus près de 155, LinkedIn cache la description entièrement sur certaines surfaces et Slack réduit tout en une pièce jointe compacte. Un champ qui semble bien dans une carte peut être mutilé dans une autre, c'est pourquoi les prévisualiser tous à la fois est le seul contrôle fiable.

Voici un aperçu graphique ouvert avec des nombres réels Définissez og : titre sur « Comment nous coupons notre temps de chargement de page en deux sans réécriture » (55 caractères, une passe) et donnez-lui une description de 125 caractères og : La validation passe le titre et avertit sur la description : très bien pour Facebook et LinkedIn, mais X tronque au-delà d'environ 110. La carte X grande image coupe le texte après « à partir de 4,1 secondes... », tandis que la carte Facebook montre toute la phrase. L'aperçu de l'image graphique ouverte charge votre og : image dans chaque carte, donc un lien cassé montre « L'image n'a pas réussi à charger » avant que quiconque ne le partage.

Cet outil s'exécute côté client et ne récupère ni ne gratte jamais votre page Il fonctionne à partir des balises que vous lui donnez, soit saisies dans le formulaire, soit collées sous forme de HTML brut et analysées localement Cela signifie que vous pouvez valider les métadonnées pour les pages qui sont derrière une connexion, sur un domaine de mise en scène, ou pas déployées du tout La seule demande qu'il fait à votre serveur est de charger l'URL og : image, afin que votre navigateur puisse afficher l'image dans les cartes.