Quem cria site com IA ou com WordPress e tem milhares de páginas não quer abrir um editor de imagem por artigo. Título longo, página gerada, nada óbvio para fotografar. Imagem dinâmica resolve isso: a própria URL descreve tamanho, cor, fonte e o texto — em geral o título do post — e o servidor devolve um PNG, um SVG ou um WebP. Eu descobri o placehold.co porque pedi uma OG image e a IA ligou o serviço sozinha. Todo artigo sem foto passou a nascer com uma capa com o título. Depois eu clonei a ideia num subdomínio meu, thumbnail, na Cloudflare Workers, com a extensão no fim da URL e cache na borda. Uma requisição gera; as seguintes saem do cache. Fallback, no vocabulário do vídeo, é essa imagem que existe quando o banco não tem arquivo.
Aponte a OG e a capa do post para um gerador por URL (placehold.co ou o seu Worker). Combine tamanho, cor, fonte e texto do título. Prefira formato no caminho, não só em parâmetro. Na Cloudflare, cacheie a resposta para não gerar de novo a cada visita. Quando o artigo ganhar foto de verdade, troque o endereço; o gerador fica de reserva, não de mentira eterna.
- Serviço que eu usei primeiro
- placehold.co, de graça, SVG/PNG/WebP
- O clone
- Subdomínio thumbnail no meu domínio, em Workers
- Custo
- Uma geração, depois cache na Cloudflare
O que é imagem dinâmica neste vídeo
Site com milhares de páginas — programático ou não — raramente tem foto boa para cada URL. A IA gera texto. O título é longo. Não há cena para ilustrar. Imagem dinâmica gera o arquivo a partir do que já está na URL: o texto do título, a largura, a altura, a cor de fundo, a cor da letra. No WordPress ou no site em Worker, o sistema usa isso quando o post não tem arquivo no banco. É fallback. É placeholder. Não é a foto do assunto; é uma capa honesta com o nome da página, para card, para Open Graph, para a aba de compartilhar não ir vazia.
Eu falo de IA o tempo todo porque foi assim que o placehold.co entrou nos meus sites: eu pedi OG image, a ferramenta escolheu o serviço, e eu vi o título virando a imagem. Aí passei a usar em tudo.
placehold.co: o que a URL aceita e o que me incomodou
placehold.co é gratuito. Pela URL você manda tamanho, formato, fonte, cor de fundo, cor do texto, transparência e o próprio texto. Padrão é SVG; tem PNG, JPEG, GIF, WebP, AVIF. No digitalkw, no Inspecionar, a OG image de um artigo apontava para o Placehold. Tinha nascido na publicação. Na tela estava PNG; eu preferia WebP, mais leve. Em geral o serviço gera SVG e você pede a conversão pelo sufixo.
O que eu não gostei: o texto ia em parâmetro de query. Foi um dos motivos de eu querer meu próprio gerador. Parâmetro funciona. Eu queria o formato no fim do caminho, para o endereço parecer arquivo de imagem de verdade — um .webp no final fortalece isso para quem lê a URL, para cache e para ferramenta que só olha a extensão.
Mesmo com a ressalva, o placehold.co abre a cabeça. Dá para usar em projeto pequeno sem escrever um Worker. A documentação do site é a própria URL: você muda o pedaço e recarrega.
- Abra placehold.co e monte uma URL com largura, altura e texto do título.
- Escolha o formato no caminho (png, webp, svg), não só na conversa com a IA.
- No site, se o post não tiver imagem, aponte og:image e a capa para essa URL.
- Publique um artigo de teste e Inspecione o head: a OG precisa ser o endereço do gerador, não um 404.
O clone no subdomínio thumbnail, com Workers e cache
Eu pedi um clone do placehold.co no meu domínio. A crença da gravação: imagem no meu host pesa mais para busca, para agente e para quem copia o arquivo — mesmo spam às vezes cita a origem. Google sabe o que é lixo; mesmo assim, eu quis as capas no meu hostname, com a cara que eu quisesse, não a cara genérica de placeholder. Nasceu um subdomínio thumbnail. A prévia deixava trocar fonte e o resto. O plano que eu falei na tela ia além: tema, moldura, fundo, um acervo de imagens. Se a URL do projeto trouxer um termo que bate com uma imagem do acervo, aquela foto entra no lugar do texto puro. No celular japonês eu já estava gerando várias capas ao vivo. A extensão no fim da URL ficou de propósito.
O detalhe de operação: a primeira requisição gera; a Cloudflare guarda em cache; as seguintes não passam de novo pelo gerador. Isso corta request no Worker. O sistema inteiro está em Cloudflare Workers. Grupo de WhatsApp na descrição se o assunto for criar site com IA e hospedar ali, inclusive no plano gratuito.
- Hostname seu (subdomínio thumbnail), não o da rede pública de placeholder.
- Formato no fim do caminho (.webp, .png), além do tamanho e do texto.
- Cache na borda depois da primeira geração.
- Acervo opcional: termo na URL casa com uma imagem de fundo, não só com tipografia.
Fallback não é enfeite, e não é para esconder foto quebrada para sempre
A dica da gravação é esta: na hora de criar o projeto, não esqueça a imagem de fallback. Artigo sem arquivo no banco ainda precisa de uma capa. A IA programa o esquema nativo na publicação, ou você faz na mão. Eu descobri o placehold.co pedindo OG; fiquei feliz de ver o título na imagem; espalhei isso; depois quis o gerador próprio. As possibilidades que eu citei no fechamento passam de card de artigo: interação com usuário, qualquer tela que hoje vai vazia quando a foto falta.
O limite honesto: placeholder com o título não substitui uma ilustração quando o post merece. Ele evita o buraco. Se a origem da foto real 404, o fallback aparece; o 404 ainda precisa de log, para você corrigir o arquivo, não para viver de capa tipográfica no lugar de um produto.
Na sequência
- Definir o que acontece quando o post não tem imagem: URL de gerador, não img vazia.
- Colocar og:image e a capa do card no mesmo esquema.
- Preferir WebP ou SVG e, no clone, a extensão no caminho.
- Ligar cache na Cloudflare depois da primeira geração.
- Trocar para arquivo real quando ele existir; deixar o gerador como reserva.
Onde isso quebra
Deixar milhares de páginas sem og:image porque “depois eu faço as fotos”.
Gerar a mesma capa a cada visita, sem cache, e pagar request à toa.
Texto enorme na URL, sem limite, e quebrar o layout da imagem.
Usar o placeholder como se fosse a foto do produto ou da pessoa.
Perguntas frequentes
Placeholder e fallback são a mesma coisa?
No vídeo eu usei os dois para a capa que nasce da URL quando não há arquivo no banco. Na fala de front, placeholder também é o que aparece enquanto a foto carrega; fallback é o que fica se ela falhar. O gerador cobre os dois papéis se você apontar a tag para ele.
Preciso clonar o placehold.co?
Não. O serviço gratuito já gera a OG. Eu clonei para ter o meu domínio, o formato no fim da URL, cache e, depois, tema e acervo. Projeto pequeno vive bem no placehold.co.
Por que WebP e não PNG?
Peso. Na tela a OG estava PNG; eu queria WebP. SVG também serve quando o desenho é texto e forma, e o placehold.co gera SVG por padrão.
A imagem dinâmica ajuda o Google só por estar no meu domínio?
Essa era a minha aposta na gravação: origem própria, menção, agente, até cópia. Não é garantia de posição. É controle da URL e da cara da capa. O HTML da página continua precisando existir — capa não salva site vazio.
Isso serve em WordPress?
Sim. O vídeo começa por site com IA ou WordPress. No WordPress você aponta a imagem destacada padrão e a OG para o gerador quando o post não tem foto. No Worker, a mesma regra na hora de publicar o artigo.