Cuando pegas un enlace en un mensaje, un tuit, una publicación de LinkedIn o un canal de Slack, la plataforma genera una tarjeta de vista previa: una imagen grande, un título, un fragmento. Esa imagen es la imagen Open Graph (OG), y hace más trabajo que tu propio titular. En un feed que se desplaza a toda velocidad, es la imagen la que detiene el pulgar. Una vista previa en blanco o rota transmite descuido y se ignora.
Aquí tienes cómo crear una que se gane el clic, con el tamaño correcto y con texto que de verdad se pueda leer.
El tamaño: 1200×630
La imagen OG estándar mide 1200×630 píxeles, una proporción de 1,91:1. Facebook, LinkedIn, Slack, Discord y la mayoría de los sistemas de vista previa de enlaces están diseñados en torno a ella. Acierta con este tamaño y estarás cubierto casi en todas partes.
Según dónde acabe el enlace, aparecen algunos tamaños relacionados:
| Plataforma / uso | Tamaño | Proporción |
|---|---|---|
| Open Graph (por defecto) | 1200×630 | 1,91:1 |
| Tarjeta grande de Twitter/X | 1200×628 | ~1,91:1 |
| Miniatura de YouTube | 1280×720 | 16:9 |
| Cuadrada (feeds/IG) | 1080×1080 | 1:1 |
| Historia / vertical | 1080×1920 | 9:16 |
No necesitas todos estos formatos para una entrada de blog: el de 1200×630 es el caballo de batalla. Pero si además vas a crear una miniatura de vídeo o una publicación cuadrada, conviene generar la forma correcta en lugar de recortar mal una sola imagen para que encaje.
Reglas de texto: legible a tamaño de miniatura
El error que arruina las imágenes OG es tratarlas como un póster que verás a pantalla completa. No lo harás. La mayoría de la gente ve la tarjeta a quizá un tercio de su tamaño real, en un móvil, a media pantalla mientras se desplaza. Diseña para eso.
- Texto grande, pocas palabras. Un título corto —de cinco a ocho palabras— que se lea cuando la tarjeta se reduzca. Si tienes que entornar los ojos a tamaño completo, en el feed será ilegible.
- Contraste fuerte. Texto claro sobre fondo oscuro o saturado, o viceversa. El texto sobre una foto recargada y sin ningún fondo de apoyo desaparece.
- Mantén lo importante centrado. Cada plataforma recorta los bordes de forma un poco distinta. Mantén el texto y los logotipos lejos de los márgenes exteriores para que nada quede cortado.
- Una sola idea por imagen. La imagen OG es un gancho, no un resumen. Título, quizá un subtítulo, y listo.
Fondos que hacen resaltar el texto
Un degradado plano es la opción fiable. Le da al texto una base limpia sobre la que apoyarse, se ve moderno y nunca compite con las palabras como sí lo hace una foto recargada. Un degradado de oscuro a un poco más oscuro con texto claro es casi infalible.
La herramienta de imagen OG está construida exactamente en torno a esto: elige un preajuste de tamaño (OG 1200×630, Twitter, YouTube, cuadrada o historia), escoge un fondo con degradado y añade tu título y subtítulo. Obtienes una tarjeta para compartir que se lee con claridad a cualquier tamaño, sin abrir una aplicación de diseño completa.
El HTML que hace que aparezca
Crear la imagen es la mitad del trabajo. La plataforma tiene que saber dónde encontrarla. Añade estas etiquetas al <head> de tu página:
<meta property="og:image" content="https://tusitio.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Tu título">
<meta property="og:description" content="Una frase clara.">
<meta name="twitter:card" content="summary_large_image">
La línea twitter:card con el valor summary_large_image es la que te da la tarjeta grande en X en lugar de una miniatura diminuta. Las URL absolutas (con https://) importan: las rutas relativas a menudo no se resuelven cuando un rastreador descarga tu página.
Después de publicar, pruébalo. Pega tu URL en el depurador de vista previa de enlaces de una plataforma (el Sharing Debugger de Facebook, el Post Inspector de LinkedIn) para confirmar que la imagen carga y para borrar cualquier versión antigua en caché. Las plataformas guardan las vistas previas en caché de forma agresiva, así que si actualizaste la imagen y sigues viendo la antigua, el botón de volver a rastrear del depurador es la solución.
Créala, no la subas
Todo funciona en tu navegador: la imagen se compone con Canvas localmente y nunca se sube a ningún servidor. Es gratis, sin registro, sin marca de agua estampada sobre tu tarjeta para compartir, y funciona sin conexión después de la primera visita. Genera la de 1200×630, coloca las etiquetas meta, pásala una vez por un depurador y tus enlaces empezarán a cumplir su cometido.