Le pire moment pour découvrir un aperçu de lien cassé 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, parce que 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 ouvrir le graphique preview résout qu'en déplaçant le chèque plus tôt Au lieu de publier et d'espérer, vous regardez ce que sera la carte pendant que les balises sont encore modifiables C'est toute la prémisse du 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édiez des pages constamment, et j'en avais assez de la boucle de publication-contrôle-fix L'outil fonctionne entièrement dans le navigateur et ne fait 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, s'assoient derrière un login, ou vivent sur un domaine de mise en scène que les débogueur officiels de la plate-forme 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>bloc - tout côté client, sans grattage ni 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 à partir des mêmes champs, donc lorsque vous coupez un titre, vous le regardez mettre à jour partout à la fois Le point n'est pas la fidélité parfaite au pixel - les plates-formes repensent leurs cartes sans avertissement - mais la fidélité relative : proportions correctes, points de troncature corrects, ordre correct des champs, afin que vous puissiez voir quelle est la plate-forme qui se casse.
Coller et analyser les balises que vous avez déjà
Si la page existe, vous souhaitez rarement retaper neuf champs Collez 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é retire tout 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 grattoirs 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 plate-forme principale prennent une image 1,91 :1 ; 1200x630 pixels est la taille qui les satisfait tous à la fois L'outil indique que la cible est explicitement indiquée, signale les modes de défaillance qui font disparaître silencieusement les images et - parce qu'une carte avec une image cassée est le bug Open Graph le plus courant - rend votre véritable 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 C'est délibéré, et il vaut la peine de comprendre pourquoi : un navigateur ne peut pas récupérer une page tierce arbitraire à cause de la politique de même origine, et un récupérateur côté serveur signifierait expédier vos URL non publiées à quelqu'un d'autre' ; s journaux Travailler à partir des balises que vous fournissez évite les deux problèmes et déverrouille le cas que les débogueur officiels ne peuvent pas servir - valider une page qui n'est pas encore en ligne Voir 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 a déjà des balises, collez-les à la place Ouvrez la page, consultez la source (pas l'inspecteur du 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 manière 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 20 caractères au-dessus de la limite Puis regardez les avertissements, qui concernent surtout l'écart entre les plateformes - une description qui convient bien à Facebook mais qui aspire à X, un manquant 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 l'étape que les gens sautent, et c'est celle qui attrape les vrais problèmes Scannez les six aperçus Le titre est-il coupé sur la carte récapitulative X ? La description disparaît-elle sur LinkedIn (c'est généralement le cas - c'est attendu) ?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 de brut <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 compagnon ici si vous avez également besoin des balises SEO standard - titre, description, canonique, robots - qui cohabitent 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="..." />- ce qui fait trébucher les gens parce que les tags 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 - la solution de secours est intentionnelle.
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 inoffensif mais inutile à moins que vous ne souhaitiez réellement une copie différente sur X qu'ailleurs - ce qui est parfois un choix légitime, puisque X' ; une troncature plus serrée 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 va centre-croper une bannière 1.91 :1 dans un carré - ce qui généralement la détruit Si vous utilisez délibérément summary, fournissez une image carrée ; si vous fournissez une bannière, utilisez summary_large_image.
Gardez la taille du fichier en dessous d'environ 5 Mo (Facebook' ; plafond documenté ; les autres plates-formes sont plus strictes dans la pratique), servez de PNG, JPEG ou Webpet utilisez toujours une URL HTTPS 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 plateforme met en cache le résultat du grattage de votre page - généralement pendant environ sept jours, parfois plus. Ce n'est pas de l'entêtement : un lien populaire peut être partagé des milliers de fois par heure, et récupérer votre page pour chaque partage serait une attaque par déni de service menée par la plateforme. Ils grattent donc 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 dans un tuyau et votre nom de marque, lisant maladroitement comme un 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 affichent le 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 bloquant les robots aux requêtes non authentifiées : le grattoir obtient la page d'erreur, pas 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
Les conseils actuels les plus connus 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 rempli de larges lettres clips plus tôt qu'un plein de étroites Traitez-les comme des cibles sûres, pas 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 1200x630 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 à une URL absolue et éloignez le texte important des bords puisque les surfaces recadrent de quantités légèrement différentes Pour une carte récapitulative X compacte, fournissez plutôt une image carrée d'au moins 144x144.
Pourquoi mon aperçu de lien affiche-t-il toujours l'ancienne image après avoir corrigé les balises ?
Parce que la plateforme a mis en cache le résultat de sa raclure antérieure, généralement pendant environ une semaine La mise à jour des balises n'invalide pas ce cache Forcer une nouvelle récupération à travers la plateforme' ; s debugger - le bouton Facebook Sharing Debugger' ; s Scrape Again, ou l'inspecteur de poste LinkedIn Pour Slack et Discord, l'ajout d'un paramètre de requête à l'URL produit un aperçu non mis en cache immédiatement, 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 affiche le DOM après l'exécution de JavaScript, ce qui n'est pas ce que voit le grattoir.
Cet outil récupère-t-il mon URL pour lire les balises ?
Non. Il ne fait aucune requête réseau. Il 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 de pages tierces arbitraires à cause du CORS, et un récupérateur côté 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 celles publiques.
Puis-je prévisualiser une page qui n'a pas encore été publiée ?
Oui, et c'est la raison principale d'utiliser cela plutôt qu'un débogueur de plate-forme Les débogueur officiels doivent récupérer une URL en direct, ils sont donc inutiles avant le déploiement Ici vous collez les balises que vous avez l'intention d'expédier - à partir de votre modèle, de votre objet de métadonnées de framework, ou d'une build locale - et les aperçus se rendent immédiatement.
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.
