Generador de imágenes OG: creador de imágenes para compartir en redes sociales

Una imagen Open Graph es la imagen que aparece cuando se pega un enlace en un chat, un tweet o un canal de Slack, y cada plataforma que renderiza uno espera un lienzo de aproximadamente 1200 × 630 píxeles, el tamaño en el que se diseñaron las tarjetas og:image de Facebook y resumen_imagen_grande de Twitter. Si se equivoca en el tamaño, la imagen saldrá recortada, borrosa o comprimida; Si se equivoca en el diseño, el título se leerá como una franja ilegible frente a una foto ocupada. Esta herramienta compone la imagen con la resolución objetivo real utilizando la API Canvas 2D, por lo que lo que ve en la vista previa es la cuadrícula de píxeles exacta que se incluye en el PNG.

Elija un fondo: un color plano, un degradado lineal de dos pasos creado a partir de dos colores que usted elija, o una foto cargada que se recorta para llenar el marco completo de 1200 × 630 de la misma manera que lo haría una portada CSS de tamaño de fondo:, en lugar de estirarse desproporcionadamente. Escriba un título y un subtítulo opcional: ambos se miden carácter por carácter frente a las propias métricas de fuente del lienzo, por lo que un título que es demasiado largo para caber en una línea se ajusta a una segunda o tercera línea en un límite de palabra real en lugar de desbordarse del borde o quedar truncado de manera invisible. Elija alineación central o izquierda, elija un color de texto que se lea sobre su fondo y coloque un logotipo opcional en la esquina con un tamaño fijo y legible.

Debajo del lienzo, cuatro pequeñas tarjetas se aproximan a cómo se ve la imagen terminada una vez que una plataforma real la envuelve en su propio cromo: la tarjeta de Twitter/X muestra solo el dominio y un título en negrita debajo de la imagen sin línea de descripción, Facebook agrega una franja de dominio en mayúsculas encima de un bloque de título y descripción, LinkedIn coloca el dominio debajo del título sin ninguna descripción, y la inserción de Discord coloca el dominio, el título y la descripción encima de la imagen en su propio tema oscuro. Estas son aproximaciones diseñadas para fines de planificación, claramente etiquetadas como ilustrativas, con una línea de dominio que usted escribe, no una captura de pantalla en vivo o una captura de pantalla de las plataformas reales, ya que compartir un enlace y permitir que el rastreador de cada plataforma lea las metaetiquetas og:image y og:title reales de su página es lo que realmente produce la tarjeta en vivo.

Todo se representa localmente en un elemento de lienzo HTML en su navegador: el título, el subtítulo, el fondo cargado y el logotipo nunca salen de su dispositivo, y el archivo exportado es un PNG canvas.toBlob() limpio que contiene solo lo que usted compuso: no hay bordes de maqueta, barras de navegador falsas ni logotipos de plataforma integrados en la imagen descargada. Si luego también necesita cambiar el tamaño o convertir el PNG exportado, las herramientas de cambio de tamaño y conversión de imágenes de este sitio continúan justo donde termina esta.