Qué es una imagen Open Graph
La imagen Open Graph (también llamada og:image o "social card") es la imagen que aparece cuando alguien comparte el link de tu página en Twitter, LinkedIn, WhatsApp, Slack, Discord o Telegram. Es la primera impresión visual fuera de tu sitio. Sin ella, tus links se ven feos: texto pelado o un thumbnail aleatorio recortado mal.
Por qué importa
Los links con previsualización visual reciben significativamente más clicks que los links sin imagen. Es la diferencia entre que alguien te de una segunda oportunidad o pase de largo en el feed. Para landings, blog posts, productos o lanzamientos, la OG image es una pieza de marketing imprescindible.
Tamaño y formato correcto
- 1200x630 píxeles: estándar oficial de Facebook, válido para casi todo.
- Formato PNG o JPG: PNG si tenés tipografía y bordes nítidos; JPG si es foto.
- Peso bajo 1 MB: idealmente bajo 300 KB. Plataformas lentas a veces no esperan.
- Texto centrado: muchas plataformas recortan los bordes, sobre todo en mobile.
Reglas tipográficas
El texto tiene que verse a tamaño thumbnail (cuando alguien ve la card chica en el feed de su celular). Eso implica: tipografía con peso bold, mínimo 60-80 px en el archivo de 1200x630, alto contraste con el fondo. Si tu título no se lee a 200x100 px, no funciona como OG. Mantené máximo dos líneas y resistí la tentación de meter mucho texto.
Ideas que funcionan bien
- Título grande sobre fondo sólido: simple, alto contraste, escalable. La mayoría de los blogs técnicos hacen esto.
- Título + subtítulo + marca abajo: estructura más rica, sigue siendo legible.
- Generación automática por página: muchos sitios generan OG dinámicamente con el título de cada artículo. Vercel y Cloudflare ofrecen workers para esto.
- Plantilla con foto de fondo: si la foto es buena y el texto tiene contraste suficiente.
Validación y cache
Después de subir la imagen, validá con el Sharing Debugger de Facebook y el Card Validator de Twitter. Estos validadores fuerzan un re-fetch y limpian el cache, importante porque cambios en og:image suelen tardar en propagarse. Si actualizás la imagen pero seguís viendo la vieja, es cache: usá los validadores para forzar la actualización.
Consejos finales
Mantené coherencia visual con tu marca. Si usás colores corporativos en tu sitio, usalos también en las OG. La consistencia ayuda a que la audiencia reconozca tu contenido en feeds saturados. Y testeá: una buena OG puede mejorar el CTR de tus links en redes hasta un 40%.