Open Graph Preview

¿Qué es una herramienta de previsualización Open Graph?

Las etiquetas Open Graph (OG) son meta etiquetas HTML que controlan cómo aparece tu página al compartirse en redes sociales como Facebook, Twitter, LinkedIn y apps de mensajería. Las etiquetas og:title, og:description, og:image y og:url determinan el título, fragmento, miniatura y enlace mostrados en la tarjeta de previsualización. Esta herramienta te permite previsualizar cómo se verá tu página antes de compartirla.

Sin etiquetas OG adecuadas, las plataformas sociales intentan adivinar el título y la imagen del contenido, produciendo a menudo previsualizaciones feas o engañosas. Una previsualización OG bien elaborada aumenta drásticamente las tasas de clic: las publicaciones con imágenes y descripciones optimizadas obtienen 2-3 veces más interacción que las que no las tienen.

Etiquetas Open Graph esenciales

• og:title — el título mostrado en la tarjeta de previsualización. Mantenlo por debajo de 60 caracteres.
• og:description — un breve resumen del contenido. Mantenlo por debajo de 155 caracteres.
• og:image — la miniatura. Tamaño recomendado: 1200x630 píxeles para mejor visualización entre plataformas.
• og:url — la URL canónica de la página.
• og:type — el tipo de contenido (website, article, product, etc.).

Cómo usar esta herramienta

Introduce una URL y la herramienta carga la página, extrae todas las meta etiquetas Open Graph y Twitter Card, y renderiza previsualizaciones que muestran cómo aparecerá la página en Facebook, Twitter y LinkedIn. Las imágenes faltantes o de tamaño incorrecto se marcan. Úsalo para probar tus etiquetas OG antes de publicar contenido.

Twitter Cards vs. Open Graph

Twitter usa sus propias meta etiquetas (twitter:card, twitter:title, twitter:description, twitter:image) pero recurre a las OG cuando faltan las específicas de Twitter. Para máxima compatibilidad, incluye etiquetas OG y Twitter Card. La etiqueta twitter:card (puesta en summary_large_image para una previsualización grande) es la adición más importante específica de Twitter.

Ejemplo práctico

Fija og:title en un titular de 55 caracteres, og:description en un resumen de 155 caracteres y og:image en una imagen de 1200x630 píxeles; luego pega la URL para previsualizar la tarjeta. Esa relación de aspecto (1,91:1) es la que recortan Facebook y LinkedIn, así que un motivo centrado se mantiene visible. Si falta og:image, las plataformas deben adivinar y suelen tomar un logotipo o la primera imagen de la página, lo que rara vez parece intencionado en un feed compartido.

Errores comunes

El error más común es una imagen demasiado pequeña: las plataformas quieren al menos 1200x630, y cualquier cosa por debajo de 600x315 puede mostrarse como una miniatura diminuta o descartarse. Las URL de imagen relativas son otra trampa: Open Graph exige una URL absoluta https:// porque el rastreador se ejecuta en un servidor externo. Por último, los cambios se almacenan en caché, así que usa el depurador de cada plataforma para forzar una nueva lectura tras editar las etiquetas.

Preguntas frecuentes

¿Por qué no se actualiza la vista previa al compartir tras cambiar las etiquetas OG?

Las plataformas sociales cachean los datos OG de forma agresiva. Facebook los cachea unos 30 días. Para forzar un refresco, usa el Sharing Debugger de Facebook (developers.facebook.com/tools/debug/), el Card Validator de Twitter o el Post Inspector de LinkedIn. Estas herramientas borran la caché y obtienen las etiquetas OG actualizadas de tu página.

¿Qué tamaño de imagen debo usar para OG?

El tamaño recomendado es 1200x630 píxeles (relación 1,91:1) para la mejor visualización en todas las plataformas. Mínimo 600x315 píxeles. Facebook, Twitter y LinkedIn muestran bien esta relación. Usa formato JPEG o PNG, mantén el tamaño por debajo de 5MB (idealmente menos de 300KB para carga rápida). Evita imágenes con mucho texto: algunas plataformas recortan distinto.

¿Necesito etiquetas de Twitter Card si ya tengo Open Graph?

Twitter recurre a las etiquetas de Open Graph para el título, la descripción y la imagen, así que compartir de forma básica funciona sin ellas. Añade twitter:card (normalmente summary_large_image) cuando quieras el diseño más grande o la atribución específica de Twitter mediante twitter:site. De lo contrario, Open Graph por sí solo basta.