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 du grattage de votre page, souvent pendant une semaine ou plus, donc un lien que vous avez partagé avant que le correctif n'affiche sans cesse la carte périmée La mise à jour des balises n'invalide pas ce cache par elle-même Re-scrapper l'URL dans le débogueur de la plate-forme - le Facebook Sharing Debugger, l'inspecteur de publication LinkedIn, ou en re-partageant dans Slack - pour forcer une nouvelle récupération L'ajout d'une chaîne de requête inoffensive à l'URL produit également un aperçu sans cache pour les tests.

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

Pas toujours, mais il est plus sûr d'inclure les deux X retombe sur les balises Open Graph lorsque les équivalents twitter : manquent, donc une page avec seulement og : title, og : description, et og : image produira toujours une carte Ce que vous ne pouvez pas exprimer dans Open Graph est le style de carte : twitter : card décide entre la grande bannière et la disposition compacte du résumé, et twitter : site et twitter : creator attribuent la carte à vos comptes Ajoutez ces trois et laissez les balises og : couvrir le reste.

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

Gardez og : titre à environ 60 caractères ou moins - la plupart des cartes tronquent au-delà, et les cartes mobiles étroites se coupent plus tôt Pour og : description les limites divergent : X affiche environ 110 caractères, Facebook et LinkedIn montrent plus près de 155 à 200. si vous écrivez à la limite X plus serrée, votre description se lit entièrement partout Tout ce qui n'est pas perdu, il est simplement caché derrière une ellipse, donc chargez en avant 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 servie sur http simple, des balises placées en dehors du , des balises injectées par JavaScript côté client que le grattoir n'exécute jamais, ou la page renvoyant un statut non-200 ou une redirection de connexion vers le grattoir Vérifiez que les balises apparaissent dans le HTML brut que votre serveur renvoie - consultez la source plutôt que l'inspecteur du navigateur, puisque 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 raison principale d'utiliser un outil comme celui-ci plutôt qu'un débogueur de plate-forme Les débogueur officiels doivent récupérer votre URL en direct, ils sont donc inutiles pour une page qui n'est pas déployée Ici vous collez simplement 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 s'affichent immédiatement, aucun déploiement requis.

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

Les grattoirs reculent, et les fallbacks sont imprévisibles Sans og : titre ils utilisent habituellement la balise , et sans og : description ils peuvent utiliser la méta description ou gratter le corps du texte Sans og : image la plupart des plateformes montrent une carte uniquement texte, bien que certains vont 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 Définir explicitement les balises est le seul moyen de contrôler le résultat.

Est-ce que le balisage Open Graph aide mon classement de recherche ?

Pas directement. Les balises Open Graph 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, qui génère du trafic et, au fil du temps, les signaux qui comptent. Traitez-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