DiagramPreview
Analizador básicoSin IAVista localExportarDepuración

Depurador Open Graph

Pega contenido para Depurador Open Graph y genera una vista local revisable para depurar configuración, respuestas de API, archivos SEO y fragmentos generados con AI.

Ejemplos
Social card previewListo
Your social preview will appear here.

Continúa con una herramienta relacionada

Lleva esta vista previa a un flujo cercano para convertir, depurar o exportar.

Vista previa HTML en sandbox

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

Abrir
Vista previa de gradientes CSS

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

Abrir
Vista previa de imagen Base64

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

Abrir

Cómo usar

  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.

Casos de uso

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

Herramientas relacionadas

Vista previa HTML en sandbox

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

Vista previa de gradientes CSS

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

Vista previa de imagen 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 revisión para Depurador Open Graph

Usa Depurador Open Graph para inspeccionar visualmente contenido fuente antes de publicar documentación, notas de PR, incidentes o handoffs. Depurador Open Graph: Previsualiza y depura esta fuente en una superficie local para documentación técnica.

Antes de exportar, revisa legibilidad, relaciones, datos sensibles y si la vista sigue teniendo sentido tras editar la entrada.

Límites y solución de problemas

Si la vista falla, reduce la entrada al ejemplo completo más pequeño, valida la sintaxis y agrega secciones gradualmente.

Trata la vista como superficie de revisión, no como fuente de verdad. Los resultados críticos requieren validación humana.

Entradas de ejemplo

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

Madurez de la herramienta

Analizador básico

Analizador básico

Esta herramienta se centra en inspección rápida de estructura. Úsala para revisar y depurar, y valida lo crítico antes de producción.

La etiqueta indica si la herramienta sirve mejor para exportar, depurar, analizar rápido o generar con AI.