Vista previa de Open Graph

Qué es realmente Open Graph

El protocolo Open Graph fue creado por Facebook en 2010 como forma de convertir cualquier página web en un «objeto rico» dentro de un grafo social, un conjunto estructurado de metadatos que otras aplicaciones (originalmente Facebook, ahora también LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp y docenas más) pueden leer para renderizar una tarjeta de vista previa cuando alguien pega tu URL. La especificación oficial vive en ogp.me y el protocolo se ha convertido de hecho en la lingua franca para compartir enlaces en la web.

Sin etiquetas OG, las plataformas sociales raspan tu página y adivinan: cogen un encabezado, agarran la primera imagen que encuentran y lo llaman tarjeta. El resultado raras veces es lo que quieres. Con etiquetas OG controlas el título, la descripción y la imagen, lo que marca la diferencia entre un enlace pulido y uno con aspecto roto.

Las cuatro etiquetas requeridas (según ogp.me)

La especificación oficial de Open Graph define cuatro propiedades requeridas. Para calificar como un objeto Open Graph, una página debe declarar las cuatro:

Las etiquetas opcionales recomendadas incluyen og:description (un resumen de una o dos oraciones), og:site_name (el nombre de tu sitio como etiqueta), og:locale (idioma y región), y las pistas de dimensión de imagen og:image:width / og:image:height / og:image:alt. Incluir las pistas de dimensión permite a los clientes sociales preasignar el espacio adecuado y evita el desplazamiento de layout mientras la imagen carga.

Tarjetas de Twitter / X: misma idea, etiquetas ligeramente distintas

X (antes Twitter) tiene su propio espacio de nombres de metadatos, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, pero, lo importante, X recurre a las etiquetas OG cuando faltan las específicas de Twitter. Así que una página que sólo envía las etiquetas OG sigue obteniendo una tarjeta en X. Donde difieren ambas es en el tipo de tarjeta:

• twitter:card = summary, miniatura cuadrada pequeña, título, descripción.
• twitter:card = summary_large_image, imagen a ancho completo en la parte superior de la tarjeta. El predeterminado moderno para compartir contenido porque atrae más atención visual en el feed.
• app y player, para instalaciones de apps y vídeo en línea respectivamente.

Nota: la vista previa autónoma del Twitter Card Validator en cards-dev.twitter.com/validator fue retirada por X el 2 de agosto de 2022. La forma actual de verificar una tarjeta es empezar un nuevo tweet en el Tweet Composer, pegar la URL y dejar que se renderice la vista previa, no necesitas publicar realmente el tweet. Algunas herramientas de terceros (esta incluida) aproximan la tarjeta renderizada para que puedas iterar antes de publicar.

Dimensiones de imagen que de verdad funcionan

No hay un único tamaño perfecto, pero una imagen de 1200×630 (ratio 1,91:1) es la apuesta única más fiable, funciona en todas partes sin recortes mayores. Recomendaciones por plataforma:

Mantén el texto importante y las caras cerca del centro de la imagen, cada plataforma recorta de forma distinta y un logo en la esquina puede desaparecer detrás de las superposiciones de UI de la plataforma.

Por qué a veces no se muestra tu tarjeta

Si has añadido etiquetas OG pero la vista previa sigue rota o vacía, los sospechosos habituales:

