Imagen Open Graph

Una imagen Open Graph es la imagen de vista previa que las redes sociales, las apps de mensajería y las herramientas de colaboración muestran cuando alguien comparte un enlace. La página la declara con la metaetiqueta og:image del protocolo Open Graph, que Facebook presentó en 2010.

El valor de la etiqueta es una URL absoluta de la imagen. Las etiquetas opcionales indican el ancho, la altura, el tipo MIME y el texto alternativo: og:image:width, og:image:height, og:image:type y og:image:alt. X, antes Twitter, lee sus propias etiquetas twitter:image y usa las etiquetas Open Graph cuando faltan.

Los servicios descargan y guardan en caché la imagen cuando se comparte el enlace por primera vez, así que los cambios pueden no aparecer hasta que se actualice la caché.

Por qué importan las imágenes OG

Un enlace con una imagen de vista previa clara ocupa más espacio en un feed o en un chat que una URL sin formato, y muestra a los lectores de qué trata la página antes de que hagan clic. Sin og:image, los servicios eligen una imagen de la página o no muestran ninguna.

Especificaciones de las imágenes OG

Propiedad	Práctica habitual
Tamaño	1200×630 píxeles
Relación de aspecto	Unos 1.91:1
Formato	PNG o JPG
URL	Absoluta, accesible públicamente por HTTPS
Texto	Alejado de los bordes, que algunos servicios recortan

Cada plataforma publica sus propias directrices y las cambia con el tiempo. Revisa la documentación actual de las plataformas que te importan.

Cómo crear imágenes OG eficaces

1. Parte de un lienzo de 1200×630.
2. Añade un título corto en letra grande y una captura de producto clara o un elemento visual.
3. Mantén el contenido importante en la zona central.
4. Exporta como PNG para diseños con mucho texto o como JPG para fotos, y mantén el archivo pequeño.
5. Prueba el enlace en la herramienta de vista previa o de depuración de cada plataforma.

En un flujo de publicación real

Los equipos suelen generar imágenes OG a partir de una plantilla para cada entrada del blog o cada página de documentación. Una captura de producto dentro de la plantilla muestra la interfaz real. Captura la pantalla con un tamaño mayor que el espacio disponible y después redúcela para conservar un texto nítido.

Errores comunes

• Usar una URL relativa en og:image.
• Colocar texto cerca de los bordes, donde algunas plataformas recortan.
• Olvidar la caché después de actualizar la imagen.
• Usar una captura alta que se recorta hasta convertirse en una franja ilegible.

¿Necesitas corregir una imagen ahora?

Crea una vista previa de 1200×630 a partir de una captura con Social Image Composer y confirma la relación con Aspect Ratio Calculator.

Preguntas frecuentes

¿La imagen OG es lo mismo que el favicon?

No. El favicon es un icono pequeño del sitio. La imagen OG es una vista previa grande para los enlaces compartidos.

¿Puedo usar SVG en og:image?

Muchos servicios no muestran vistas previas SVG. Usa PNG o JPG.

Fuentes

• The Open Graph protocol

Recursos relacionados

• Favicon: el icono pequeño que aparece en las pestañas del navegador.
• Image Compressor: mantiene pequeño el archivo de vista previa.