Vista previa OG
Vista previa de OG lee tus etiquetas Open Graph y Twitter card y muestra la tarjeta de enlace que un crawler renderizará de verdad, fallbacks incluidos — un og:title ausente hace que la tarjeta muestre tu <title>, que suele anteponer el nombre del sitio. También informa de los fallos silenciosos: una URL de imagen relativa simplemente no se descarga nunca.
acme.example
Precios
Tres planes, sin mínimo de usuarios y con un plan gratuito para siempre.
acme.example
Precios
Tres planes, sin mínimo de usuarios y con un plan gratuito para siempre.
¿Qué hay de malo en estas etiquetas?
¿Cómo funciona Vista previa OG?
Una tarjeta de enlace la renderiza el crawler de otra persona a partir de etiquetas de tu página, y todas las formas en que puede salir mal son silenciosas. Nada lanza errores, nada se registra, y la página se ve bien en un navegador — la tarjeta está simplemente un poco mal, y la tasa de clics queda ligeramente más baja, para siempre.
La cadena de fallbacks es lo que realmente se renderiza
Las plataformas no exigen og:title. Si falta, usan <title>, que en la mayoría de los sitios es el nombre de la página con el nombre del sitio delante — así la tarjeta lee “Acme Analytics — Precios” donde debería leer “Precios”. La vista previa de arriba resuelve la cadena en lugar de mostrar solo lo que está presente, e indica de qué fuente salió cada campo, porque “ausente” y “presente pero mal” necesitan arreglos distintos.
El fallo que parece un éxito
<meta property="og:image" content="/og/pricing.png"> es HTML válido y está completamente roto. Los crawlers no resuelven rutas relativas contra la página, así que la imagen nunca se descarga y la tarjeta muestra un recuadro gris. Es la causa más común de una tarjeta que funciona en una vista previa local y no muestra nada en producción, y es la razón por la que una URL de imagen relativa se reporta como critical y no como una nota de estilo.
Por qué esto parsea en lugar de buscar patrones
La implementación obvia es una expresión regular por etiqueta, y se rompe en la primera página real: content="a > b" tiene un > dentro de un atributo entre comillas, content='It's here' tiene un apóstrofo que termina un escaneo ingenuo, y <meta> puede estar autocerrada, sin cerrar o tener sus atributos en cualquier orden. Así que el documento se recorre una sola vez con un escáner que entiende de comillas y de los elementos de texto crudo, el mismo enfoque que usan aquí las herramientas de JSON y XML.
Lo que esto no puede hacer es descargar tu imagen, porque implicaría una petición de red desde una página que promete no hacer ninguna. Así que comprueba lo comprobable sin una — que la URL sea absoluta, que las dimensiones declaradas sean suficientemente grandes, que la relación de aspecto esté cerca del 1.91:1 al que recorta toda plataforma y que el texto alt exista.
Cabecera HTML
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" />
Hallazgos
critical og:image "/static/og/pricing.png" is not an absolute URL.
Crawlers do not resolve relative paths.
warning og:description Missing. The card falls back to <meta description>.
warning og:image:alt Missing. Screen readers announce nothing.
info twitter:card "summary" renders a small square thumbnail.Cabecera HTML → Hallazgos
Cabecera HTML
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" /> <title>Acme Analytics — Pricing</title> <meta name="description" content="Pricing for Acme Analytics." /> <link rel="canonical" href="https://acme.example/pricing" />
Hallazgos
critical og:image "/static/og/pricing.png" is not an absolute URL. warning og:description Missing. warning og:url Missing. warning og:image:alt Missing. info og:type Missing, so it defaults to "website". info og:site_name Missing.
¿Qué opciones y casos límite admite Vista previa OG?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| og:title | obligatoria | usa <title> si falta | El titular de la tarjeta. Sin ella, la tarjeta usa tu <title>, que suele llevar el nombre del sitio delante — así la tarjeta se lee como la portada y no como la página. |
| og:description | obligatoria | usa la meta description si falta | Las dos líneas bajo el titular. Una meta description se escribe para un resultado de búsqueda; el texto de la tarjeta se escribe para alguien que está decidiendo si hacer clic, y rara vez son la misma frase. |
| og:image | obligatoria | ninguno | Debe ser una URL https absoluta — los crawlers no resuelven rutas relativas. 1200×630 es el tamaño desde el que recorta toda plataforma; por debajo de 600×315 la tarjeta se escala y se ve borrosa. |
| og:image:alt | recomendada | ninguno | Lo lee en voz alta un lector de pantalla y se muestra cuando la imagen no carga. Todas las plataformas principales lo admiten y casi siempre se omite. |
| og:image:width / height | recomendadas | se detectan | Declararlas permite al crawler maquetar la tarjeta antes de descargar la imagen. Sin ellas, la primera descarga de una página se convierte en una segunda petición para traer la imagen. |
| og:url | recomendada | la URL descargada | La dirección canónica de la página. Sin ella, una página accesible por dos URLs reparte sus compartidos entre ambas. |
| og:type | recomendada | website | "article" desbloquea los campos de autor y fecha de publicación y cambia cómo presentan la tarjeta algunos clientes. |
| og:site_name | opcional | nombre de host | LinkedIn y varios clientes de chat lo muestran sobre el título. Sin él, imprimen el nombre de host. |
| twitter:card | recomendada | summary | summary_large_image muestra la imagen a todo lo ancho; summary muestra una miniatura cuadrada pequeña. Un valor no reconocido se trata como summary. |
| canonical | recomendada | ninguno | Un <link rel="canonical"> no es una etiqueta OG e importa lo mismo: es lo que impide que la misma página en dos direcciones compita contra sí misma. |
Preguntas frecuentes
¿Por qué no se ve mi imagen en la vista previa?
Casi siempre es una URL relativa. og:image debe ser absoluta — https://acme.example/og/pricing.png, no /og/pricing.png — porque el crawler la descarga fuera de contexto y no tiene ninguna página contra la que resolverla. Por eso aquí se reporta como critical. La segunda causa más común es una imagen detrás de un login, y la tercera un CDN que bloquea el user agent de la plataforma.
Actualicé las etiquetas pero la tarjeta no cambió. ¿Por qué?
Los crawlers cachean. Facebook y LinkedIn conservan una tarjeta durante días, y X cachea alrededor de una semana. El «Sharing Debugger» de Facebook tiene un botón «Scrape Again» que limpia esa caché; el «Post Inspector» de LinkedIn hace lo mismo. Hasta que lo hagas estás viendo las etiquetas viejas, por eso un cambio que sí funcionó puede parecer que no lo hizo.
¿De qué tamaño debe ser la imagen?
1200×630 píxeles. Es exactamente 1.91:1, la proporción a la que recorta toda plataforma, así que no se recorta nada. Todo lo que baje de 600×315 se escala y pierde nitidez; algo mucho más ancho pierde los bordes. JPEG para fotografías, PNG para gráficos planos y texto, y mantenla por debajo de 1 MB aproximadamente — algunos clientes se saltan las imágenes más grandes antes que esperar.
¿Necesito etiquetas de Twitter si ya tengo Open Graph?
X recurre a Open Graph para el título, la descripción y la imagen, así que con og:* a secas ya sale una tarjeta. Lo que no hace es elegir el tipo de tarjeta correcto: sin twitter:card obtienes el summary cuadrado pequeño en lugar de la imagen grande. Una etiqueta extra lo vale, y twitter:title merece la pena cuando el texto de la tarjeta debe ser distinto de la vista previa del enlace que se muestra en otros sitios.
¿Esto descarga mi página o mi imagen?
No. Pegas el marcado y se parsea en la pestaña — el panel «Network» no muestra nada. Es una restricción deliberada y no una limitación: una herramienta que descargara tu imagen podría medirla, y también sería un servidor que conoce cada URL que pegas. Las comprobaciones de aquí son las que no necesitan ninguna petición: URLs absolutas, dimensiones declaradas, relación de aspecto y texto alt.
¿Qué plataformas leen qué etiquetas?
Open Graph lo leen Facebook, LinkedIn, Slack, WhatsApp, Discord, Telegram, Pinterest y — como fallback — X. Las etiquetas twitter:* de la propia X ganan allí cuando están. Algunos clientes añaden sus propias expectativas encima: Slack quiere una imagen casi cuadrada para su previsualización de enlace, y Discord muestra una miniatura pequeña para las tarjetas summary y un banner a todo lo ancho para summary_large_image.