Dando um rosto para cada link compartilhado

Colei um link do imperfectsystems.com num chat outro dia e ele voltou pelado: título, uma linha de descrição, sem imagem. Todo compartilhamento do site ficava assim. Eu tinha configurado as tags Open Graph meses atrás e presumido que estavam funcionando. Não estavam.

O Layout só emitia og:image quando algo passava uma prop image. Nada nunca passava. Nenhuma página definia uma, nenhum post do blog tinha imagem de destaque, então a proteção silenciosamente avaliava para nada em toda renderização:

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

A correção é uma linha. Dar um valor padrão à prop, e a proteção vira código morto:

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

Posts do blog ainda ganham quando definem uma imagem de destaque, porque image={entry.data.heroImage} passa undefined quando não há imagem de destaque, e um valor undefined é exatamente o que aciona o padrão da desestruturação. Sem necessidade de caso especial. Também adicionei o conjunto twitter:card e og:image:width/height/alt enquanto estava mexendo ali.

A parte mais interessante foi fazer a imagem. O issue dizia, em outras palavras, para não simplesmente reaproveitar o logo. Então construí um card de verdade, 1200x630: uma pequena janela de terminal, um $ ./run --software --games --music verde com brilho neon, a marca, a URL. Escrevi como um arquivo HTML simples e tirei um screenshot com Chrome headless, depois passei pelo pngquant. Neon chapado sobre preto quantiza lindamente: 20KB no total.

Uma pegadinha me custou um minuto de confusão. Minha primeira renderização saiu em 2400x1260. Num Mac Retina, o Chrome headless herda o fator de escala 2x e silenciosamente dobra o tamanho da janela. A correção:

--force-device-scale-factor=1

A última lição é uma que eu continuo reaprendendo: build funcionando não é o mesmo que deploy funcionando. Localmente confirmei que as tags estavam no HTML gerado com URLs absolutas, o que parecia prova suficiente. Mas a homepage é renderizada no servidor, então não existe arquivo estático para inspecionar. A única checagem real é a ao vivo. Depois do deploy fiz curl na página real:

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

Aí está. Agora os links têm um rosto.