DiagramPreview
Analyse basiqueSans IAAperçu localExportDébogage

Débogueur Open Graph

Collez du contenu pour Débogueur Open Graph et générez un aperçu local vérifiable pour déboguer configurations, réponses API, fichiers SEO et snippets générés par AI.

Exemples
Social card previewPrêt
Your social preview will appear here.

Continuer avec un outil lié

Envoyez cette prévisualisation vers un workflow proche pour convertir, déboguer ou exporter.

Aperçu HTML en bac à sable

Preview HTML components, email snippets, and landing sections in a script-blocked sandbox.

Ouvrir
Aperçu de dégradé CSS

Preview CSS linear, radial, conic, and repeating gradients with extracted color stops.

Ouvrir
Aperçu d’image Base64

Preview Base64 image strings and data URLs with MIME type and size analysis.

Ouvrir

Comment utiliser

  1. 1Paste the HTML head or a focused metadata snippet.
  2. 2Review og:title, og:description, og:image, twitter:card, and missing tag warnings.
  3. 3Check that image URLs are absolute, publicly accessible, and the right size for social cards.
  4. 4Update the page source, then verify again before submitting the URL to social or search tools.

Cas d’usage

Social card previewLaunch post QATechnical SEO reviewSVG cover publishingAI HTML metadata validation

Outils associés

Aperçu HTML en bac à sable

Preview HTML components, email snippets, and landing sections in a script-blocked sandbox.

Aperçu de dégradé CSS

Preview CSS linear, radial, conic, and repeating gradients with extracted color stops.

Aperçu d’image Base64

Preview Base64 image strings and data URLs with MIME type and size analysis.

FAQ

Why does a social card fail even when meta tags exist?

The image may be relative, blocked, too small, too large, redirected, or inaccessible to external crawlers. Some platforms also cache old metadata.

Which tags should every page have?

At minimum, set title, description, og:title, og:description, og:image, og:url, and twitter:card when social sharing matters.

Can this fetch a live URL?

This preview focuses on pasted markup. It is best used with copied page source or generated HTML before publishing.

Open Graph Preview Debugger checks title, description, image, Twitter card tags, and social share snippets before a page is published or promoted.

It is useful for marketing posts, documentation launches, changelog pages, and AI-written HTML where metadata can look correct in source but fail in link previews.

Use it with robots and sitemap checks so published pages have crawlable URLs, valid cards, and images that can be fetched by external platforms.

Demo: validate a launch page card before sharing

A launch post often fails because the card image exists locally but not on the public site. Preview the HTML head and verify absolute image URLs before posting links.

  • Use a full https URL for og:image, not /og.png.
  • Keep the title concise enough for social previews.
  • Make the description useful even when truncated.
<meta property="og:title" content="DiagramPreview Mermaid Tools" />
<meta property="og:description" content="Preview, fix, and export Mermaid diagrams before publishing docs." />
<meta property="og:image" content="https://diagrampreview.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />

Absolute image URLs are easier for crawlers and social platforms to fetch reliably.

Social preview checklist: debug the card before sharing the URL

Open Graph previews fail in ways that are easy to miss locally: missing absolute image URLs, blocked preview images, stale crawler cache, or titles that are too long once rendered in a social card.

  • Use absolute https URLs for og:image, not relative paths.
  • Keep title and description readable after truncation.
  • Check image dimensions, content type, and crawler accessibility before posting a launch link.
<meta property="og:title" content="Mermaid Preview Online" />
<meta property="og:image" content="https://diagrampreview.com/og/mermaid-preview.png" />

Checklist de revue pour Débogueur Open Graph

Utilisez Débogueur Open Graph pour inspecter visuellement une source avant documentation, note de PR, post-mortem ou transfert. Débogueur Open Graph: Prévisualisez et déboguez cette source localement pour la documentation technique.

Avant export, vérifiez la lisibilité, les relations, les données sensibles et la cohérence après modification.

Limites et dépannage

Si l'aperçu échoue, réduisez l'entrée au plus petit exemple complet, validez la syntaxe puis réajoutez les sections.

Considérez l'aperçu comme une surface de revue, pas comme une source de vérité. Les résultats critiques doivent être validés.

Exemples à tester

  • Article tags: <title>Debug HAR waterfalls before blaming the backend</title> <meta property="og:title" content="Debug HAR waterfalls before blaming the backend" /> <meta property="og:description...
  • Tool page tags: og:title: SVG Code Preview Editor og:description: Paste raw SVG, inspect the rendered output, and export a cleaned SVG. og:image: https://diagrampreview.com/blog/svg-code-preview-e...
  • Product page: <meta name="twitter:title" content="Preview developer scripts before you ship docs" /> <meta name="twitter:description" content="DiagramPreview turns Mermaid, SVG, HAR, JSONPath, N...

Maturité de l'outil

Analyse basique

Analyse basique

Cet outil vise l'inspection rapide de structure. Utilisez-le pour relire et déboguer, puis validez les résultats critiques.

Le libellé indique si l'outil convient surtout à l'export stable, au débogage, à l'analyse rapide ou à la génération AI.