ZenovayTools

Vista Previa de Open Graph

Obtén una vista previa de cómo se verá tu página cuando se comparta en Facebook, Twitter/X, LinkedIn y Slack. Genera meta tags de Open Graph y Twitter Card desde un formulario.

39/70
119/160

Use an absolute URL. Ideal: 1200×630px JPG/PNG under 1MB.

Facebook

example.com

My Awesome Blog Post — A Complete Guide

Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike.

Generated Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:title" content="My Awesome Blog Post — A Complete Guide" />
<meta property="og:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />
<meta property="og:site_name" content="My Website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Blog Post — A Complete Guide" />
<meta name="twitter:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />

OG Tag Checklist

✓og:title set (50–70 chars)
✓og:description set (120–160 chars)
○Missing or not absolute
✓og:url is absolute HTTPS URL
✓og:site_name set
✓og:type selected

Cómo usar Vista Previa de Open Graph

  1. 1Ingresa el título de tu página, descripción, URL e URL de imagen.
  2. 2Obtén una vista previa de cómo aparecerá el enlace en Facebook, Twitter/X, LinkedIn y Slack.
  3. 3Copia las meta tags generadas en tu HTML <head>.
ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, sin aviso de cookies
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Analizador de Meta Tags
Analiza las meta tags de cualquier página web. Comprueba título, descripción, Open Graph, tarjetas de Twitter y obtén recomendaciones SEO.
Verificador de Open Graph
Obtén una vista previa de cómo se ve tu página cuando se comparte en Facebook, Twitter y LinkedIn. Comprueba todas las etiquetas OG y Twitter Card.
Comprobador de Encabezados HTTP
Inspecciona encabezados de respuesta HTTP de cualquier URL. Comprueba encabezados de seguridad, almacenamiento en caché, tipo de contenido y más.
Validador de Robots.txt
Valida y analiza tu archivo robots.txt. Verifica reglas, mapas del sitio y problemas comunes de rastreo.

Preguntas frecuentes

¿Qué son las etiquetas Open Graph?▾
Las etiquetas Open Graph (OG) son metaetiquetas HTML que controlan cómo aparecen las URLs cuando se comparten en plataformas de redes sociales como Facebook, LinkedIn, Twitter/X, Slack y Discord. Desarrollado por Facebook en 2010, el protocolo OG es ahora el estándar para las vistas previas de enlaces en toda la web. Etiquetas clave: og:title (titular), og:description (resumen), og:image (miniatura), og:url (URL canónica). Sin etiquetas OG, las plataformas adivinan el contenido, a menudo de forma deficiente. Con etiquetas OG adecuadas, controla exactamente cómo aparece su contenido cuando se comparte.
¿Cuál es la diferencia entre Open Graph y Twitter Cards?▾
Open Graph es el estándar general usado por Facebook, LinkedIn, Slack, Discord y la mayoría de las plataformas. Twitter Cards son metaetiquetas específicas de Twitter/X (twitter:card, twitter:title, twitter:description, twitter:image). La mayoría de las implementaciones necesitan ambos. Buenas noticias: si faltan las etiquetas específicas de Twitter, Twitter recurre a las etiquetas OG. Recomendado: establezca ambos para máxima compatibilidad. Tipos de Twitter Card: summary (imagen pequeña), summary_large_image (banner de ancho completo, el más común), app (móvil), player (vídeo).
¿Cuál es el tamaño de imagen ideal para Open Graph?▾
Tamaño OG recomendado: 1200×630 px (relación 1.91:1). Mínimo: 600×315 px. Tamaño máximo de archivo: menos de 8 MB (límite de Facebook), idealmente menos de 1 MB para carga rápida. Facebook recortará las imágenes que no cumplan la relación. LinkedIn prefiere 1200×627 px. Twitter/X summary_large_image: 1200×675 px (relación 16:9). Use siempre URLs absolutas para og:image (incluyendo https://). Use formato JPG o PNG. Incluya texto alternativo mediante og:image:alt para accesibilidad.
¿Cómo valido mis etiquetas Open Graph?▾
Herramientas de prueba: Facebook Sharing Debugger (developers.facebook.com/tools/debug) — pegue su URL, rastrea y muestra la vista previa + errores. LinkedIn Post Inspector (linkedin.com/post-inspector) — ídem para LinkedIn. Twitter Card Validator (cards-dev.twitter.com/validator) — para tarjetas Twitter. Nota: Facebook y LinkedIn almacenan en caché las vistas previas de forma agresiva. Después de corregir las etiquetas, use el botón «Scrape Again» del depurador para forzar la actualización del caché.
¿Qué es og:type y cuándo debo usar diferentes valores?▾
og:type indica a las plataformas qué tipo de contenido es la página. Valores más comunes: website (predeterminado: páginas de inicio o páginas generales). article (entradas de blog, artículos de noticias: habilita article:published_time, article:author). product (artículos de e-commerce: habilita og:price:amount). video.movie / video.episode (contenido de vídeo). music.song / music.album (contenido de audio). Para artículos: añada article:published_time (fecha ISO 8601), article:author (URL de la página del autor), article:section (categoría), article:tag (palabras clave).