Imágenes OG: por qué tus enlaces se ven mal en redes sociales (y cómo solucionarlo)

Qué es Open Graph y por qué importa

Open Graph (OG) es un protocolo creado originalmente por Facebook en 2010 que permite a las páginas web controlar cómo aparece su contenido cuando se comparte en plataformas de redes sociales. Cuando alguien comparte una URL en Facebook, Twitter, LinkedIn, Slack o aplicaciones de mensajería, la plataforma lee las metaetiquetas Open Graph integradas en el HTML de la página para generar una tarjeta de vista previa enriquecida con título, descripción e imagen.

Sin etiquetas Open Graph, las plataformas intentan rastrear tu página y adivinar qué mostrar. El resultado es a menudo una vista previa rota con una imagen faltante, un título truncado o una descripción irrelevante. Esto lleva a menor compromiso porque los usuarios son mucho menos propensos a hacer clic en un enlace que parece incompleto o poco confiable.

Una imagen OG bien elaborada puede mejorar dramáticamente las tasas de clics. Los estudios han demostrado que las publicaciones en redes sociales con imágenes de vista previa adecuadas reciben significativamente más compromiso que las que no las tienen. Para cualquier sitio web que dependa del tráfico social, configurar Open Graph correctamente no es opcional — es esencial.

Especificaciones de imágenes OG

Tamaño recomendado

El tamaño OG recomendado universalmente es 1200 x 630 píxeles con una relación de aspecto 1.91:1. Esta dimensión funciona de manera confiable en todas las principales plataformas y dispositivos. Si bien las plataformas pueden recortar o redimensionar imágenes, comenzar con 1200x630 garantiza la mejor visualización posible en todas partes.

Formato y tamaño de archivo

• Formatos soportados: JPEG, PNG, GIF (solo el primer fotograma) y WebP (soporte limitado)
• Formato recomendado: JPEG para fotografías, PNG para gráficos con texto o transparencia
• Tamaño máximo de archivo: Mantener imágenes bajo 5 MB para Facebook y bajo 5 MB para Twitter. En la práctica, apuntar a menos de 1 MB para carga rápida
• Tamaño mínimo: Facebook requiere al menos 200x200 píxeles, pero las imágenes más pequeñas que 600x315 se mostrarán como miniaturas pequeñas en lugar de tarjetas de vista previa grandes

Detalles de la relación de aspecto

Relación de aspecto	Dimensiones	Mejor para
1.91:1	1200 x 630	Facebook, LinkedIn, compartir general
2:1	1200 x 600	Twitter summary_large_image
1:1	1200 x 1200	Tarjeta resumen de Twitter, algunas apps

Requisitos específicos por plataforma

Facebook

Facebook usa el protocolo Open Graph estándar y es la plataforma más tolerante. Las imágenes deben tener al menos 200x200 píxeles, pero cualquier cosa por debajo de 600x315 se muestra como una miniatura pequeña. Para el formato de tarjeta de vista previa grande, usar 1200x630 píxeles. Facebook almacena en caché las imágenes OG de forma agresiva, por lo que después de actualizar una imagen hay que limpiar el caché usando el Sharing Debugger.

Twitter (X)

Twitter usa su propio sistema de Cards junto con las etiquetas Open Graph. Hay que incluir las etiquetas meta twitter:card además de las etiquetas OG estándar. Twitter soporta dos tipos de tarjetas relevantes para imágenes:

• summary: Muestra una pequeña miniatura cuadrada (mínimo 144x144, ratio 1:1)
• summary_large_image: Muestra una imagen rectangular grande (mínimo 300x157, ratio 2:1 recomendado)

Si no hay etiquetas específicas de Twitter, Twitter recurre a leer las etiquetas OG estándar.

LinkedIn

LinkedIn sigue de cerca el estándar Open Graph. El tamaño de imagen recomendado es 1200x627 píxeles. LinkedIn es estricto con las dimensiones de las imágenes — las imágenes demasiado pequeñas no se mostrarán en absoluto. LinkedIn también almacena en caché las URL compartidas, y puedes usar su herramienta Post Inspector para actualizar las vistas previas almacenadas en caché.

Slack y aplicaciones de mensajería

Slack, Discord, Telegram, WhatsApp e iMessage todos leen las etiquetas Open Graph para generar vistas previas de enlaces. Estas plataformas generalmente manejan bien las imágenes de 1200x630. Slack se beneficia particularmente de las etiquetas og:image:width y og:image:height porque las usa para renderizar la vista previa antes de que la imagen se cargue completamente.

Metaetiquetas HTML para imágenes OG

Aquí está el conjunto completo de metaetiquetas que debes incluir en la sección <head> de tu HTML:

