¿Cuál es el problema?
Tu imagen OG es demasiado pequeña para una o más plataformas de redes sociales. Cuando una imagen no cumple con las dimensiones mínimas de una plataforma, puede mostrarse como una miniatura diminuta, ampliarse excesivamente (viéndose borrosa) o no mostrarse en absoluto.
Cómo se ve
❌ Imagen pequeña (256×256px)
✅ Tamaño correcto (1200×630px)
Dimensiones mínimas por plataforma
Cada plataforma tiene requisitos mínimos diferentes:
| Plataforma | Tamaño mínimo | Recomendado | Comportamiento si es muy pequeña |
|---|---|---|---|
| 200x200px | 1200x630px | Muestra previsualización de enlace pequeña | |
| X (Twitter) | 300x157px | 1200x628px | Puede no mostrar la imagen en absoluto |
| 1200x628px | 1200x628px | Muestra formato de tarjeta más pequeño | |
| ~300x200px | 1200x630px | La imagen podría no aparecer | |
| Slack | ~400x200px | 1200x630px | Muestra miniatura diminuta |
| Discord | 256x256px | 1200x630px | Renderiza embed pequeño |
| Telegram | Sin mínimo estricto | 1200x630px | Puede recortarse de forma extraña |
Cómo solucionarlo
Redimensiona tu imagen al tamaño universalmente recomendado de 1200x630px (relación de aspecto 1.91:1):
<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Causas comunes
1. Usar un logotipo o icono como imagen OG
Los logotipos suelen ser pequeños (ej. 256x256). Crea una imagen OG dedicada que incluya tu logotipo dentro de un lienzo de 1200x630.
2. Usar una miniatura en lugar de la imagen completa
Las plataformas CMS a veces generan miniaturas pequeñas. Asegúrate de que la URL de og:image apunte a la versión de resolución completa.
3. Imágenes generadas dinámicamente a baja resolución
Si usas un servicio como @vercel/og o Satori, asegúrate de que las dimensiones de salida estén configuradas a 1200x630.
Solución rápida con herramientas de diseño
- Figma — Crea un marco de 1200x630px
- Canva — Usa la categoría de plantillas “Redes sociales”
- Squoosh — Redimensiona imágenes existentes a las dimensiones correctas
Ejemplo de automatización
Sharp (Node.js):
import sharp from 'sharp'
await sharp('small-image.png')
.resize(1200, 630, { fit: 'cover' })
.jpeg({ quality: 85 })
.toFile('og-image.jpg')