Falta og:image — La etiqueta más importante para el engagement en redes sociales

¿Qué es og:image?

La meta etiqueta og:image especifica la imagen que aparece cuando tu página se comparte en redes sociales. Es posiblemente la etiqueta Open Graph con mayor impacto — una imagen atractiva puede aumentar drásticamente los clics y la interacción.

¿Por qué es crítica?

Las investigaciones y los datos muestran consistentemente:

Los enlaces con imágenes reciben 2-3 veces más interacción que los enlaces sin ellas
En Twitter/X, los tweets con imágenes obtienen 150% más retweets
En Facebook, las publicaciones con imágenes tienen 2.3 veces más engagement
En LinkedIn, los posts con imágenes tienen 98% más comentarios

Sin og:image, las plataformas harán una de estas cosas:

Mostrar un recuadro gris como marcador de posición
Intentar extraer una imagen aleatoria de tu página (normalmente la incorrecta)
Mostrar una vista previa solo de texto que los usuarios ignoran al hacer scroll

Cómo se ve

❌ Sin og:image

example.com

My Website Title

A description of the page…

✅ Con og:image

Eye-catching preview image

example.com

My Website Title

A description of the page…

Cómo solucionarlo

Añade lo siguiente en tu <head>:

<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />

Importante: Usa siempre una URL absoluta (que empiece con https://).

Buenas prácticas para imágenes OG

Dimensiones

Tamaño recomendado: 1200 x 630 píxeles (relación de aspecto 1.91:1)
Tamaño mínimo: 600 x 315 píxeles
Peso del archivo: Mantenerlo por debajo de 5 MB (lo ideal es menos de 1 MB)
Formato: JPG o PNG (JPG para fotos, PNG para gráficos/texto)

Consejos de diseño

Haz el texto grande y legible — Asume que la imagen se mostrará a unos ~500px de ancho
Incluye tu logo/marca — Un branding sutil refuerza el reconocimiento
Usa colores con buen contraste — La imagen debe destacar en un feed saturado
Diseña pensando en el recorte — Cada plataforma recorta de forma diferente; mantén el contenido clave centrado
Evita demasiado texto — Facebook puede reducir el alcance de imágenes con más del 20% de texto

Ideas de contenido

Artículos del blog: Imagen destacada con el título del artículo superpuesto
Páginas de producto: Foto de producto en alta calidad
Página de inicio: Gráfico de marca con eslogan
Herramientas/apps: Captura de pantalla o ilustración de la herramienta en acción

Implementación según el framework

Next.js (App Router):

export const metadata = {
  openGraph: {
    images: ['https://yoursite.com/og-image.jpg'],
  },
}

Astro:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />

Herramientas para crear imágenes OG

Figma/Canva — Diseña imágenes personalizadas con plantillas
Vercel OG — Genera imágenes OG dinámicas con código (@vercel/og)
Satori — Convierte HTML/CSS a SVG para imágenes OG programáticas