Quando você compartilha um link no Twitter, LinkedIn ou Slack, o card de preview que aparece é alimentado por meta tags Open Graph (OG) — e a imagem é o elemento mais importante. Uma imagem OG atraente pode aumentar drasticamente as taxas de clique, mas criar uma imagem única para cada post de blog, página de produto ou perfil de usuário é impraticável se feito manualmente. A solução: gerá-las dinamicamente usando HTML, CSS e uma API de renderização de imagens.
O Que São Imagens OG e Por Que Importam
Open Graph é um protocolo que permite que páginas web definam como aparecem quando compartilhadas em plataformas de mídia social. As meta tags principais são:
<meta property="og:title" content="Título da Sua Página" />
<meta property="og:description" content="Uma breve descrição" />
<meta property="og:image" content="https://exemplo.com/og-image.png" />
<meta property="og:url" content="https://exemplo.com/pagina" />A tag og:image é de longe a mais impactante. Estudos mostram que posts em redes sociais com imagens recebem 2 a 3 vezes mais engajamento do que aqueles sem. Uma imagem OG bem projetada funciona como um título visual, dando aos usuários um motivo para clicar.
O Problema das Imagens OG Estáticas
A abordagem mais simples é criar uma imagem estática para cada página usando uma ferramenta de design como Figma ou Canva. Isso funciona para um punhado de páginas, mas se torna insustentável quando:
- Você publica posts de blog frequentemente e precisa de uma imagem única para cada um.
- Você tem conteúdo dinâmico como páginas de produto, perfis de usuário ou listagens de eventos que mudam constantemente.
- Você quer fazer testes A/B com diferentes designs de imagens OG sem trabalho manual de design.
- Você opera em múltiplos idiomas e precisa de imagens localizadas.
A solução é gerar imagens OG programaticamente — projete um template em HTML e CSS, preencha com os dados dinâmicos e renderize como imagem.
Geração Dinâmica com HTML + CSS
O conceito é simples: escreva o design da sua imagem OG como uma página HTML, depois use uma API para capturá-la como uma imagem PNG ou JPEG. Como você já conhece HTML e CSS, pode criar qualquer design que quiser — gradientes, tipografia, logos, padrões, até visualizações de dados.
Aqui está um exemplo de template de imagem OG para um post de blog:
function templateImagemOG({ titulo, autor, data, categoria }) {
return `
<div style="
width: 1200px; height: 630px;
display: flex; flex-direction: column; justify-content: center;
padding: 60px 80px;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b69 100%);
font-family: 'Inter', sans-serif;
color: white;
">
<div style="
display: inline-block; background: #6c63ff;
padding: 6px 16px; border-radius: 20px;
font-size: 14px; font-weight: 600; margin-bottom: 24px;
width: fit-content;
">${categoria}</div>
<h1 style="
font-size: 56px; font-weight: 800; line-height: 1.15;
margin: 0 0 auto 0;
">${titulo}</h1>
<div style="
display: flex; align-items: center; gap: 16px;
font-size: 18px; color: rgba(255,255,255,0.7);
">
<span>${autor}</span>
<span>·</span>
<span>${data}</span>
<img src="https://tongorender.io/logo-white.png" style="margin-left: auto; height: 32px;" />
</div>
</div>
`;
}Renderizando com a API de Imagens do TongoRender
O TongoRender oferece um endpoint dedicado de renderização de imagens que converte HTML em PNG, JPEG ou WebP. Veja como gerar uma imagem OG:
async function gerarImagemOG({ titulo, autor, data, categoria }) {
const html = templateImagemOG({ titulo, autor, data, categoria });
const response = await fetch('https://api.tongorender.io/v1/render/image', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer rf_live_sua_chave_api',
},
body: JSON.stringify({
html,
options: {
width: 1200,
height: 630,
format: 'png',
deviceScaleFactor: 1,
},
}),
});
return Buffer.from(await response.arrayBuffer());
}A imagem renderizada tem exatamente 1200x630 pixels — o tamanho recomendado para imagens OG na maioria das plataformas.
Estratégias de Integração
Geração Sob Demanda
Gere imagens quando são solicitadas pela primeira vez e armazene em cache. Isso é ideal para conteúdo que muda com pouca frequência:
app.get('/og/:slug.png', async (req, res) => {
const cached = await cache.get(`og:${req.params.slug}`);
if (cached) {
res.type('image/png').send(cached);
return;
}
const post = await db.posts.findBySlug(req.params.slug);
const image = await gerarImagemOG(post);
await cache.set(`og:${req.params.slug}`, image, 86400); // Cache por 24h
res.type('image/png').send(image);
});Geração no Build
Para sites estáticos ou blogs, gere todas as imagens OG durante o processo de build e envie para seu CDN. Isso elimina a latência em tempo de execução completamente.
Variações de Template
Crie templates diferentes para diferentes tipos de conteúdo:
- Posts de blog — Título, autor, badge de categoria, tempo de leitura.
- Páginas de produto — Imagem do produto, nome, preço, avaliação.
- Perfis de usuário — Avatar, nome, bio, estatísticas.
- Páginas de evento — Nome do evento, data, local, fotos dos palestrantes.
Dicas de Design para Imagens OG Eficazes
- Mantenha o texto grande — Imagens OG são frequentemente exibidas em tamanhos pequenos. Use no mínimo 40px para títulos.
- Use alto contraste — Garanta que o texto seja facilmente legível contra o fundo.
- Inclua sua marca — Adicione seu logo para que as pessoas reconheçam a fonte imediatamente.
- Teste em diferentes plataformas — Twitter, LinkedIn, Facebook e Slack cortam as imagens de maneiras diferentes. Mantenha-se na zona segura de 1200x630.
- Evite texto demais — Imagens OG não são artigos. Limite-se ao título e uma ou duas informações de metadados.
Conclusão
Imagens OG dinâmicas são uma forma de alto impacto e baixo esforço para impulsionar a presença do seu conteúdo nas redes sociais. Aproveitando HTML e CSS — habilidades que você já possui — e uma API de renderização de imagens como o TongoRender, você pode gerar imagens de preview únicas e com a identidade da sua marca para cada página do seu site automaticamente.
Pare de usar a mesma imagem OG genérica para todas as suas páginas. Comece a gerá-las dinamicamente e veja suas taxas de clique melhorarem.
Experimente o TongoRender gratuitamente — Gere imagens, PDFs e screenshots com uma única API.