Cómo usar: Generador de imágenes OG
- Elige una plantilla: «Gradient», «Split», «Minimal», «Spotlight» o «Card». Cada una tiene una combinación de colores a juego que puedes cambiar.
- Escribe el título y el subtítulo. El tamaño de la fuente del título se reduce automáticamente y se ajusta para que siempre quepa.
- Añade el nombre de tu marca, un emoji, un logotipo o una foto de fondo (con un nivel de oscurecimiento ajustable para que el texto se vea bien).
- Descarga el archivo PNG (o un JPEG más pequeño, si se trata de fotos) y súbelo a tu página web.
- Introduce las URL de la página y de la imagen, y copia las metaetiquetas «og:» y «twitter:» generadas en la página de tu
<head>.
¿Qué es una imagen OG?
Una imagen OG (Open Graph) es la imagen que se muestra cuando se comparte un enlace en Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage y muchas otras apps. Se define con la og:image etiqueta meta del protocolo Open Graph, creado originalmente por Facebook y que ahora leen casi todas las plataformas que muestran vistas previas de enlaces. X, además, lee twitter:card — configurada en summary_large_image muestra la imagen a ancho completo. Una vista previa clara y con tu imagen de marca hace que un enlace compartido destaque en un feed ajetreado y le dice a la gente lo que va a encontrar antes de hacer clic.
El tamaño adecuado: 1200 × 630
1200 × 630 píxeles (una relación de aspecto de 1,91:1) es el tamaño que recomienda Facebook y se muestra con nitidez en todas las plataformas. La tarjeta de resumen grande de X usa un marco de 2:1, por lo que es posible que se recorten unos pocos píxeles en la parte superior e inferior; este generador mantiene el texto bien dentro de un margen de seguridad. Mantén el archivo por debajo de los 5 MB (el límite de X; Facebook permite 8 MB); un PNG de esta herramienta suele ocupar unos cientos de KB, y el JPEG es más pequeño para fondos con fotos.
Las metaetiquetas que necesitas
<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">La og:image URL debe ser absoluta (incluyendo https://) y de acceso público —no detrás de un inicio de sesión, bloqueada por robots.txt ni servida desde localhost—. Declarar el ancho y la altura permite a Facebook mostrar la vista previa desde el primer momento en que se comparte, en lugar de esperar a que se cargue la imagen. Crea el resto de tus etiquetas head con el Generador de etiquetas meta y comprueba el resultado en vivo con el Open Graph Checker.
Consejos de diseño para las vistas previas de los enlaces
- Texto breve y grande. Las vistas previas suelen mostrarse con unos 500 píxeles de ancho o menos en los móviles. Intenta que el título tenga entre 4 y 10 palabras; la función de ajuste automático te avisará cuando tenga que truncarlo.
- No repitas la barra de la URL. Las plataformas ya muestran tu dominio y el título de la página debajo de la imagen, así que usa la imagen para llamar la atención, no el titular completo más la descripción.
- Alto contraste. Usa el control deslizante para oscurecer las fotos, de modo que el texto blanco siga siendo legible, y comprueba cómo se ve tanto con temas claros como oscuros de la aplicación.
- Una imagen por página. Las imágenes OG únicas para páginas importantes —entradas de blog, páginas de productos, documentos— llaman mucho más la atención que un único logotipo para todo el sitio web.
- Actualiza la caché. Las plataformas almacenan las vistas previas en caché. Después de cambiar una imagen, vuelve a rastrear la URL en el «Sharing Debugger» de Facebook o en el «Post Inspector» de LinkedIn, o cambia el nombre del archivo.
En Webflow, configura la imagen por página en Ajustes de la página → Ajustes de Open Graph, o vincúlala a un campo de imagen para las páginas de colecciones del CMS.
También se busca como: imagen de og, imagen de open graph, imagen para compartir en redes sociales, imagen de la tarjeta de twitter, imagen de vista previa del enlace, 1200 x 630, vista previa en redes sociales, og:image.
Herramientas que combinan con: Generador de imágenes OG
- Code to Image — Paste a snippet and get a polished code screenshot in seconds: syntax highlighting for JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go and PHP, a choice of themes, a window frame with a file name, a gradient or transparent background, padding and line numbers.
- SERP Preview — Write a title tag and meta description and see exactly where Google is likely to cut them off — measured in pixels, not just characters, on desktop and mobile.
- Cambiador de tamaño de imágenes — Cambia el tamaño de una foto a unas dimensiones exactas en píxeles o a un porcentaje, recórtala para que se adapte al tamaño de las redes sociales o encájala en un marco con un color de fondo, todo ello directamente en tu navegador.
- Compresor de imágenes — Reduce el tamaño de las fotos y los gráficos entre un 50 % y un 90 % sin que se note ninguna pérdida de calidad.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen de Open Graph?
¿Debería usar PNG o JPEG para mi imagen OG?
¿Por qué Facebook o LinkedIn siguen mostrando mi foto antigua?
¿Necesito etiquetas de Twitter (X) aparte?
twitter:card configurarlo para summary_large_image para que se vea la imagen grande. El fragmento de código incluye ambas opciones por si acaso.