Vista previa de Open Graph

Cómo usar

1. 1 Pega cualquier URL pública.
2. 2 Pulsa Probar (o Enter). Cargaremos la página y analizaremos las etiquetas meta og:* y twitter:*.
3. 3 Revisa cómo se vería el enlace compartido en Facebook, Twitter / X, LinkedIn y Slack, junto con las advertencias de validación.

Por qué usar esta herramienta

• Cuatro vistas previas de plataformas lado a lado, ajustadas al detalle para reflejar la tarjeta de contenido real.
• Las advertencias de validación te ayudan a detectar etiquetas faltantes, títulos demasiado largos y URLs de imagen que usan HTTP.
• Consulta las etiquetas og:* y twitter:* originales tal como las leen las plataformas.
• Los resultados se guardan en caché durante 10 minutos y se aplica un límite de frecuencia para evitar abusos.

Preguntas frecuentes

¿Qué es Vista previa de Open Graph?

La vista previa de Open Graph (Open Graph Preview) es una herramienta que muestra cómo se verá una URL al compartirla en las redes sociales. La herramienta lee las etiquetas meta Open Graph y Twitter Card de la página y reconstruye la tarjeta de contenido compartido tal como la mostrarían Facebook, Twitter, LinkedIn y Slack, permitiéndote revisar el título, la descripción y la imagen antes de publicar. Funciona completamente en el navegador, sin necesidad de crear una cuenta.

Características

Ejemplo

https://github.com — page HTML with <meta property="og:title" content="GitHub · Build and ship software...">, og:image, og:type="object", and twitter:card="summary_large_image"

JSON: { resolved_url, status: 200, tags: { title, description, canonical, favicon, og: {title, image, url, type, ...}, twitter: {card, title, image, ...} }, warnings: [] } — rendered as four share-card previews (Facebook, Twitter/X, LinkedIn, Slack) plus a raw tag list; result cached 600s per URL

Casos de uso comunes

1. 1

   Control de calidad previo a la publicación

   Revisa la tarjeta de compartir de una entrada de blog o landing page antes de publicarla, detectando un og:image faltante o un og:title demasiado largo.

2. 2

   Depuración de una tarjeta de compartir rota

   Consulta los valores exactos de og:* y twitter:* resueltos que leería una plataforma, incluyendo si og:image se resolvió en una URL HTTPS absoluta.

3. 3

   Comparación entre plataformas

   Compara cómo el título, la descripción y la imagen de la misma URL se degradan de forma distinta entre las vistas previas de Facebook, Twitter/X, LinkedIn y Slack.

Referencias

• The Open Graph Protocol — Open Graph Protocol (ogp.me)
• Sharing for Webmasters (Open Graph tags on Facebook) — Meta for Developers
• Cards Markup Tags (twitter:card meta tags) — X (Twitter) Developer Platform
• <link>: The External Resource Link element (rel="canonical"/"icon") — MDN Web Docs

Herramientas relacionadas