<!-- Etiquetas Open Graph esenciales -->
<meta property="og:title" content="El título de tu página" />
<meta property="og:description" content="Una breve descripción del contenido de la página." />
<meta property="og:image" content="https://example.com/images/og-preview.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<!-- Etiquetas de imagen recomendadas -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Descripción de la imagen para accesibilidad" />

<!-- Etiquetas Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="El título de tu página" />
<meta name="twitter:description" content="Una breve descripción del contenido de la página." />
<meta name="twitter:image" content="https://example.com/images/og-preview.jpg" />
<meta name="twitter:image:alt" content="Descripción de la imagen para accesibilidad" />

Puntos clave sobre las etiquetas

• og:image debe usar una URL absoluta. Las rutas relativas como /images/og.jpg no funcionarán. Siempre incluir la URL completa con el protocolo (https://).
• og:image:width y og:image:height son técnicamente opcionales pero muy recomendados. Permiten a las plataformas asignar el espacio correcto para la imagen antes de que se cargue, evitando desplazamientos de diseño.
• twitter:card determina el diseño que usa Twitter. Configurarlo en summary_large_image para el formato de vista previa grande.
• og:image:alt proporciona accesibilidad para lectores de pantalla y se considera una buena práctica.

Múltiples imágenes

Puedes especificar múltiples imágenes OG repitiendo la etiqueta og:image. Las plataformas típicamente usarán la primera, pero algunas pueden permitir al usuario elegir:

<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image" content="https://example.com/images/secondary.jpg" />

Mejores prácticas de diseño para imágenes OG efectivas

Mantener el texto mínimo y grande

Las tarjetas de vista previa de redes sociales aparecen en varios tamaños según la plataforma, el dispositivo y el contexto. El texto en tu imagen OG debe ser lo suficientemente grande para leer incluso cuando la imagen se muestra a 400 píxeles de ancho. Limitarse a un titular y opcionalmente un subtítulo corto. Evitar párrafos o letra pequeña.

Usar una zona segura

Las plataformas pueden recortar ligeramente tu imagen en diferentes dispositivos. Mantener todo el contenido crítico — texto, logos, elementos visuales clave — dentro del 80% central de la imagen. Dejar márgenes de al menos 60 píxeles en cada lado.

Branding consistente

Incluir tu logo o marca en cada imagen OG para que los enlaces compartidos sean inmediatamente reconocibles. Usar colores de marca, fuentes y plantillas de diseño consistentes en todas tus páginas. Esto construye reconocimiento visual en los feeds sociales.

Elegir colores de alto contraste

Las imágenes OG aparecen en feeds de redes sociales concurridos junto a fotos, anuncios y otro contenido. El alto contraste entre el texto y el fondo garantiza legibilidad. El texto oscuro sobre fondos claros o el texto blanco sobre fondos oscuros funcionan bien. Evitar colocar texto sobre fondos fotográficos complejos sin una superposición de color.

Evitar imágenes con demasiado texto

Facebook históricamente penalizó los anuncios con demasiado texto (la regla del 20%), y aunque ya no se aplica estrictamente, el principio sigue siendo válido. Las imágenes que son principalmente texto parecen anuncios y reciben menos compromiso. Usar la imagen para complementar tu título, no repetirlo.

Diseñar para el modo oscuro

Muchos usuarios navegan por las redes sociales en modo oscuro. Probar cómo se ve tu imagen OG en fondos claros y oscuros. Evitar imágenes con fondos transparentes o bordes blancos que desaparecen en modo oscuro.

Cómo crear imágenes OG

Hay varios enfoques para crear imágenes OG, desde el diseño manual hasta la generación completamente automatizada.

Herramientas de diseño manual

Herramientas de diseño como Figma, Canva y Adobe Express ofrecen plantillas de 1200x630 píxeles. Este enfoque te da control creativo total pero no escala bien si tienes cientos o miles de páginas.

Generación automatizada

Para blogs y contenido dinámico, generar imágenes OG de forma programática es el enfoque más eficiente. Muchos frameworks ofrecen soluciones integradas o de la comunidad:

• Next.js: El paquete @vercel/og genera imágenes en el borde usando sintaxis similar a JSX
• Sitios estáticos: Los scripts de construcción pueden usar bibliotecas como sharp o canvas para generar imágenes durante el proceso de construcción
• Servicios API: APIs dedicadas de imágenes OG aceptan parámetros y devuelven imágenes renderizadas bajo demanda

Usar un generador en línea

Si necesitas una imagen OG rápida sin configurar ninguna infraestructura, un generador en línea es el camino más rápido. Prueba nuestro generador gratuito de imágenes OG para crear imágenes Open Graph correctamente dimensionadas con texto personalizado, colores y branding. Simplemente ingresa tu título, ajusta el estilo y descarga la imagen lista para usar.

Probar y depurar imágenes OG

Después de agregar etiquetas Open Graph a tus páginas, siempre prueba antes de compartir. Aquí están las herramientas de depuración esenciales:

Facebook Sharing Debugger

Visita el Facebook Sharing Debugger, ingresa tu URL y haz clic en "Depurar". La herramienta muestra exactamente qué etiquetas OG detecta Facebook, muestra la imagen de vista previa e informa cualquier advertencia o error. Usar el botón "Volver a raspar" para limpiar el caché de Facebook después de realizar cambios.

Twitter Card Validator

El Twitter Card Validator previsualiza cómo aparecerá tu enlace en un tweet. Ingresa tu URL y verifica que el tipo de tarjeta correcto, la imagen, el título y la descripción se muestren correctamente.

LinkedIn Post Inspector

El Post Inspector de LinkedIn funciona de manera similar. Ingresa la URL de la página que deseas verificar, y mostrará la tarjeta de vista previa que LinkedIn generaría. Usarlo para actualizar el caché de LinkedIn después de actualizar las etiquetas.

Extensiones de navegador

Varias extensiones de navegador te permiten inspeccionar las etiquetas Open Graph en cualquier página sin salir del navegador. Estas herramientas muestran todas las metaetiquetas, muestran la imagen de vista previa y señalan problemas comunes. Son útiles para verificar rápidamente páginas de competidores o auditar tu propio sitio.

Inspección manual

Siempre puedes ver las metaetiquetas sin procesar inspeccionando el código fuente HTML de tu página. En Chrome, hacer clic derecho en la página, seleccionar "Ver código fuente de la página" y buscar og: para encontrar todas las etiquetas Open Graph. Verificar que la URL og:image sea absoluta y accesible.

Errores comunes a evitar

Usar URLs de imágenes relativas

El error de imagen OG más frecuente es usar una ruta relativa como /images/og.jpg en lugar de una URL absoluta como https://example.com/images/og.jpg. Los rastreadores de redes sociales obtienen la imagen de un servidor separado y no tienen forma de resolver rutas relativas.

Olvidar actualizar las imágenes en caché

Todas las plataformas principales almacenan en caché las imágenes OG después del primer rastreo. Si actualizas tu imagen pero no limpias el caché de la plataforma, la imagen antigua continúa apareciendo en las vistas previas. Siempre usar la herramienta de depuración de la plataforma para forzar un nuevo rastreo después de realizar cambios.

Usar imágenes demasiado pequeñas

Las imágenes por debajo de las dimensiones mínimas (200x200 para Facebook, 300x157 para Twitter) no se mostrarán en absoluto o se renderizarán como miniaturas diminutas en lugar de tarjetas de vista previa grandes. Siempre usar 1200x630 para garantizar el formato de tarjeta grande.

Olvidar la etiqueta twitter:card

Sin la metaetiqueta twitter:card, Twitter muestra por defecto la tarjeta básica "summary" con una pequeña imagen cuadrada. Si quieres la vista previa de imagen grande en Twitter, debes incluir explícitamente <meta name="twitter:card" content="summary_large_image" />.

Servir imágenes a través de HTTP

Si tu sitio usa HTTPS pero la URL og:image apunta a un recurso HTTP, algunas plataformas bloquearán o ignorarán la imagen debido a restricciones de contenido mixto. Siempre servir imágenes OG a través de HTTPS.

Ignorar el tamaño del archivo de imagen

Una imagen OG de 8 MB podría técnicamente cumplir con los requisitos de dimensiones, pero los rastreadores pueden agotar el tiempo mientras la descargan. Comprimir imágenes JPEG a calidad 80-85% o usar archivos PNG optimizados para mantener los tamaños de archivo bajo 1 MB.

No incluir texto alternativo

La etiqueta og:image:alt se suele pasar por alto, pero tiene un propósito de accesibilidad importante. Los lectores de pantalla usan este texto para describir la imagen a usuarios con discapacidad visual. Solo toma unos segundos añadir y mejora la experiencia para todos los usuarios.

Conclusión

Las imágenes Open Graph son una de las optimizaciones más simples e impactantes que puedes hacer para el intercambio en redes sociales. Al usar las dimensiones correctas de 1200x630, incluir las metaetiquetas adecuadas y seguir las mejores prácticas de diseño, te aseguras de que cada enlace compartido represente tu contenido de la mejor manera posible.

Comienza auditando tus páginas existentes con las herramientas de depuración mencionadas anteriormente, corrige cualquier problema y establece una plantilla consistente para el nuevo contenido. Si necesitas generar imágenes OG rápidamente, prueba nuestro generador gratuito de imágenes OG para crear tarjetas de vista previa profesionales en segundos.