Quando um site tem milhares de páginas, criar uma imagem exclusiva para cada título pode virar um trabalho sem fim. Eu queria pelo menos evitar cards vazios quando uma página ainda não tinha uma foto própria. A solução que encontrei foi gerar uma capa tipográfica pela URL: o título entra como texto e a imagem aparece no lugar da foto ausente.
Defina uma capa para páginas que ainda não têm imagem
Uma imagem de fallback é uma reserva que o site usa quando o artigo não tem uma foto específica cadastrada. No meu caso, eu queria que o próprio título ocupasse esse espaço, tanto no card quanto na imagem de compartilhamento `og:image`. Assim cada página ganhava uma capa sem eu precisar produzir um arquivo antes de publicar.
Esse recurso faz mais sentido em sites com muitas páginas, como um catálogo ou um projeto com artigos criados a partir de vários assuntos. Se a página já tem uma foto que representa bem o conteúdo, ela continua sendo a escolha. A capa com texto resolve a ausência de imagem e deixa o compartilhamento preenchido enquanto aquele arquivo próprio não existe.
Comecei montando a imagem pela URL do Placehold
Descobri o Placehold.co quando pedi a uma ferramenta de programação que configurasse a imagem de compartilhamento de um site. Fui inspecionar uma página e encontrei o endereço do serviço no `og:image`. O título do artigo já aparecia dentro da capa, gerada sem eu criar uma imagem manualmente.
No Placehold, a URL define o tamanho, as cores, a fonte e o formato. O texto personalizado vai depois do ponto de interrogação; espaços e outros caracteres precisam ser codificados para caber no endereço. O formato padrão atual é SVG, e o serviço também permite pedir PNG, JPEG, GIF, WebP ou AVIF. Eu olhei a imagem do meu site e ela apareceu como PNG, embora eu quisesse WebP. Isso me fez perceber que eu precisava especificar o formato e conferir a resposta, em vez de presumir que a imagem seria convertida do jeito que eu esperava.
O serviço resolveu rápido o caso dos meus artigos, e eu passei a usar a ideia em mais de um projeto. A parte que eu queria mudar era o endereço: o texto ficava num parâmetro de consulta, e eu preferia que o caminho terminasse com a extensão do arquivo, como `.webp`.
Criei um gerador no subdomínio thumbnail
Depois de testar o serviço pronto, resolvi criar o meu no subdomínio `thumbnail`. O gerador monta a imagem com os dados da URL e deixa o formato visível no final do caminho. Também pedi uma prévia para poder ajustar a fonte e conferir a capa antes de usá-la. Para mim, ter o endereço no meu próprio domínio dava mais controle sobre o formato e a aparência.
Na época, eu também imaginava que uma imagem no meu domínio poderia carregar mais contexto quando aparecesse em buscas, em ferramentas que leem páginas ou em sites que reutilizassem o arquivo. Eu não tinha medido esse efeito. O ganho que eu via no projeto era bem concreto: controlar o endereço, escolher o visual e gerar a capa sem depender do padrão de outro serviço.
Use temas e imagens do acervo quando só o texto ficar simples
Uma capa com texto sobre fundo liso cumpre a função, mas eu queria customizar mais. Na prévia, eu podia trocar a fonte; para o gerador, comecei a imaginar temas, molduras e imagens de fundo. Também usei a ideia enquanto criava imagens para um projeto do meu dicionário de japonês.
Uma ideia que queria explorar era associar palavras presentes na URL a imagens de um acervo. Se uma ficha tivesse um termo conhecido, o gerador poderia escolher uma imagem correspondente e combiná-la com o título. Essa ligação automática entre palavra e foto ainda era um plano, não uma função pronta do sistema.
Aproveite o cache e mantenha uma foto própria quando houver
Como uma mesma URL costuma gerar a mesma capa, configurei o Worker para guardar a resposta no cache da Cloudflare. Na primeira solicitação, o Worker monta a imagem; quando a resposta está em cache, a Cloudflare pode devolvê-la sem executar o gerador de novo. O comportamento depende do cache e do tempo de validade definido para aquela resposta.
Se o título ou o estilo mudar e o endereço continuar igual, a imagem antiga pode permanecer até o cache expirar ou ser atualizado. Por isso, escolha um prazo adequado e pense em como renovar a capa quando o conteúdo mudar. No meu caso, um subdomínio próprio me deixou combinar o texto, o formato no caminho, a prévia e o cache num serviço só.
Eu usaria a imagem dinâmica como reserva para uma página sem foto. Quando existe uma imagem que mostra o assunto — uma pessoa, um produto ou uma cena — ela conta melhor a história do artigo do que um título sobre um fundo simples. O placeholder evita o espaço vazio; a imagem específica continua sendo a capa que eu escolheria para aquele conteúdo.