• HTTPS requerido. Facebook y la mayoría de las plataformas modernas rechazan URL de imagen http://. Sirve og:image sobre HTTPS.
• Imagen no accesible públicamente. Detrás de autenticación, bloqueada por allow-list de IP o devolviendo 403 al crawler de la plataforma. Pruébalo abriendo la URL de la imagen en una ventana privada.
• Imagen demasiado pequeña. Por debajo del mínimo de la plataforma (Facebook 200×200, LinkedIn 1200×627), la tarjeta cae a una miniatura pequeña o a ninguna imagen.
• Ratio incorrecto. Una imagen cuadrada 1:1 enviada como summary_large_image en X se recorta centrada, a menudo mal.
• Caché. Las plataformas sociales cachean tus metadatos OG agresivamente. Tras corregir etiquetas, ve al Sharing Debugger de Facebook y haz clic en «Scrape Again» para refrescar; el Post Inspector de LinkedIn hace lo mismo; X recoge los cambios la próxima vez que alguien pegue la URL.
• Robots.txt bloquea al crawler social. Asegúrate de que user agents como facebookexternalhit, Twitterbot, LinkedInBot, Slackbot puedan obtener tu página y tu imagen.
• El servidor devuelve no-2xx al crawler. Revisa los logs del servidor para los user agents de bots sociales.
• URL de imagen relativas. og:image debe ser una URL absoluta (https://tusitio.com/og.jpg), nunca /og.jpg.

El problema del caché

Una vez que una plataforma social raspa tu página, los metadatos quedan cacheados durante un período, el folclor de la comunidad lo sitúa en torno a 7 días para Facebook y LinkedIn, aunque ninguna plataforma documenta el TTL exacto. Actualizar tus etiquetas OG no refresca el caché automáticamente. Para forzar un re-scrape, usa las herramientas oficiales: Facebook Sharing Debugger, LinkedIn Post Inspector. X coge los nuevos metadatos la próxima vez que se comparta la URL. Slack y Discord refrescan sus vistas previas con base en las etiquetas OG en el momento del fetch, así que se actualizan más rápido que Facebook.

Valores comunes de og:type

La etiqueta og:type le dice a la plataforma social qué tipo de objeto representa la página. La mayoría de las páginas son website (el predeterminado) o article; los valores específicos por vertical permiten a las plataformas renderizar tarjetas más ricas. Según la spec:

• website, predeterminado para páginas generales.
• article, entradas de blog, noticias. Se empareja con article:published_time, article:author, article:section, article:tag.
• book, se empareja con book:author, book:isbn.
• profile, para páginas de perfil de usuario.
• video.movie / video.episode / video.tv_show / video.other, para contenido de vídeo.
• music.song / music.album / music.playlist / music.radio_station, para música.

Límites de longitud en la práctica

Ninguna plataforma impone un tope estricto de longitud para título o descripción, pero todas truncan pasado un punto:

• Título, mantenlo bajo ~60 caracteres para estar a salvo en todas las plataformas; ~70 trunca en la mayoría. Mensaje crítico en los primeros 50.
• Descripción, bajo ~155–200 caracteres antes del truncado. Menos en móvil (alrededor de 100). Pon la información clave al principio.
• Texto alt de la imagen, debe estar presente (og:image:alt) para lectores de pantalla y clientes conscientes de la accesibilidad; bajo 100 caracteres.

JSON-LD vs Open Graph (son cosas distintas)

Confusión común: los datos estructurados JSON-LD (con vocabularios schema.org) y las meta etiquetas Open Graph hacen trabajos distintos. OG / Twitter Cards controlan las vistas previas de compartir social, lo que aparece cuando alguien pega tu URL en Slack o Facebook. JSON-LD con schema.org ayuda a Google a parsear tu página para resultados de búsqueda enriquecidos, tarjetas de receta, info de producto, fragmentos FAQ en la búsqueda de Google. Ambos están recomendados y no se reemplazan entre sí.

Errores comunes

1. Usar una URL og:image relativa. La spec exige una URL absoluta. Las rutas relativas se descartan silenciosamente.
2. Usar un logo de sitio genérico para cada página. La imagen OG es la heroína de tu tarjeta, cada página merece una imagen única, idealmente atada al contenido de la página.
3. Olvidar og:image:width y og:image:height. Algunos clientes preasignan espacio y se pierden la imagen sin estas pistas.
4. Falta del tipo twitter:card summary_large_image. Sin él, X usa por defecto la tarjeta summary más pequeña con miniatura cuadrada, normalmente menos atractiva.
5. Poner texto clave en las esquinas de la imagen. Las plataformas recortan distinto. Sujetos y texto importante deberían estar en el 80% central.
6. Actualizar etiquetas pero no refrescar el caché. Visita el Sharing Debugger / Post Inspector oficial tras cada cambio.
7. Enviar una URL de imagen HTTP. La mayoría de las plataformas rechaza imágenes no-HTTPS; la tarjeta aparecerá sin imagen.
8. Usar sólo og:title y og:description. Sin og:image la tarjeta se renderiza como un esqueleto sólo de texto en la mayoría de las plataformas.

Preguntas frecuentes

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

Herramientas relacionadas