¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de imagen de tarjeta social para Open Graph

ColorDesarrolladorImagen

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

Programar

Ancho

píxeles

Altura

píxeles

Contenido

Título

Descripción

Nombre del sitio

Diseño y tema

Diseño

Tema

Fondo

Inicio del gradiente

Fin del gradiente

Ángulo del gradiente

Color de acento

Utilizado para la barra superior y el nombre del sitio.

Tipografía

Fuente

Tamaño del título: 72 Autoencoge para títulos largos para mantener una sola línea cuando sea posible.

Tamaño de la descripción: 32

Mostrar nombre del sitio

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Generador de imágenes de tarjeta social Open Graph

Generador de imagen de tarjeta social para Open Graph

Diseña imágenes de compartir pixel-perfectas para Open Graph, Twitter Cards, LinkedIn y Facebook directamente en tu navegador. Escribe el título, la descripción y el nombre del sitio, elige un diseño y un tema, luego descarga un PNG, JPG o WebP en las dimensiones exactas que cada plataforma exige — sin necesidad de herramientas de diseño ni subida.

Cómo Usar

Elige un preset (1200×630 para Open Graph, 1024×512 para Twitter) o establece ancho y altura personalizados.
Escribe el título, la descripción y el nombre del sitio que deseas en la tarjeta.
Elige un diseño (centrado, alineado a la izquierda o con acento en la barra superior) y un tema (claro, oscuro, color de marca o gradiente).
Ajusta la tipografía — familia de fuentes, tamaño del título y tamaño de la descripción — para que coincida con tu marca.
Haz clic en Descargar y guarda el PNG, JPG o WebP para usarlo como tu og:image o twitter:image.

Características

Dimensiones sociales correctas – Presets para Open Graph (1200×630), Twitter Card (1024×512), LinkedIn y Facebook.
Múltiples diseños – Plantillas centradas, alineadas a la izquierda y con acento en la barra superior para diferentes estilos de marca.
Temas claros, oscuros, de marca y gradientes – Cambia de fondo en un solo clic o usa tu propio color de marca.
Auto-reducir el título – Headlines largas se ajustan y reducen para que la tarjeta siga siendo legible.
Vista previa en lienzo en tiempo real – Cada cambio se vuelve a renderizar instantáneamente en un lienzo HTML5 real: lo que ves es lo que descargas.
Exportación en PNG, JPG y WebP – Elige el formato que se adapte a tu hosting y CDN.
Funciona completamente en tu navegador – Sin subida, sin cuenta, sin marca de agua.

 Preguntas frecuentes

¿Qué es el protocolo Open Graph?

Open Graph es un conjunto de <meta> etiquetas introducidas por Facebook que permiten a una página web describirse a sí misma para plataformas sociales. Las etiquetas más comunes son og:title, og:descriptiony og:image. Cuando alguien comparte un enlace, la plataforma lee estas etiquetas y muestra una tarjeta rica en lugar de un URL plano.
¿Cuál debe ser el tamaño de la imagen og:image?

La especificación de Open Graph recomienda una proporción de 1.91:1 con un mínimo de 600×315 píxeles. La mayoría de las plataformas funcionan mejor en 1200×630, lo que mantiene la tarjeta nítida en pantallas retina mientras se queda por debajo del límite de 8 MB de Facebook. Las tarjetas de Twitter suelen usar 1024×512 para el formato summary_large_image.
¿Por qué las plataformas sociales cachan URLs og:image?

Plataformas como Facebook, LinkedIn y Slack obtienen la imagen og:image una vez y la almacenan en su CDN para evitar que se cargue repetidamente desde tu origen cada vez que se comparte el enlace. Esta caché puede persistir durante días o semanas. Para forzar una actualización tras modificar la imagen, cambia la URL del archivo o usa el depurador de la plataforma (por ejemplo, el depurador de compartir de Facebook) para volver a analizar la página.
¿Cuál es la diferencia entre og:image y twitter:image?

og:image es parte del protocolo Open Graph y es leído por Facebook, LinkedIn, Slack, Discord y la mayoría de aplicaciones de mensajería. twitter:image pertenece a las tarjetas de Twitter y es leído por X (Twitter). Si solo og:image está presente, X pasará a usarlo, por lo que una sola imagen de alta calidad suele funcionar para ambas plataformas — pero ofrecer ambas te permite optimizar el tamaño según cada plataforma.
¿Por qué el título se reduce automáticamente cuando es largo?

Las tarjetas sociales tienen un lienzo fijo, por lo que un título largo que se salga del borde parece dañado. El API de HTML5 Canvas no permite que el texto se envuelva por sí mismo, por lo que el generador mide cada palabra con ctx.measureText(), divide el título en líneas y reduce el tamaño de la fuente en pasos hasta que el título quepa dentro del área segura. Esto mantiene que cada exportación sea legible sin necesidad de ajustes manuales.