Generador de Imagen OG

El único tamaño que funciona casi en todas partes

Cada plataforma publica sus dimensiones preferidas para la imagen de compartir, y leer esas páginas una detrás de otra hace que el problema parezca más difícil de lo que es. En la práctica, 1200 por 630 píxeles es el tamaño que se porta bien: Facebook, Slack, Discord, WhatsApp, iMessage y casi todos los bots que despliegan enlaces lo leen como og:image y lo muestran sin protestar, y X acepta el mismo archivo para una tarjeta de resumen grande, recortando una tira de arriba y otra de abajo hasta llegar a su propio 16:9.

Por eso los cuatro preajustes de aquí no son igual de útiles. Open Graph a 1200 por 630 es el valor por defecto y el que hay que usar. El preajuste de X (1200 por 675) y el de LinkedIn (1200 por 627) existen porque esas plataformas documentan esos números exactos y hay quien quiere que la correspondencia sea exacta; la diferencia práctica con el valor por defecto son unas pocas decenas de píxeles de recorte. Pinterest es el que de verdad es distinto, a 1000 por 1500, vertical en lugar de apaisado, porque un pin es un objeto alto dentro de un muro tipo mampostería y una tarjeta apaisada se ve perdida ahí.

Si vas a hacer una sola imagen, haz la de 1200 por 630. Si vas a hacer un juego para una entrada de blog que además se va a pinear, haz esa y una versión de Pinterest, y sáltate las otras dos.

Dos líneas en una caja son toda la entrada

Hay una única área de texto, y la convención es posicional: la línea uno es el título y todo lo que venga después se convierte en el subtítulo, unido con espacios y descartando las líneas en blanco. Los títulos se limitan a 200 caracteres y los subtítulos a 300, muy por encima del punto en el que cualquiera de los dos deja de leerse bien.

Ese diseño es una restricción hecha visible, no una decisión estética. Esta herramienta funciona sobre un shell compartido de texto-entra, imagen-sale que usan varias páginas de este sitio, y el esquema de opciones que hay detrás de esos desplegables solo admite selectores, números y casillas, sin ningún campo de texto libre. Antes que bifurcar un componente a medida, o modificar un shell del que dependen otras herramientas, que es la forma de romper tres páginas mientras publicas una, toma prestada la misma convención de dos líneas que ya estableció nuestro generador de códigos QR de wifi para esta misma restricción.

Cómo se ajusta un título largo

La parte interesante de esta herramienta no es el dibujado, es el ajuste tipográfico, y funciona como una persona dimensionando un titular en un programa de maquetación: prueba en grande y baja hasta que entre.

En un lienzo de 1200 píxeles de ancho la búsqueda empieza en 78 px, que es el 6,5 por ciento del ancho, y baja de 4 en 4 px hasta un suelo de 28 px. En cada tamaño el título se parte por palabras al ancho disponible (984 px después de unos márgenes laterales del 9 por ciento) y se acepta si cabe en tres líneas o menos y dentro de un presupuesto de altura de bloque del 62 por ciento del espacio vertical. Esa segunda condición aprieta más en los lienzos apaisados y bajos, donde tres líneas al tamaño máximo se acercan a llenar el presupuesto entero; en el lienzo alto de Pinterest sobra tanto espacio vertical que lo que limita el tamaño es el número de líneas.

En concreto, un título de unos cuarenta caracteres pasa a la primera y no llega a entrar de verdad en el bucle. Llévalo a noventa y la búsqueda se asienta varios escalones más abajo. Solo cuando tres líneas a 28 px siguen desbordando se trunca la última con puntos suspensivos, y es un último recurso deliberado: una palabra cortada se lee como un error, pero un texto saliéndose del borde del lienzo se lee como una herramienta rota.

