Vista previa de Open Graph — revisa las tarjetas de redes sociales
Las etiquetas Open Graph deciden cómo se ve tu página cada vez que se comparte: una imagen o un título ausente te cuesta clics y compartidos. Pega tus etiquetas og:/twitter:card o una URL para previsualizar la tarjeta de Facebook, X y estilo WhatsApp, detectar campos faltantes y corregir la proporción de la imagen. Pasos: pega etiquetas o carga una URL, lee las tres tarjetas y la tabla de campos, corrige lo que falta. El modo pegar funciona en tu dispositivo; el modo URL carga la página una vez y no la almacena. Ejemplo: una página con una og:image de 1200×630 compartida como tarjeta grande.
Cómo funciona
La vista previa analiza las etiquetas og:/twitter: que pegas (o las extrae del HTML cargado de una URL) y dibuja tres tarjetas. Facebook usa la imagen 1.91:1 a la izquierda con título, descripción y dominio debajo. X sigue twitter:card: summary_large_image muestra una imagen grande arriba, summary una pequeña junto al texto. Las apps de mensajería como WhatsApp muestran una tarjeta grande. La tabla marca og:title, og:description y og:image como obligatorios y lista los opcionales.
Reglas que usa la vista previa
Estos son los tamaños y respaldos que usan las plataformas, según el protocolo Open Graph y la documentación de X Cards.
- Campos obligatorios: og:title, og:description y og:image. Los que falten se marcan para corregirlos antes de publicar.
- og:image a 1200×630 px (1.91:1) funciona en todas las plataformas importantes. Facebook también acepta recortes 2:1 y 1:1; las imágenes pequeñas suelen agrandarse y verse borrosas.
- twitter:card summary_large_image acompaña a una imagen grande; summary a una pequeña. Sin twitter:card, las plataformas infieren una tarjeta summary desde las etiquetas og:.
- Cuando falta og:title u og:image, las plataformas usan el título HTML, la meta description y la primera imagen de la página.
- El tamaño se mide cargando la imagen en el navegador; si no se puede cargar (bloqueada, sin conexión o URL incorrecta), la comprobación reporta desconocido.
Ejemplo
Las etiquetas de ejemplo describen un post con og:image de 1200×630 y twitter:card summary_large_image. La vista previa muestra la tarjeta de Facebook con la imagen a la izquierda, una tarjeta grande de X, una tarjeta estilo WhatsApp y una tabla con todos los campos obligatorios presentes.
Buenos usos
- Antes de publicar un post o una landing, pega las etiquetas una vez y confirma que la tarjeta se ve bien en Facebook, X y apps de mensajería.
- Cuando un enlace compartido no muestra imagen o sale recortada, pega las etiquetas og: para comprobar si falta og:image o tiene una proporción incorrecta.
- Tras actualizar un CMS o tema, carga la URL en vivo y verifica que las etiquetas og: sigan coincidiendo con la página.
Frequently asked questions
¿Qué pasa si una página no tiene etiquetas Open Graph?
Facebook, X y WhatsApp construyen la vista previa con el título HTML, la meta description y la primera imagen. La tarjeta puede quedar incompleta o con una imagen equivocada; por eso existen los campos og: obligatorios.
¿Qué tamaño debe tener og:image?
El tamaño seguro es 1200×630 px, proporción 1.91:1 que aceptan todas las plataformas. Facebook ahora admite también recortes 2:1 y 1:1. Las imágenes muy pequeñas suelen ampliarse y verse borrosas.
¿Cómo se relaciona twitter:card con las etiquetas og:?
twitter:card elige el diseño: summary_large_image muestra una imagen ancha, summary una pequeña. Si faltan twitter:title, twitter:description o twitter:image, X usa la etiqueta og: correspondiente.
¿Qué hace la plataforma si falta og:image?
Usa la primera imagen del HTML de la página o muestra la tarjeta sin imagen. La falta de og:image es la causa más común de un enlace compartido sin imagen de vista previa.
¿Por qué la comprobación de proporción dice “desconocido”?
La vista previa intenta cargar og:image con una carga de imagen del navegador para leer su tamaño real. Si la imagen está bloqueada, sin conexión, es lenta o el servidor rechaza la petición, no se puede leer y reporta desconocido.
¿Se suben mis etiquetas a algún sitio?
No. En el modo pegar, el análisis y la vista previa ocurren en tu dispositivo. El modo URL carga la página una vez a través de nuestro worker y no la almacena.
Related tools
Consultas o comentarios
¿Algo poco claro, roto o que falte? Redacta un mensaje abajo — leemos cada nota sobre estas herramientas.