Foi Assim que Corrigimos as Pré-visualizações de Blog Quebradas
Postei um link do nosso blog no X. A imagem de pré-visualização parecia errada. Em vez de uma imagem de um artigo técnico, mostrava um banner de vendas.
Verifiquei nossos últimos sete posts. Todos tinham o mesmo banner de vendas. Nossos aprofundamentos técnicos pareciam anúncios. Isso prejudicou nossa credibilidade.
O problema era simples. Nosso código tinha uma regra de fallback. Se um post não tivesse uma imagem de destaque, ele usava um banner de vendas padrão. Como não definimos imagens de destaque para nossos 42 posts, cada post usava a mesma imagem.
Tínhamos duas opções:
- Opção A: Criar 42 imagens manualmente. Isso leva tempo e gera mais trabalho para cada novo post.
- Opção B: Construir um gerador de imagens dinâmico. Isso cria uma imagem personalizada para cada post automaticamente.
Escolhemos a Opção B. Construímos um pequeno motor usando PHP GD.
Veja como funciona:
- O motor cria um PNG de 1200x630 sob demanda.
- Ele usa um fundo escuro e o título do post.
- Ele busca o título no banco de dados.
- Ele salva a imagem no disco após a primeira renderização.
- Cada requisição futura serve o arquivo em cache. Isso o torna muito rápido.
Resolvemos dois problemas específicos durante essa construção:
Suporte a idiomas: Usar apenas fontes latinas como Inter fazia com que o texto em japonês aparecesse como caixas vazias. Adicionamos uma verificação para substituir pela Noto Sans JP em títulos em japonês.
Tom visual: Blogs de tecnologia profissionais como Vercel ou PlanetScale usam cards escuros e limpos. Imitamos esse estilo para gerar confiança em nossos leitores.
Lições principais para você:
- Audite suas pré-visualizações de redes sociais. Use uma ferramenta para verificar se suas tags og:image funcionam.
- Evite artes manuais para cada post. Isso não é escalável.
- Use uma stack simples. PHP GD mais um cache de disco é leve e eficaz.
- Planeje para múltiplos idiomas. Sempre inclua uma fonte que suporte todo o seu conjunto de caracteres.
As imagens do seu blog representam sua marca. Não deixe que um fallback padrão estrague sua primeira impressão.