og:image ausente — A tag mais importante para engajamento social

O que é og:image?

A meta tag og:image especifica a imagem que aparece quando a sua página é compartilhada nas redes sociais. É, provavelmente, a tag Open Graph de maior impacto — uma imagem convincente pode aumentar drasticamente cliques e engajamento.

Por que é crítico?

Pesquisas e dados mostram de forma consistente:

Links com imagens recebem 2-3x mais engajamento do que links sem
No Twitter/X, tweets com imagens têm 150% mais retweets
No Facebook, posts com imagens veem 2.3x mais engajamento
No LinkedIn, posts com imagem têm 98% mais taxa de comentários

Sem og:image, as plataformas vão:

Mostrar uma caixa cinza de placeholder
Tentar extrair uma imagem aleatória da página (em geral a errada)
Exibir uma pré-visualização só de texto que as pessoas passam reto

Como fica

❌ Sem og:image

example.com

My Website Title

A description of the page…

✅ Com og:image

Eye-catching preview image

example.com

My Website Title

A description of the page…

Como corrigir

Adicione o seguinte ao seu <head>:

<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />

Importante: Sempre use uma URL absoluta (começando com https://).

Boas práticas para imagens OG

Dimensões

Tamanho recomendado: 1200 x 630 pixels (proporção 1.91:1)
Tamanho mínimo: 600 x 315 pixels
Tamanho do arquivo: Mantenha abaixo de 5MB (abaixo de 1MB é ideal)
Formato: JPG ou PNG (JPG para fotos, PNG para gráficos/texto)

Dicas de design

Texto grande e legível — Assuma que a imagem será exibida com ~500px de largura
Inclua logo/marca — Branding sutil reforça o reconhecimento
Use cores contrastantes — A imagem precisa se destacar em um feed cheio
Desenhe pensando no crop — Plataformas diferentes cortam de formas diferentes; mantenha o conteúdo principal no centro
Evite texto demais — O Facebook pode reduzir o alcance de imagens com >20% de texto

Ideias de conteúdo

Posts de blog: Imagem de destaque com o título do artigo sobreposto
Páginas de produto: Foto de produto de alta qualidade
Homepage: Gráfico com branding e slogan
Ferramentas/apps: Screenshot ou ilustração da ferramenta em ação

Implementação por framework

Next.js (App Router):

export const metadata = {
  openGraph: {
    images: ['https://yoursite.com/og-image.jpg'],
  },
}

Astro:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />

Ferramentas para criar imagens OG

Figma/Canva — Desenhe imagens customizadas com templates
Vercel OG — Gere imagens OG dinâmicas com código (@vercel/og)
Satori — Converta HTML/CSS em SVG para imagens OG programáticas