Imagen Open Graph Perfecta: Dimensiones, Formatos y Diseño para Redes Sociales
La imagen Open Graph es el elemento visual más impactante de tu estrategia de contenido en redes sociales. Una imagen bien diseñada puede multiplicar los clics en un enlace compartido, mientras que una imagen mal dimensionada, recortada o de baja calidad puede dañar la percepción de tu marca. Las especificaciones técnicas varían ligeramente entre plataformas, pero existen dimensiones y formatos que funcionan perfectamente en todas ellas. Esta guía cubre todo lo que necesitas saber para crear imágenes OG profesionales.
Dimensiones y proporciones de aspecto recomendadas por plataforma
La dimensión estándar que funciona mejor en todas las plataformas principales es 1200×630 píxeles, con una proporción de aspecto de 1.91:1. Esta es la especificación oficial de Facebook y también funciona correctamente en LinkedIn, WhatsApp y Telegram. Twitter/X con el tipo `summary_large_image` funciona mejor con una proporción de 2:1, es decir, 1200×600 px o similar. Si usas 1200×630, Twitter recortará ligeramente los bordes superior e inferior, por lo que debes asegurarte de que no haya elementos importantes en esas zonas. LinkedIn puede mostrar la imagen a 1200×627 px (su tamaño preferido) pero acepta cualquier imagen con proporción entre 1.91:1 y 1:1. Para posts de artículos de LinkedIn específicamente, se recomiendan 1104×736 px. WhatsApp muestra la imagen como miniatura cuadrada en conversaciones individuales o rectangular más grande en grupos y canales. Diseña tu imagen para que también se vea bien recortada en formato cuadrado centrado. La resolución mínima aceptada por Facebook es 200×200 px, pero imágenes más pequeñas se muestran como miniaturas muy pequeñas o no se muestran. Siempre usa 1200×630 o superior para obtener la vista previa grande y prominente.
Formatos de imagen compatibles y limitaciones de tamaño
Todas las plataformas sociales aceptan los formatos JPEG, PNG y GIF (estático) para imágenes OG. El formato WEBP es aceptado por la mayoría pero con menor compatibilidad en algunos scrapers más antiguos, por lo que se recomienda usar JPEG o PNG para mayor seguridad. JPEG es el mejor formato para fotografías y contenido con gradientes: ofrece compresión eficiente con buena calidad visual. Usa una calidad de exportación del 80-85% para equilibrar tamaño de archivo y nitidez. PNG es superior para contenido con texto, logotipos, iconos y fondos planos o con transparencia. Aunque los archivos PNG tienden a ser más grandes, el texto se ve más nítido que en JPEG. El límite de tamaño de archivo más restrictivo es el de Twitter, que recomienda imágenes de menos de 5 MB. Facebook acepta hasta 8 MB. Para optimizar el tiempo de carga del scraper y evitar timeouts, mantén tus imágenes OG por debajo de 1 MB. Imágenes muy grandes pueden causar que el scraper agote el tiempo de espera y no muestre ninguna imagen. El formato GIF animado no está bien soportado para vistas previas OG: la mayoría de plataformas solo muestra el primer fotograma. Para contenido animado, usa video directamente.
Principios de diseño para imágenes OG de alto impacto
El objetivo de la imagen OG es detener el scroll del usuario y comunicar el valor del contenido en menos de 2 segundos. Para lograrlo, aplica estos principios. **Texto en la imagen:** incluir el título o un gancho textual en la imagen aumenta el CTR, especialmente para contenido de blog y artículos. El texto debe ser legible a tamaño pequeño (recuerda que la imagen puede aparecer como miniatura). Usa fuentes en negrita, tamaño mínimo de 24px en la imagen final de 1200×630 y alto contraste entre texto y fondo. **Colores de marca:** la consistencia visual entre tu imagen OG y tu identidad corporativa genera reconocimiento. Los usuarios que ya conocen tu marca identificarán tu contenido más rápido en feeds saturados de información. **Jerarquía visual clara:** la imagen debe tener un punto focal evidente. Evita composiciones saturadas con demasiados elementos. Un fondo limpio, una imagen de producto o una persona en primer plano con texto superpuesto son las combinaciones más efectivas. **Zona segura:** deja un margen de al menos 5-10% en todos los bordes para que el contenido importante no sea recortado por las diferentes proporciones de aspecto de cada plataforma.
Herramientas para crear y gestionar imágenes Open Graph
Existen varias opciones para crear imágenes OG según tu nivel técnico y volumen de contenido. **Para creación manual:** Canva tiene plantillas específicas para imágenes OG (busca «Facebook Link Image» o «Open Graph» en la biblioteca de plantillas). Figma y Adobe Photoshop permiten exportar con las dimensiones exactas. Configura un marco de artboard de 1200×630 px y crea una plantilla reutilizable con los espacios para cambiar el título y la imagen de fondo. **Para generación automática:** si produces mucho contenido, considera las soluciones de generación dinámica de imágenes OG. Vercel OG genera imágenes desde código React, ideal para proyectos Next.js. Cloudinary puede generar imágenes OG con texto overlay desde parámetros de URL. Bannerbear y Placid son servicios SaaS para generar imágenes OG automáticamente desde plantillas y datos. **Para verificación:** después de crear la imagen, usa la herramienta de Vista Previa OG de WikiPlus para comprobar cómo se verá en cada plataforma antes de publicar el contenido. Esto te permite detectar problemas de recorte, texto ilegible o colores que no se ven bien en el tamaño reducido de las vistas previas.
Preguntas frecuentes
- ¿Puedo usar la misma imagen OG para todas las páginas de mi web?
- Tecnicamente sí, pero no es recomendable. Páginas diferentes deben comunicar valores diferentes. La home puede usar el logo y slogan de la marca, los artículos deben tener imágenes relevantes al tema específico, y las páginas de producto deben mostrar el producto. Imágenes genéricas reducen el CTR en redes sociales.
- ¿Las imágenes OG afectan al SEO de mi web en Google?
- Las etiquetas `og:image` no son leídas por Google para ranking. Sin embargo, Google puede usar la imagen de portada de un artículo (especificada a través de otros medios) para los Rich Snippets. El impacto SEO indirecto viene del mayor tráfico generado por mejores tasas de clic en redes sociales.
- ¿Qué hago si mi CMS no permite personalizar la imagen OG por página?
- Muchos plugins de SEO para WordPress (Yoast, Rank Math) y plataformas como Shopify permiten asignar una imagen OG distinta por página/producto. Si tu CMS no lo soporta, considera añadir manualmente las etiquetas OG en la plantilla HTML específica de cada tipo de contenido.