Dándole una cara a cada enlace compartido

Hace unos días pegué un enlace a imperfectsystems.com en un chat y volvió desnudo: título, una línea de descripción, ninguna imagen. Cada vez que se compartía el sitio se veía así. Había configurado las etiquetas Open Graph meses atrás y daba por hecho que estaban funcionando. No era así.

El Layout solo emitía og:image cuando algo le pasaba una prop image. Nada lo hacía nunca. Ninguna página fijaba una, ninguna entrada de blog tenía una imagen destacada, así que el guard se evaluaba en silencio a nada en cada render:

const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
// ...
{ogImage && <meta property="og:image" content={ogImage} />}

El arreglo es de una línea. Poner un valor por defecto en la prop, y el guard se vuelve código muerto:

image = '/assets/og-default.png',
// ...
const ogImage = new URL(image, Astro.site).toString();

Las entradas de blog igual ganan cuando fijan una imagen destacada, porque image={entry.data.heroImage} pasa undefined cuando no hay imagen destacada, y un valor undefined es exactamente lo que dispara el valor por defecto de la desestructuración. No hace falta ningún caso especial. También agregué el conjunto de twitter:card y og:image:width/height/alt mientras estaba en eso.

La parte más interesante fue crear la imagen. El ticket decía, más o menos con esas palabras, que no bastaba con reusar el logo. Así que armé una tarjeta propia de 1200x630: una pequeña ventana de terminal, un $ ./run --software --games --music verde con brillo neón, la marca, la URL. La escribí como un archivo HTML plano y le tomé una captura con Chrome headless, y después la pasé por pngquant. El neón plano sobre negro se cuantiza de maravilla: 20KB en total.

Un detalle me costó un minuto de confusión. El primer render salió en 2400x1260. En una Mac Retina, Chrome headless hereda el factor de escala 2x y duplica en silencio el tamaño de la ventana. El arreglo:

--force-device-scale-factor=1

La última lección es una que sigo reaprendiendo: que el build funcione no significa que el deploy funcione. En local confirmé que las etiquetas estaban en el HTML generado con URLs absolutas, lo cual se sentía como prueba suficiente. Pero la portada se renderiza en el servidor, así que no hay ningún archivo estático para inspeccionar. La única verificación real es la que se hace en vivo. Después del deploy hice un curl a la página real:

curl -s https://imperfectsystems.com/ | grep og:image
# <meta property="og:image" content="https://imperfectsystems.com/assets/og-default.png"

Ahí está. Ahora los enlaces tienen cara.