Imágenes Open Graph: tamaños, consejos y ejemplos prácticos
Las imágenes Open Graph controlan lo que aparece cuando alguien comparte tu página en Facebook, Twitter o LinkedIn. Una imagen incorrecta o ausente reduce los clics antes de que los visitantes lleguen a tu sitio.
Esta guía incluye tamaños óptimos, principios de diseño, implementación en HTML y herramientas de prueba — todo lo necesario para acertar con las vistas previas sociales en todas las plataformas.
Índice
Qué son las imágenes Open Graph y por qué importan
Open Graph es un protocolo creado por Facebook que permite controlar cómo se muestran tus páginas web al compartirlas en redes sociales. La etiqueta meta og:image indica qué imagen usar como miniatura de vista previa.
Cuando alguien comparte un enlace en Facebook, Twitter o LinkedIn, la plataforma obtiene los metadatos Open Graph y crea una tarjeta de vista previa. Esa tarjeta — con imagen, título y descripción — suele ser lo único que ve el usuario antes de decidir si hacer clic.
Una imagen Open Graph bien diseñada puede mejorar significativamente la tasa de clics. Una imagen ausente o con tamaño incorrecto genera una vista previa rota, miniatura recortada o un marcador genérico poco profesional.
Tasa de clics
Las páginas con imágenes OG bien dimensionadas y de alto contraste superan consistentemente a las que no tienen imagen o usan una de baja calidad.
Más clics en cada compartición
Reconocimiento de marca
Una identidad visual coherente en cada enlace compartido genera familiaridad y confianza en tu audiencia antes de que visiten la página.
Consistente en todas las redes
Señal SEO
El engagement social impulsado por vistas previas atractivas genera enlaces y señales de tráfico que refuerzan el posicionamiento orgánico con el tiempo.
Beneficio indirecto para el posicionamiento
Requisitos de imagen según plataforma
Cada red social tiene dimensiones, proporciones y límites de tamaño de archivo recomendados. Cumplirlos evita recortes, distorsiones y marcadores de posición.
| Plataforma | Tamaño recomendado | Proporción | Tamaño máximo de archivo | Formato |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Tamaño universal seguro: 1200 × 630 píxeles
Una imagen de 1200 × 630 px con proporción 1,91:1 funciona en Facebook, LinkedIn, WhatsApp, Slack y la mayoría de plataformas. En Twitter se muestra bien aunque recorta a 16:9 — mantén el contenido importante centrado para evitar cortes.
Principios de diseño para imágenes Open Graph efectivas
La imagen aparece en tamaños pequeños en los feeds sociales. Diseña pensando primero en la miniatura, no en la versión completa.
Mantén el elemento visual más importante — tu logo, un titular fuerte o una ilustración clave — dentro del 80% central de la imagen. Las plataformas suelen recortar los bordes, y lo cercano al borde puede cortarse.
Alto contraste
Usa contraste fuerte entre texto, elementos en primer plano y fondo. Las imágenes con bajo contraste se pierden en feeds sociales saturados junto a publicaciones vibrantes de la competencia.
Legible a cualquier tamaño
Claridad tipográfica
Si la imagen incluye texto, usa fuentes grandes y en negrita — al menos equivalente a 36 px — y evita más de dos líneas. El texto pequeño no se lee en miniaturas.
Mantén legible en pequeño
Consistencia de marca
Incluye tu logo o paleta de colores de marca en cada imagen OG. Cada publicación compartida es una impresión de marca, aunque no se haga clic.
Cada compartición = punto de contacto de marca
Elegir el formato de imagen adecuado
Usa JPEG para imágenes fotográficas OG y PNG para gráficos con texto, logos o transparencia. WebP tiene soporte creciente pero no es universal en todos los rastreadores sociales.
| Formato | Ideal para | Soporte social | Tamaño típico de archivo | Recomendación |
|---|---|---|---|---|
| JPEG | Fotos, degradados | Universal | 60 – 150 KB | Predeterminado para fotos |
| PNG | Texto, logos, transparencia | Universal | 100 – 300 KB | Predeterminado para gráficos |
| WebP | Ambos, archivos más pequeños | Twitter, Slack (no todos) | 40 – 120 KB | Solo complemento |
Apunta a 100–200 KB para tu imagen OG. Más pequeño siempre es mejor, pero no comprimas tanto que se pixele en el feed social. WhatsApp limita a 300 KB — si compartes allí, mantén las imágenes bajo ese límite.
Para más sobre compensaciones de formatos de imagen en general, consulta la guía de optimización de imágenes web . Para convertir imágenes existentes, la guía de JPG a WebP cubre el flujo de trabajo diario.
Implementación HTML y etiquetas meta
Coloca las etiquetas meta Open Graph dentro del elemento <head> de tu HTML. La etiqueta og:image debe usar una URL absoluta — las rutas relativas no son compatibles con los rastreadores sociales.
Las etiquetas mínimas requeridas son og:title, og:description, og:image y og:url. La etiqueta twitter:card activa el formato de tarjeta con imagen grande en Twitter.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Siempre especifica og:image:width y og:image:height. Sin ellas, las plataformas deben descargar e inspeccionar la imagen antes de mostrar la vista previa, lo que ralentiza la carga y aumenta el riesgo de marcador de posición.
Si usas Blazor, el componente de metadatos SEO para Blazor gestiona automáticamente todas las etiquetas Open Graph con URLs adaptadas a la cultura.
Pruebas y depuración de imágenes Open Graph
Las plataformas sociales almacenan en caché los metadatos Open Graph agresivamente. Tras actualizar etiquetas o imagen, usa las herramientas oficiales de depuración para forzar un rastreo nuevo y verificar que la vista previa es correcta antes de compartir.
Depurador de compartición de Facebook
Introduce tu URL en developers.facebook.com/tools/debug para obtener metadatos actualizados, ver qué imagen seleccionó Facebook y depurar advertencias o errores.
Forzar actualización de caché
Validador de tarjetas de Twitter
Usa cards-dev.twitter.com/validator para previsualizar cómo aparecerá tu tarjeta de Twitter. Haz clic en 'Preview card' para ver miniatura, título y descripción en el formato real.
Previsualizar antes de publicar
Inspector de publicaciones de LinkedIn
El inspector de publicaciones de LinkedIn en linkedin.com/post-inspector actualiza la caché de LinkedIn para tu URL y muestra cómo se verá la vista previa con los metadatos actuales.
Actualizar caché de LinkedIn
Errores comunes y cómo solucionarlos
La mayoría de problemas con imágenes Open Graph se deben a un conjunto pequeño de errores recurrentes. Saber qué buscar ahorra tiempo de depuración.
- URLs relativas. Los rastreadores sociales no resuelven rutas relativas. El valor de og:image debe ser una URL absoluta completa con protocolo y dominio (https://tudominio.com/ruta/imagen.jpg).
- Faltan etiquetas de ancho y alto. Sin og:image:width y og:image:height, las plataformas deben descargar e inspeccionar la imagen antes de generar la vista previa. Añade ambas para evitar esta descarga extra.
- Imágenes tras autenticación. Los rastreadores no pueden acceder a imágenes que requieren inicio de sesión o están bloqueadas por robots.txt. La imagen OG debe ser accesible públicamente sin autenticación.
- Proporción incorrecta. Una imagen que se aleje mucho de 1,91:1 será recortada o mostrada con franjas negras molestas. Siempre prueba la proporción antes de publicar.
- Caché obsoleta de la plataforma. Actualizar el archivo de imagen sin cambiar el nombre o añadir una cadena de consulta hace que las plataformas sirvan la versión antigua en caché. Cambia el nombre o usa el depurador para forzar la actualización.
Automatización de generación de imágenes Open Graph
Para sitios pequeños y blogs, una imagen OG estática por página es la opción más sencilla y fiable. Para publicaciones grandes o apps con vistas previas únicas por página, la generación dinámica es práctica.
La generación dinámica de imágenes OG crea una imagen única en tiempo de solicitud o compilación basada en el título, descripción u otro contenido de la página. El resultado es una vista previa única y coherente con la marca para cada página sin crear imágenes manualmente.
Cuándo automatizar
Automatiza cuando tengas muchas páginas que requieran imágenes únicas, contenido que cambia frecuentemente o cuando la creación manual no escala con tu volumen de publicación.
Contenido dinámico o de alto volumen
Cuándo usar imágenes estáticas
Para la mayoría de páginas — landing pages, guías y artículos evergreen — una imagen estática bien diseñada supera en calidad y coherencia de marca a una generada.
Enfoque prioritario en calidad
Herramientas populares para generación dinámica incluyen Cloudinary (transformaciones vía parámetros URL), Vercel OG (renderiza React/HTML a imagen en el edge) y pipelines de captura con Puppeteer o Playwright para cualquier stack tecnológico.