Guía de tamaños óptimos y creación de imágenes OGP - Recomendaciones por plataforma
Qué son las imágenes OGP - Miniaturas que impulsan el compartir social
Las imágenes OGP (Open Graph Protocol) son las miniaturas de vista previa que se muestran al compartir enlaces en redes sociales. Una imagen OGP atractiva puede aumentar significativamente la tasa de clics del enlace, siendo un elemento visual clave para la difusión del contenido.
Función de las imágenes OGP:
- Se muestran automáticamente al compartir enlaces en Twitter, Facebook, LINE y otras plataformas
- Actúan como la "fachada" del contenido, determinando si el usuario hace clic
- Transmiten el tema del artículo y la imagen de marca
- También pueden mostrarse en resultados de búsqueda y vistas previas de mensajes
Meta tags básicos:
<meta property="og:image" content="https://example.com/image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Tags de Twitter Card:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/image.png">
Errores comunes:
- URL de imagen usando ruta relativa (debe ser URL absoluta)
- Tamaño de imagen demasiado pequeño (por debajo del requisito mínimo de la plataforma)
- Imagen bloqueada por robots.txt o autenticación
- Página HTTPS referenciando imagen HTTP
Tamaños recomendados por plataforma - Solución óptima por plataforma
Las diferentes plataformas sociales muestran las imágenes OGP de manera diferente y tienen distintos tamaños recomendados. A continuación se presentan las especificaciones óptimas para cada plataforma principal.
Recomendación universal (una imagen para todas las plataformas):
1200x630px, proporción 1.91:1. Este es el tamaño con mejor compatibilidad, mostrándose bien en todas las plataformas principales. Mantener el tamaño de archivo bajo 1MB, se recomienda PNG o JPEG de alta calidad.
Twitter (X):
- summary_large_image: 1200x628px (proporción 2:1)
- summary (imagen pequeña): cuadrado de 144x144px o más
- Tamaño máximo de archivo: 5MB
- Soporta PNG, JPEG, GIF (estático)
Facebook:
- Recomendado: 1200x630px (1.91:1)
- Mínimo: 600x315px
- Alta resolución: mínimo 1080px de ancho
- Límite de tamaño: 8MB
LINE:
- Recomendado: 1200x630px
- Cuando se muestra recortado en cuadrado: área central de 630x630px
- El contenido importante debe concentrarse en el área central
Discord:
- Imagen grande: recomendado 1200x630px
- Miniatura embed: máximo 400x300px de visualización
Consejo práctico:
Crear una imagen de 1200x630px con la información principal (título, logo) concentrada en el área central de 630x630px. Así, incluso si se recorta en cuadrado, el contenido clave se preserva.
Principios de diseño para imágenes OGP efectivas
Las imágenes OGP compiten por la atención con gran cantidad de otro contenido en el feed. Seguir estos principios de diseño puede mejorar el atractivo y la tasa de clics de la imagen.
Legibilidad del texto:
- Texto del título grande y llamativo, legible incluso en pantallas pequeñas de móvil
- Controlar el número de caracteres a 15 o menos, evitar sobrecarga de información
- Usar combinaciones de colores de alto contraste (texto oscuro + fondo claro o viceversa)
- Añadir sombra o bloque de color de fondo al texto para asegurar legibilidad sobre cualquier fondo
Consistencia de marca:
- Usar esquema de colores y tipografía unificados
- Colocar el logo en posición fija (generalmente esquina superior izquierda o inferior derecha)
- Establecer una plantilla visual reconocible para que los usuarios identifiquen la fuente de un vistazo
Jerarquía visual:
- Título principal más grande y prominente
- Subtítulo o etiqueta de categoría como información auxiliar
- Imagen de fondo no demasiado compleja, evitar interferir con el texto
Diseños a evitar:
- Solo texto sin gráficos (falta de atractivo visual)
- Demasiados detalles (ilegibles en tamaño de miniatura)
- Colores similares a la UI de la plataforma (fácilmente ignorados)
- Usar fotos de stock (falta de singularidad)
Generación automática de imágenes OGP - Enfoque programático
Para blogs o sitios de contenido, crear manualmente una imagen OGP para cada artículo no es práctico. Las soluciones de generación automática pueden crear dinámicamente imágenes OGP basadas en el título y categoría del artículo.
Solución Node.js + Canvas:
Usar @napi-rs/canvas o node-canvas para generar imágenes en tiempo de build. Leer el título del artículo, dibujar texto sobre una plantilla predefinida, exportar como PNG. Personalizable en fuentes, colores y diseño.
Solución Satori + React:
La biblioteca Satori de Vercel renderiza JSX a SVG, luego lo convierte a PNG. Usa componentes React para definir plantillas OGP, soporta diseño Flexbox, buena experiencia de desarrollo. @vercel/og de Next.js se basa en esta tecnología.
Solución Puppeteer/Playwright:
Usar navegador headless para renderizar página HTML y capturar pantalla. La más flexible (soporta cualquier CSS), pero la más lenta. Adecuada para diseños complejos o escenarios que requieren fuentes web.
Mejores prácticas de generación automática:
- Pre-generar y cachear, evitar generación en tiempo de ejecución
- Ajuste automático de línea y escala de texto, adaptándose a títulos de diferente longitud
- Usar diferentes colores de fondo o iconos por categoría
- Verificar tras la generación que el tamaño de imagen y archivo cumplen los requisitos
Implementación y depuración - Solucionar problemas de visualización
La implementación de imágenes OGP parece simple, pero el comportamiento de rastreo y los mecanismos de caché de cada plataforma frecuentemente causan que las imágenes no se muestren o se muestren incorrectamente. A continuación se presentan los métodos de depuración.
Herramientas de depuración:
- Facebook Sharing Debugger: verificar cómo Facebook analiza tus tags OGP, puede forzar actualización de caché
- Twitter Card Validator: previsualizar el efecto de la tarjeta de Twitter
- LINE URL Checker: verificar el resultado del análisis OGP de LINE
- Open Graph Preview: extensión de navegador, previsualización en tiempo real del efecto OGP
Problemas de caché:
Las plataformas sociales cachean las imágenes OGP. Tras actualizar la imagen es necesario limpiar manualmente la caché: Facebook usa el botón "Scrape Again" del Sharing Debugger; Twitter generalmente se actualiza automáticamente en unas horas; LINE tiene caché más largo, puede necesitar esperar 24 horas.
Causas comunes de fallo en el rastreo de imágenes:
- Respuesta lenta del servidor (timeout del crawler de la plataforma generalmente 3-5 segundos)
- URL de imagen con demasiadas redirecciones 301/302
- CDN aún no ha desplegado la imagen más reciente
- robots.txt bloquea el acceso del crawler a la ruta de la imagen
Mejores prácticas:
- Alojar imágenes en CDN para asegurar respuesta rápida
- Evitar parámetros de consulta en la URL de la imagen (algunas plataformas no los soportan)
- Establecer cabecera de respuesta Content-Type correcta
- Verificar inmediatamente con herramientas de depuración tras el despliegue
Problemas comunes de OGP y soluciones
Resumen de los problemas más frecuentes en la implementación de imágenes OGP y sus soluciones.
Problema: la imagen no se muestra:
- Verificar que la URL de og:image sea una ruta absoluta (incluyendo https://)
- Confirmar que la URL de la imagen es accesible públicamente (sin autenticación, sin restricción de IP)
- Verificar que el tamaño de imagen cumple el requisito mínimo de la plataforma
- Comprobar que el certificado SSL es válido (certificados expirados causan fallo en el rastreo)
Problema: se muestra imagen antigua:
- Usar herramientas de depuración de cada plataforma para forzar actualización de caché
- Cambiar el nombre del archivo de imagen (no solo actualizar el contenido) puede eludir la caché
- Añadir parámetro de versión en la URL: image.png?v=2
Problema: imagen recortada incorrectamente:
- Concentrar contenido importante en el área central de la imagen
- Evitar colocar texto o logo en los bordes
- Probar el efecto de recorte en diferentes plataformas
Problema: diferentes plataformas muestran diferentes imágenes:
- Asegurar que og:image y twitter:image apuntan a la misma imagen (a menos que sea intencional)
- Establecer solo un og:image en la página (con múltiples, la selección de la plataforma es incierta)
Problema: OGP no se rastrea en páginas dinámicas:
- Los crawlers de plataformas sociales no ejecutan JavaScript
- Los meta tags OGP deben estar en el HTML renderizado del lado del servidor
- Las SPA necesitan SSR o pre-renderizado para proporcionar tags OGP