DiagramPreview
BasisparserKeine KILokale VorschauExportDebugging

Open-Graph-Debugger

Füge Inhalte für Open-Graph-Debugger ein und erzeuge eine lokale, prüfbare Vorschau für Konfigurationen, API-Antworten, SEO-Dateien und AI-generierte Snippets.

Beispiele
Social card previewBereit
Your social preview will appear here.

Mit einem verwandten Tool fortfahren

Nutze diese Vorschau im nächsten Workflow zum Konvertieren, Debuggen oder Exportieren.

HTML-Sandbox-Vorschau

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

Öffnen
CSS-Verlaufsvorschau

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

Öffnen
Base64-Bildvorschau

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

Öffnen

Verwendung

  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.

Anwendungsfälle

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

Verwandte Tools

HTML-Sandbox-Vorschau

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

CSS-Verlaufsvorschau

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

Base64-Bildvorschau

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" />

Review-Checkliste für Open-Graph-Debugger

Nutze Open-Graph-Debugger, um Quellinhalte vor Dokumentation, PR-Notizen, Incident-Berichten oder Übergaben visuell zu prüfen. Open-Graph-Debugger: Zeige und debugge diese Quelle lokal für technische Dokumentation.

Prüfe vor dem Export Lesbarkeit, Beziehungen, sensible Daten und ob die Vorschau nach Änderungen weiterhin passt.

Grenzen und Fehlersuche

Wenn die Vorschau fehlschlägt, reduziere die Eingabe auf ein kleines vollständiges Beispiel und füge Abschnitte schrittweise zurück.

Behandle die Vorschau als Review-Fläche, nicht als Quelle der Wahrheit. Kritische Ergebnisse brauchen menschliche Prüfung.

Beispieleingaben

  • 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...

Werkzeugreife

Basisparser

Basisparser

Dieses Werkzeug ist für schnelle Strukturprüfung gedacht. Nutze es zur Prüfung und Fehlersuche, validiere aber kritische Ergebnisse.

Das Label zeigt, ob das Werkzeug eher für stabilen Export, Debugging, schnelles Parsen oder AI-gestützte Generierung gedacht ist.