Le pire moment pour découvrir un aperçu du lien brisé est après le tweet de lancement. Vous passez une semaine sur une page, vous écrivez l'annonce, vous appuyez sur Envoyer - et la carte qui apparaît est un rectangle gris avec un titre tronqué et aucune image, car og:image pointu du doigt /images/og.png au lieu de https://yoursite.com/images/og.png. Le poste est déjà sorti. La carte est déjà mise en cache. Vous pouvez le réparer, puis demander à tout le monde de partager.
Un aperçu du graphe ouvert résout cela en déplaçant la vérification plus tôt. Au lieu de publier et d'espérer, vous regardez ce que sera la carte alors que les balises sont encore modifiables. C'est tout le principe de la Ouvrir un aperçu du graphique Outil : entrez vos balises ou collez celles que vous avez déjà, et consultez les cartes approximatives de Facebook, X, LinkedIn, Slack et Discord, avec un verdict de réussite/d'avertissement/échec sur chaque champ.
La raison pour laquelle un seul aperçu ne suffit pas est que chaque plate-forme lit les mêmes balises et les rend différemment. X tronque les descriptions à environ 110 caractères, Facebook montre plus près de 155. LinkedIn dépose fréquemment la description et affiche uniquement l'image, le titre et le domaine. Slack s'effondre le tout dans un accessoire compact avec un rail coloré. Discord intègre la description en évidence, mais réduit l'image. Un titre qui s'intègre parfaitement dans une carte Facebook peut être coupé au milieu du mot sur X, et vous ne le remarquerez jamais à moins de regarder les deux.
je construis toolz.dev Et expédier constamment les pages, et j'en ai eu assez de la boucle Publish-Check-Fix. L'outil s'exécute entièrement dans le navigateur et n'effectue aucun appel réseau - il ne récupère jamais votre URL, ce qui signifie qu'il fonctionne également pour les pages qui ne sont pas encore déployées, que vous vous asseyez derrière une connexion ou en direct sur un domaine de transfert que les débogueurs de plate-forme officiel ne peuvent pas atteindre.
tl;dr : Les balises ouvertes du graphe contrôlent l'apparence de votre lien lorsqu'il est partagé. Chaque plateforme lit la même chose
og:Balise mais tronque et les expose différemment, donc la prévisualisation d'une plate-forme ne vous dit rien sur les autres. le Ouvrir un aperçu du graphique L'outil rend cinq cartes de plate-forme à partir d'un ensemble de balises, valide chaque champ en fonction des limites actuelles de la plate-forme, analyse un bloc de balises existant si vous en avez déjà une et vous remet un copie-reprêt<meta>Bloquer — tout côté client, sans éraflures et sans téléchargement.
Principales caractéristiques
Cinq aperçus de plates-formes à partir d'un ensemble de balises
L'outil rend les cartes approximatives pour Facebook, X dans les deux summary_large_image et summary Styles, LinkedIn, Slack et Discord. Ils lisent tous les mêmes champs, donc lorsque vous coupez un titre, vous le regardez mettre à jour partout à la fois. Le point n'est pas une fidélité parfaite au pixel près - les plates-formes repensent leurs cartes sans avertissement - mais la fidélité relative : des proportions correctes, des points de troncature corrects, des ordres de champ corrects, afin que vous puissiez voir quelle plate-forme est celle qui se brise.
Coller et analyser les balises que vous avez déjà
Si la page existe, vous souhaitez rarement retaper neuf champs. Coller le HTML brut — un tout <head>, un vidage de la source de vue ou un bloc lâche de <meta> Lignes - dans la boîte d'analyse et l'analyseur intégré extrait chaque og: et twitter: TAG Il les reconnaît et les charge dans le formulaire. L'analyseur est basé sur la regex plutôt que sur le DOM, ce qui permet au même code de s'exécuter dans un navigateur, dans le nœud et dans la génération de bureau sans modification.
Validation par champ avec des limites réelles
Chaque champ obtient un statut de réussite, d'avertissement ou d'échec. Un titre d'environ 60 caractères échoue. Une description entre 110 et 155 caractères avertit, car elle se lit entièrement sur Facebook et LinkedIn mais est coupée sur X. Un parent og:image Le chemin échoue carrément - les scrapers ne les résolvent pas. un og:image Servi sur nature http Avertit, car plusieurs plates-formes refusent de rendre des images non HTTPS. un twitter:site Une valeur qui n'est pas un descripteur valide échoue. Les verdicts sont suffisamment spécifiques pour agir plutôt qu'un "semble" générique.
Les règles d'image que vous pouvez réellement suivre
Les cartes à grande image sur chaque grande plate-forme supposent une image 1,91:1 ; 1 200 x 630 pixels correspondent à la taille qui leur satisfait toutes à la fois. L'outil indique explicitement que la cible indique les modes de défaillance qui font disparaître les images en silence, et, parce qu'une carte avec une image cassée est le bogue graphique ouvert le plus courant, rend votre effectif réel. og:image URL Dans chaque aperçu, retomber sur un espace réservé clair si l'image ne peut pas se charger.
Un bloc de méta-prestation prêt à copier, correctement échappé
La sortie générée est un bloc de balises complet, pas un fragment. il comprend og:image:width et og:image:height, qui comptent plus que la plupart des gens ne le pensent : sans eux, certains grattoirs rendent une carte texte uniquement sur le premier extraction et ne montrent l'image qu'après l'avoir téléchargée et mesurée, ce qui peut être plusieurs heures plus tard. Les valeurs sont évacuées en HTML, donc un esperlu ou un devis dans votre description ne peut pas sortir de l'attribut et corrompre votre balisage.
100% côté client, sans raclage
L'outil ne demande jamais votre URL. Ceci est délibéré et il vaut la peine de comprendre pourquoi : un navigateur ne peut pas récupérer une page tierce arbitraire en raison de la même politique d'origine, et un extraction côté serveur signifierait envoyer vos URL inédites aux journaux de quelqu'un d'autre. Travailler à partir des balises que vous fournissez évite les problèmes et déverrouille le cas que les débogueurs officiels ne peuvent pas signifier, ce qui valide une page qui n'est pas encore en ligne. examiner Confidentialité des données dans les outils en ligne pour le raisonnement plus large.
Comment utiliser l'outil Open Graph Preview
Étape 1 : Chargez vos balises
Vous avez deux chemins. Si vous écrivez des métadonnées à partir de zéro, remplissez le formulaire : og:title, og:description, og:image, og:url, og:site_name, puis choisissez un og:type et un twitter:card style et ajoutez votre twitter:site et twitter:creator Poignées.
Si la page contient déjà des balises, collez-les à la place. Ouvrez la page, View Source (pas l'inspecteur de navigateur - plus sur cette distinction ci-dessous), copiez le <head>, et déposez-le dans la boîte d'analyse. Cliquez sur Parse tags et tout ce qui est reconnu est chargé dans le formulaire. L'analyseur comprend également les alias : og:image:secure_url et og:image:url Les deux alimentent le champ d'image, et twitter:title, twitter:description, et twitter:image sont utilisés comme repli lorsque leur og: Les équivalents sont absents, ce qui reflète la façon dont les plates-formes elles-mêmes résolvent les balises.
Étape 2 : Lisez le panneau de validation
La liste de validation est ordonnée de la manière dont les champs comptent. Correction des échecs en premier : une manquante og:image, un chemin d'image relatif, un titre de 20 caractères au-dessus de la limite. Ensuite, regardez les avertissements, qui concernent principalement l'écart entre les plates-formes - une description qui convient à Facebook mais à long pour X, une manquante og:site_name Cela signifie que votre carte affiche un nom d'hôte nu au lieu de votre marque.
Les compteurs en haut du panneau vous permettent de lire rapidement. Zero échoue et quelques avertissements sont un état parfaitement expédiable ; les avertissements sont des compromis, pas des bogues.
Étape 3 : Comparez les cartes
C'est le pas que les gens sautent, et c'est celui qui attrape les vrais problèmes. Scannez les six aperçus. Le titre est-il coupé sur la carte de résumé X ? La description disparaît-elle sur LinkedIn (ce qui est généralement le cas - c'est prévu) ? L'image semble-t-elle juste à 1,91:1, ou votre logo est-il recadré parce que vous avez conçu un graphique carré et que la carte la rend large ?
Coupez et vérifiez jusqu'à ce que chaque carte soit lue proprement. Une discipline utile : écrivez à la contrainte la plus stricte. Si votre description est entièrement lue à 110 caractères, elle se lit entièrement partout. Si votre titre fonctionne à 55 ans, il survit à chaque carte et à chaque disposition mobile.
Étape 4 : Copiez le méta-bloc et expédiez-le
Copiez le bloc généré dans votre page <head>. Dans un cadre - next.js, nuxt, sveltekit, astro - vous ne collerez pas RAW <meta> balises, mais le bloc est toujours votre source de vérité pour les champs à remplir exactement dans l'API de métadonnées du framework.
Ensuite, faites la démarche que tout le monde oublie : re-grattez l'URL dans le débogueur de chaque plate-forme. Expédition Le correctif n'efface pas la carte mise en cache. le Générateur de balises est l'outil complémentaire ici si vous avez également besoin des balises standard de référencement - titre, description, canoniques, robots - qui vivent avec les balises sociales.
Comment fonctionne réellement le protocole Open Graph
Open Graph a commencé sur Facebook en 2010 afin de transformer une page Web en un nœud dans un graphe social. L'ambition s'est estompée; le vocabulaire de tag est resté, et c'est désormais la norme de facto que Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, iMessage, Signal et la plupart des autres logiciels de déploiement de liens lisent.
Le mécanisme est simple. Lorsqu'un lien est partagé, la plateforme envoie un bot à votre URL — facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbot. Ce bot demande le code HTML brut, lit le <head>, extrait le og: et twitter: Meta balises et construit une carte. Il s'agit d'un seul HTTP GET et d'une analyse. Le bot n'est pas un navigateur : la plupart de ces robots d'exploration n'exécutent pas JavaScript, qui est la cause première de tout un genre de bogue.
Les balises elles-mêmes
Quatre balises sont décrites comme requis par le protocole : og:title, og:type, og:image, et og:url. en pratique og:description et og:site_name sont également porteurs de charge, car sans eux, la carte est nue ou retombe sur le texte que le racleur peut trouver sur la page. Les balises utilisent le property attribut, non name — <meta property="og:title" content="..." /> — qui fait trébucher les gens parce que les balises Twitter font le contraire et utilisent name. La plupart des analyseurs pardonnent à ce sujet, mais les propres validateurs ne le sont pas toujours, il vaut donc la peine de faire les bons.
OG : Versus Twitter : Priorité
X lit les balises de la carte Twitter en premier et retombe sur le graphique ouvert lorsqu'ils sont absents. Cela signifie une page avec uniquement og:title, og:description, et og:image produit toujours une carte X fonctionnelle - le repli est par conception.
Alors, qu'est-ce qui a réellement besoin d twitter: étiquette ? Trois choses. twitter:card Décide la mise en page, et il n'y a pas d'équivalent ouvert : sans lui, X choisit un style de carte en fonction de ce qu'il trouve, ce qui n'est pas une décision que vous souhaitez déléguer. twitter:site Attribue la carte à un compte de marque. twitter:creator crédite l'auteur. Tout le reste peut provenir en toute sécurité du graphique ouvert.
La règle pratique : rédiger des balises de graphe ouvertes complètes, puis ajouter exactement ces trois twitter: balises. duplication twitter:title et twitter:description est sans danger mais inutile à moins que vous ne vouliez vraiment une copie différente sur X qu'ailleurs - ce qui est parfois un choix légitime, car la troncature plus stricte de X justifie parfois une description plus courte et plus percutante.
Dimensions de l'image, ratios et problème de recadrage
Le format d'aspect 1,91:1 est le nombre à intérioriser. 1200x630 pixels le frappe, est suffisamment grand pour les écrans Retina, et c'est ce que Facebook, LinkedIn et X rendent tous sans distorsion pour les cartes à grande image.
Le mode de défaillance est subtil : les plates-formes ne rejettent généralement pas une image hors rapport, elles la recadrent. Téléchargez un graphique carré 1000x1000 et Facebook le recadrera à 1,91:1, ce qui tranche environ un tiers du haut et du bas. Si le texte de votre titre était centré verticalement, il survit ; si vous placez un logo en haut, ce n'est pas le cas. Conservez un contenu significatif à l'intérieur d'une zone sûre et loin des bords, car différentes surfaces se coupent de manière légèrement différente.
le compact x summary La carte est l'exception. Il veut une image carrée, minimum 144x144, et il centrera une bannière de 1,91:1 dans un carré, ce qui la détruit généralement. Si vous utilisez délibérément summary, fournissez une image carrée ; si vous fournissez une bannière, utilisez summary_large_image.
Conservez la taille du fichier sous environ 5 Mo (plafonnier documenté de Facebook ; les autres plates-formes sont plus strictes en pratique), servent de PNG, JPEG ou WebP, et utilisent toujours une URL HTTP absolue. Chemins relatifs et relatifs au protocole // Les URL sont les deux façons les plus courantes d'une image qui ne parvient pas à apparaître silencieusement.
Pourquoi le cache des racleurs et comment casser le cache
Chaque plate-forme met en cache le résultat de la suppression de votre page, généralement pendant environ sept jours, parfois plus longtemps. Ce n'est pas un entêtement : un lien populaire peut être partagé des milliers de fois par heure, et la récupération de votre page pour chaque partage serait une attaque par déni de service menée par la plate-forme. Alors ils grattent une fois et réutilisent.
La conséquence est que la correction de vos balises ne répare pas la carte. L'ancien aperçu persiste pour chaque partage existant et pour les nouveaux partages jusqu'à ce que le cache expire. Pour forcer un rafraîchissement :
- Facebook : Le débogueur de partage, en utilisant à nouveau le bouton "gratter". Cela efface également le cache utilisé par Instagram et WhatsApp.
- LinkedIn : L'inspecteur des postes. La saisie de l'URL déclenche une nouvelle éraflure.
- X : Le validateur de cartes a été obsolète et l'accès est incohérent. En pratique, la publication du lien est le seul rafraîchissement fiable.
- slack : Les caches UNFURL expire eux-mêmes ; l'ajout d'un paramètre de requête inoffensif produit immédiatement un nouveau déploiement.
- Discorde : Similaire : une chaîne de requête modifiée est la solution de contournement pratique.
Cette astuce de chaîne de requête est la trappe universelle d'échappement : https://example.com/page?v=2 est, à un scraper, une URL différente sans entrée mise en cache. Utilisez-le pour les tests, et non pour le lien canonique que vous publiez réellement, et conservez og:url pointant vers l'adresse canonique propre afin que les parts de variantes paramétrées se consolident correctement. le Encodeur/décodeur d'URL est pratique lorsque ces paramètres deviennent compliqués.
Que se passe-t-il lorsque des balises sont manquantes
Les grattoirs se replie et les replis sont pires que vous ne le souhaiteriez.
non og:title Et ils utilisent le <title> Tag - qui est généralement écrit pour les résultats de recherche et se termine souvent par un tuyau et votre nom de marque, lisant maladroitement comme titre de carte. non og:description Et ils utilisent la méta description, ou grattent le texte du corps, qui peut extraire une bannière de cookies ou une étiquette de navigation. non og:image Et la plupart des plates-formes affichent une carte uniquement texte, bien que certains recherchent une image de la page et peuvent trouver un logo, un avatar ou un pixel de suivi. non og:url et l'adresse partagée est utilisée telle quelle ?utm_source=twitter Les variantes sont traitées comme des pages distinctes et votre partage compte un fragment.
Il y a une autre classe de pannes qui vaut la peine d'être nommée, car elle est invisible dans le débogage normal : Tags injectés par JavaScript côté client. Si vos balises méta sont définies par React après hydratation, l'inspecteur de navigateur les montre parfaitement et le scraper ne voit rien, car le scraper n'a jamais exécuté votre javascript. Vérifiez toujours avec View-Source ou curl, qui montrent le code HTML brut que le serveur a réellement renvoyé, et non le DOM après le démarrage de votre application. Il en va de même pour les pages qui renvoient un 401, une redirection de connexion ou un 403 de blocage de bots vers des requêtes non authentifiées : le scraper obtient la page d'erreur, et non votre contenu.
Cas d'utilisation courants
Validation avant lancement
Le cas de base. Avant la mise en ligne d'une page, collez les balises que vous souhaitez envoyer et confirmez chaque rendu de carte. C'est la seule chose que les débogueurs de la plate-forme officielle ne peuvent pas faire, car ils doivent récupérer une URL en direct. Une vérification de pré-lancement coûte trente secondes et enregistre la repartition du jour de lancement.
Déboguer une carte cassée
Un lien est mal déployé et vous devez savoir pourquoi. Collez les balises actuelles de la page, lisez le panneau de validation, et la cause est généralement immédiate : un chemin d'image relatif, un http image, une description deux fois la limite, une manquante twitter:card. Correction, rayez-le de nouveau dans le débogueur de la plate-forme, terminé.
Auditer les métadonnées d'un site à grande échelle
Travailler sur une page de site par page, en collant chaque <head> Et en lisant le verdict, la dérive qui s'accumule sur n'importe quel projet multi-contributeur : une page a des balises Twitter et une autre, une description est de 300 caractères, trois pages partagent le même générique og:image. L'outil devient un contrôle de cohérence rapide plutôt qu'une estimation par page.
Conception de l'image de partage
Lorsque vous choisissez ou commandez un og:image, l'aperçu vous montre ce que le recadrage lui fait réellement dans une carte large par rapport à une carte carrée. Les concepteurs remettent régulièrement un magnifique graphique carré qui est masqué par une récolte 1,91: 1; vu qu'avant son expédition, il est moins cher que de le voir après.
Écriture de la copie à la contrainte la plus stricte
Parce que les aperçus montrent la troncature de X à côté de Facebook, ils transforment une limite de caractère abstrait en quelque chose de visible. Écrire une description qui lit entièrement en 110 caractères est une discipline beaucoup plus facile à tenir lorsque vous pouvez voir les points de suspension apparaître lorsque vous tapez. le générateur de limace Couvre le travail voisin de produire l'URL propre qui og:url devrait pointer vers.
Travail sur la mise en scène ou derrière une connexion
Les outils internes, le travail client sous NDA et les pages derrière un mur d'authentification sont tous inaccessibles aux débogueurs de plate-forme. Étant donné que l'outil fonctionne à partir de balises plutôt qu'à partir d'un extraction, il les gère de manière identique à une page publique.
Comparaison de plateforme
Orientation actuelle la plus connue. Les plates-formes modifient ces chiffres sans annonce, et les points de troncature sont mesurés en pixels plutôt qu'en caractères - un titre plein de clips larges plus tôt qu'un rempli de clips étroits. Traitez-les comme des cibles sûres, pas comme des spécifications.
| plate-forme | Image recommandée | proportion | Titre affiché | Description affichée | notes |
|---|---|---|---|---|---|
| 1200x630 | 1.91:1 | ~ 60 caractères | ~155 caractères | Minimum 200x200; images hors rapport centraux | |
| X / Twitter (grand) | 1200x628 | ~1.91:1 | ~ 60 caractères | ~110 caractères | exige twitter:card=summary_large_image |
| X / Twitter (résumé) | 800x800 | 1:1 | ~ 50 caractères | ~ 90 caractères | Minimum 144x144 ; image carrée requise |
| 1200x627 | ~1.91:1 | ~ 100 caractères | Souvent caché | Description Fréquemment retiré de la carte | |
| se relâcher | 1200x630 | 1.91:1 | ~ 60 caractères | ~140 caractères | Pièce jointe compacte ; le cache de dérouler expire seul |
| discorde | 1200x630 | 1.91:1 | ~ 60 caractères | ~ 160 caractères | Rend la description en évidence, l'image plus petite |
La cible de la table est la cible de la conception : une image 1 200 x 630, un titre à ou moins de 55 à 60 caractères, et une description qui atterrit sous 110 vous donne une carte qui se rend partout correctement sans réglage de la plate-forme.
FAQ
Quelle est la taille correcte de l'image du graphique ouvert ?
Utilisez 1 200 x 630 pixels - un rapport de 1,91:1. Cela satisfait Facebook, LinkedIn, X, Slack et Discord simultanément pour les cartes à grande image, et est suffisamment grand pour rester net sur les écrans haute densité. Gardez le fichier sous environ 5 Mo, servez-le sur HTTPS sur une URL absolue et gardez le texte important à l'écart des bords, car les surfaces sont rognées de manière légèrement différente. Pour une carte de synthèse compacte X, fournissez plutôt une image carrée d'au moins 144 x 144.
Pourquoi mon aperçu de lien affiche-t-il toujours l'ancienne image après avoir corrigé les balises ?
Parce que la plate-forme a mis en cache le résultat de son éraflure antérieure, généralement pendant environ une semaine. La mise à jour des balises n'invalide pas ce cache. Forcez un nouveau Fetch à travers le débogueur de la plate-forme - le bouton de débogueur de partage de Facebook à nouveau le bouton de grattage ou l'inspecteur de poste LinkedIn. Pour Slack et Discord, l'ajout d'un paramètre de requête à l'URL produit immédiatement un aperçu non mis en cache, ce qui est le moyen le plus rapide de vérifier un correctif.
Ai-je besoin à la fois d'OG : et de Twitter :
X revient à Open Graph lorsque les équivalents Twitter sont manquants, donc une page avec og: Tags produit une carte X en état de marche. Ce que Open Graph ne peut pas exprimer, c'est la mise en page de la carte, vous devez donc toujours ajouter twitter:card Pour choisir entre la grande bannière et le résumé compact, plus twitter:site et twitter:creator pour attribuer la carte. Ces trois balises de graphes ouvertes complètes sont la combinaison efficace.
Combien de temps doit durer og:title et og:description?
observer og:title à ou moins de 60 caractères. pour og:description Les plateformes divergent : X affiche environ 110 caractères, Facebook et LinkedIn se rapprochent de 155 à 200. Écrire à la limite de x plus serrée signifie que la description est entièrement lue partout. Le texte au-delà de la limite n'est pas perdu, juste caché derrière une ellipse, alors chargez les mots qui comptent.
Pourquoi mon aperçu est-il vide ou n'affiche-t-il que l'URL ?
Les causes habituelles, dans un ordre approximatif de fréquence : og:image est un chemin relatif plutôt qu'une URL absolue ; l'image est diffusée sur un http; les balises sont en dehors du <head>; les balises sont injectées par JavaScript côté client que le scraper n'exécute jamais, ou la page renvoie un statut non 200 ou une redirection de connexion vers le bot. Vérifiez le code HTML brut avec View-Source ou curl Plutôt que l'inspecteur du navigateur - l'inspecteur montre le DOM après l'exécution de JavaScript, ce qui n'est pas ce que voit le scraper.
Cet outil récupère-t-il mon URL pour lire les balises ?
non . Il n'effectue aucune demande de réseau. Cela fonctionne à partir des balises que vous tapez ou collez, et tout est analysé et rendu dans votre navigateur. Les navigateurs ne peuvent pas récupérer des pages tierces arbitraires à cause de CORS, et un rampe serveur signifierait envoyer vos URL inédites ailleurs. Le compromis est que vous fournissez les balises - et l'avantage est que les pages sur localhost, sur la mise en scène ou derrière une connexion fonctionnent exactement comme les pages publiques.
Puis-je prévisualiser une page qui n'a pas encore été publiée ?
Oui, et c'est la principale raison d'utiliser ce débogueur plutôt qu'un débogueur de plate-forme. Les débogueurs officiels doivent récupérer une URL en direct, afin qu'ils soient inutiles avant le déploiement. Vous collez ici les balises que vous souhaitez envoyer, à partir de votre modèle, de votre objet de métadonnées de framework ou d'une génération locale, et les prévisualisations sont immédiatement rendues.
Les balises ouvertes de graphes aident-elles à mon classement de recherche ?
pas directement. Ils sont lus par les plateformes de chat et de chat, non utilisés comme facteur de classement par les moteurs de recherche. Ce qu'ils influencent, c'est le taux de clics sur chaque part de votre lien, qui génère du trafic et, indirectement, des signaux qui comptent. Considérez-les comme une optimisation de la conversion pour les liens partagés plutôt que comme un levier SEO. Pour les balises qui affectent votre extrait de recherche, utilisez le Générateur de balises.
