Pourquoi mon aperçu de lien affiche-t-il l'ancienne image après avoir mis à jour les balises ?

Chaque plate-forme majeure met en cache le résultat de la suppression de votre page, souvent pendant une semaine ou plus, donc un lien que vous avez partagé avant que le correctif ne continue d'afficher la carte obsolète. La mise à jour des balises n'invalide pas ce cache d'elle-même. au sujet de -Scrap l'URL dans le débogueur de la plate-forme - le débogueur de partage de Facebook, l'inspecteur de poste LinkedIn ou en repartant dans Slack - pour forcer un nouveau coup de main. L'ajout d'une chaîne de requête inoffensive à l'URL produit également un aperçu sans cache pour le test.

Ai-je besoin à la fois d'OG : et de Twitter :

Pas toujours, mais il est plus sûr d'inclure les deux. X revient aux balises de graphes ouvertes lorsque les équivalents de Twitter : Équivalents, donc une page avec uniquement OG:Title, OG:Description et OG:Image produira toujours une carte. Ce que vous ne pouvez pas exprimer dans Open Graph, c'est le style de carte : twitter : la carte décide entre la grande bannière et la mise en page compacte du résumé, et Twitter :Site et Twitter : créateur attribuent la carte à vos comptes. Ajoutez ces trois et laissez l'OG : les balises couvrent le reste.

Combien de temps faut-il pour que og:title et og:description?

Gardez OG:Title à ou moins de 60 caractères - la plupart des cartes tronquées au-delà de cela, et étroits les cartes mobiles plus tôt. Pour OG :Description, les limites divergent : X affiche environ 110 caractères, Facebook et LinkedIn se rapprochent de 155 à 200. Si vous écrivez sur le X plus serré, limitez votre description, tout est lue partout. Tout ce qui n'est pas perdu, il est juste caché derrière une ellipse, alors chargez les mots importants.

Pourquoi mon aperçu est-il vide ou n'affiche-t-il que l'URL ?

Les causes habituelles sont une image OG: qui est un chemin relatif plutôt qu'une URL absolue, une image diffusée sur HTTP, des balises placées en dehors du , balises injectées par JavaScript côté client que le scraper n'exécute jamais, ou la page renvoyant un statut non 200 ou une redirection de connexion au scraper. Vérifiez que les balises apparaissent dans le code HTML brut renvoie votre serveur – View Source plutôt que dans l'inspecteur de navigateur, car l'inspecteur affiche le DOM après l'exécution de JavaScript.

Cet outil récupère-t-il mon URL pour vérifier les balises ?

non . Il n'effectue aucune demande de réseau. Cela fonctionne à partir des balises que vous tapez dans le formulaire ou collez-les au format HTML, et tout est analysé et rendu dans votre navigateur. C'est un choix de conception délibéré : les navigateurs ne peuvent pas récupérer des pages tierces arbitraires à cause de CORS, et un storage côté serveur signifierait envoyer vos URL inédites à quelqu'un d'autre. Parce que rien n'est récupéré, vous pouvez valider des pages sur localhost, la mise en scène ou derrière une connexion.

Puis-je prévisualiser une page qui n'est pas encore publiée ?

Oui, et c'est la principale raison d'utiliser un outil comme celui-ci plutôt qu'un débogueur de plate-forme. Les débogueurs officiels doivent récupérer votre URL en direct, afin qu'ils soient inutiles pour une page qui n'est pas déployée. Ici, vous collez simplement 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 aperçus rendent immédiatement, aucun déploiement requis.

Que se passe-t-il si je laisse une étiquette ?

Les grattoirs replient et les replis sont imprévisibles. Sans og:title, ils utilisent généralement la balise , et sans og:description, ils peuvent utiliser la méta description ou le texte du corps. Sans OG:Image, la plupart des plates-formes affichent une carte uniquement texte, bien que certaines puissent saisir une image arbitraire de la page, souvent un logo ou un pixel de suivi. Sans og:url, l'adresse partagée est utilisée telle quelle, ce qui signifie que les paramètres de suivi peuvent fragmenter votre nombre de partages. La définition explicite des balises est le seul moyen de contrôler le résultat.

Le balisage de graphiques ouverts aide-t-il mon classement de recherche ?

pas directement. Les balises de graphes ouvertes sont lues par les plateformes sociales et de chat, non utilisées 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, ce qui génère du trafic et, au fil du temps, des signaux qui comptent. Considérez-les comme une optimisation de conversion pour les liens partagés plutôt que comme un levier de classement SEO.

L'outil Open Graph Preview est-il gratuit et privé ?

Oui. Il est entièrement gratuit sans inscription, et chaque analyse, validation et aperçu se produit dans JavaScript dans votre navigateur. Les titres, les URL et les liens d'images que vous entrez ne sont jamais envoyés sur un serveur, et l'outil continue de fonctionner hors connexion une fois la page chargée.

Aperçu Open Graph

Prévisualisez l'apparence de votre lien sur Facebook, X, LinkedIn, Slack et Discord, validez votre OG : balises et copiez un bloc de méta-méta correct.

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters — displays in full on every platform.
og:description 127 characters — fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters — shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout — exact rendering changes over time.

Facebook