El subtítulo se dimensiona después al 42 por ciento de donde haya aterrizado el título, acotado entre 18 y 46 px, partido en dos líneas como mucho, y separado del título por un hueco del 35 por ciento del tamaño del título. Título y subtítulo se tratan como un solo bloque y se centran verticalmente juntos, así que una tarjeta sin subtítulo centra su título de forma exacta en lugar de dejar un hueco donde habría ido el subtítulo.

Contraste que no tienes que comprobar tú

Aquí nada te pide elegir un color de texto, porque esa es una pregunta con respuesta correcta. Las paradas de color de cada fondo se convierten a un valor de luminancia REC.601 con la misma función que usan nuestros filtros de imagen, se promedian y se comparan con un umbral de 140: por debajo el texto es blanco, por encima es un azul marino casi negro. El fondo blanco es el único preajuste que cae del lado oscuro de esa prueba, que es exactamente lo que se pretende.

Los cuatro degradados son diagonales de dos paradas que van de la esquina superior izquierda a la inferior derecha, que es justo el caso sobre el que una única lectura de luminancia tiene que ser honesta. Ocean, Purple y Forest mantienen las dos paradas del lado oscuro del umbral, así que promediarlas no cambia nada. Sunset no: su parada naranja se lee más brillante que el corte mientras que su parada rosa se lee más oscura, así que decide el promedio, y la herramienta se compromete con un solo color de texto para todo el lienzo en lugar de cambiar de color a mitad de degradado.

La plantilla alineada a la izquierda añade una barra de acento vertical por el borde izquierdo, de 14 px de ancho en un lienzo de 1200 px, dibujada en el color del texto al 85 por ciento de opacidad para que se lea como un acento y no como un segundo elemento compitiendo con el titular. El subtítulo se dibuja igualmente al 88 por ciento de opacidad, suficiente para establecer jerarquía sin parecer descolorido.

Generarla y apuntar una página hacia ella

1. Escribe tu título en la primera línea y un subtítulo opcional en la segunda.
2. Elige un Tamaño de plataforma, una Plantilla de maquetación y un Fondo.
3. Pulsa el botón de acción, revisa la previsualización y descarga el PNG. Se nombra según el preajuste, por ejemplo og-image-og.png.
4. Sube ese archivo a donde tu sitio sirva las imágenes, y pon su URL pública completa en la etiqueta og:image de la página.

El paso cuatro es el que la gente se salta. El rastreador de una red social va a buscar la imagen él mismo, por HTTP, desde una URL pública, así que el PNG de tu carpeta de descargas no hace nada hasta que está alojado. El generador de meta tags produce el bloque entero de etiquetas una vez tengas la URL, y si estás montando los recursos de lanzamiento de un sitio de una sentada, el generador de favicons cubre la otra mitad del trabajo.

Lo que deliberadamente no hace

No hay subida de imágenes, ni selector de color a medida, ni elección de tipografía, ni hueco para un logotipo. Parte de eso es la restricción del shell descrita más arriba; el resto es que una herramienta con catorce controles y sin ninguna guía de diseño produce tarjetas peores que una herramienta con tres. Si necesitas un fondo fotográfico o tu propia marca en la esquina, genera aquí la tarjeta tipográfica y compón encima con poner una marca de agua en fotos. Si el elemento principal debería ser código en vez de un titular, la captura de pantalla de código es mejor punto de partida.

Una advertencia honesta sobre la estabilidad de la salida: el texto se dibuja con una pila de tipografías del sistema, así que el mismo título generado en Windows, macOS y Linux no será idéntico byte a byte, y en algún caso límite una tipografía algo más ancha puede mover un punto de corte. Ese es el precio de dibujar con las tipografías que ya están en tu máquina en lugar de descargar una webfont, que supondría una petición de red y una dependencia de que el CDN de otra persona siga en pie. Aquí todo se compone en un lienzo dentro de tu pestaña, y por eso el titular de una entrada que todavía no has publicado no sale nunca de la máquina en la que lo redactaste.