Imagens Open Graph: dimensões, dicas e exemplos
As imagens Open Graph definem o que aparece quando alguém compartilha sua página no Facebook, Twitter ou LinkedIn. Uma imagem errada ou ausente reduz drasticamente os cliques antes mesmo dos visitantes acessarem seu site.
Este guia aborda tamanhos ideais, princípios de design, implementação em HTML e ferramentas de teste — tudo para acertar nas prévias sociais em todas as plataformas.
Sumário
O que são imagens Open Graph e por que são importantes
Open Graph é um protocolo criado pelo Facebook que permite controlar como suas páginas aparecem ao serem compartilhadas nas redes sociais. A meta tag og:image indica qual imagem usar na prévia.
Quando alguém compartilha um link no Facebook, Twitter ou LinkedIn, a plataforma busca os metadados Open Graph e cria um cartão de prévia. Esse cartão — com imagem, título e descrição — é geralmente o que a pessoa vê antes de clicar.
Uma imagem Open Graph bem feita pode aumentar significativamente a taxa de cliques. Imagem ausente ou com tamanho errado gera prévia quebrada, miniatura cortada ou um espaço genérico que parece amador.
Taxa de cliques
Páginas com imagem OG de tamanho correto e alto contraste superam consistentemente as que não têm imagem ou usam uma de baixa qualidade.
Mais cliques a cada compartilhamento
Reconhecimento da marca
Uma identidade visual consistente em cada link compartilhado cria familiaridade e confiança no seu público antes mesmo de acessar a página.
Consistência entre redes
Sinal de SEO
Engajamento social gerado por prévias atraentes cria backlinks e sinais de tráfego que fortalecem o ranqueamento orgânico ao longo do tempo.
Benefício indireto para ranqueamento
Requisitos de imagem por plataforma
Cada rede social tem dimensões, proporções e limites de tamanho de arquivo recomendados. Segui-los evita cortes, distorções e imagens genéricas.
| Plataforma | Tamanho recomendado | Proporção | Tamanho máximo do arquivo | Formato |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Tamanho universal seguro: 1200 × 630 pixels
Imagem 1200 × 630 px na proporção 1,91:1 funciona no Facebook, LinkedIn, WhatsApp, Slack e outras. No Twitter, que usa corte 16:9, mantenha o conteúdo centralizado para evitar cortes.
Princípios de design para imagens Open Graph eficazes
A imagem aparece em tamanhos pequenos nos feeds sociais. Priorize o design para miniatura, não para o tamanho completo.
Mantenha o elemento visual mais importante — logo, título forte ou ilustração chave — dentro dos 80% centrais da imagem. Plataformas costumam cortar as bordas.
Alto contraste
Use contraste forte entre texto, elementos em primeiro plano e fundo. Imagens com baixo contraste somem em feeds sociais cheios e coloridos.
Legível em qualquer tamanho
Clareza tipográfica
Se a imagem tiver texto, use fontes grandes e negritadas — pelo menos equivalente a 36px — e evite mais de duas linhas. Texto pequeno fica ilegível em miniaturas.
Mantenha legível em miniatura
Consistência da marca
Inclua seu logo ou paleta de cores da marca em toda imagem OG. Cada compartilhamento é uma impressão da marca, mesmo sem cliques.
Cada compartilhamento é um contato com a marca
Escolhendo o formato de imagem ideal
Use JPEG para fotos e PNG para gráficos com texto, logos ou transparência. WebP tem suporte crescente, mas não é universal em todos os crawlers sociais.
| Formato | Ideal para | Suporte social | Tamanho típico do arquivo | Recomendação |
|---|---|---|---|---|
| JPEG | Fotos, gradientes | Universal | 60 – 150 KB | Padrão para fotos |
| PNG | Texto, logos, transparência | Universal | 100 – 300 KB | Padrão para gráficos |
| WebP | Ambos, arquivos menores | Twitter, Slack (nem todos) | 40 – 120 KB | Apenas complemento |
Mire em 100–200 KB para sua imagem OG. Menor é melhor, mas evite compressão que cause pixelização. WhatsApp limita a 300 KB — se compartilhar lá for importante, mantenha abaixo disso.
Para mais sobre escolhas de formatos de imagem, veja o guia de otimização de imagens para sites . Para converter imagens existentes, veja o guia de conversão JPG para WebP que explica o fluxo de trabalho diário.
Implementação HTML e meta tags
Coloque as meta tags Open Graph dentro do elemento <head> do seu HTML. A tag og:image deve usar URL absoluta — caminhos relativos não são suportados pelos crawlers sociais.
As tags mínimas obrigatórias são og:title, og:description, og:image e og:url. A tag twitter:card ativa o formato de cartão com imagem grande no Twitter.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Sempre especifique og:image:width e og:image:height. Sem elas, as plataformas precisam baixar e analisar a imagem antes de mostrar a prévia, atrasando a exibição e aumentando o risco de imagem genérica.
Se você usa Blazor, o componente de metadados SEO do Blazor gerencia automaticamente todas as tags Open Graph com URLs adaptadas à cultura.
Testando e depurando imagens Open Graph
Plataformas sociais armazenam em cache os metadados Open Graph agressivamente. Após atualizar tags ou imagem, use as ferramentas oficiais para forçar uma nova leitura e verificar a prévia antes de compartilhar.
Depurador de compartilhamento do Facebook
Digite sua URL em developers.facebook.com/tools/debug para obter metadados atualizados, ver qual imagem o Facebook selecionou e corrigir avisos ou erros.
Forçar atualização do cache
Validador de cartão do Twitter
Use cards-dev.twitter.com/validator para ver exatamente como seu cartão do Twitter aparecerá. Clique em 'Preview card' para ver miniatura, título e descrição no formato real.
Visualizar antes de postar
Inspetor de post do LinkedIn
O inspetor de post do LinkedIn em linkedin.com/post-inspector atualiza o cache do LinkedIn para sua URL e mostra como ficará a prévia do post com os metadados atuais.
Atualizar cache do LinkedIn
Erros comuns e como corrigi-los
A maioria dos problemas com imagens Open Graph se deve a um conjunto pequeno de erros recorrentes. Saber o que observar economiza tempo na depuração.
- URLs relativas. Crawlers sociais não resolvem caminhos relativos. O valor de og:image deve ser uma URL absoluta completa, incluindo protocolo e domínio (https://seudominio.com/caminho/imagem.jpg).
- Faltam tags de largura e altura. Sem og:image:width e og:image:height, as plataformas precisam baixar e analisar a imagem antes de gerar a prévia. Adicione ambas para evitar essa etapa extra.
- Imagens protegidas por autenticação. Crawlers não acessam imagens que exigem login ou são bloqueadas pelo robots.txt. A imagem OG deve estar publicamente acessível, sem autenticação.
- Proporção incorreta. Imagem com proporção muito diferente de 1,91:1 será cortada ou exibida com barras pretas. Sempre teste a proporção antes de publicar.
- Cache desatualizado da plataforma. Atualizar o arquivo da imagem sem mudar o nome ou adicionar query string faz a plataforma usar a versão antiga em cache. Atualize o nome ou use o depurador para forçar atualização.
Automatizando a geração de imagens Open Graph
Para sites pequenos e blogs, uma imagem OG estática por página é a forma mais simples e confiável. Para publicações maiores ou apps com prévias únicas por página, a geração dinâmica é prática.
A geração dinâmica cria uma imagem única no momento da requisição — ou na compilação — baseada no título, descrição ou conteúdo da página. O resultado é uma prévia exclusiva e alinhada à marca para cada página, sem criar imagens manualmente.
Quando automatizar
Automatize quando tiver muitas páginas que precisam de imagens únicas, conteúdo que muda com frequência ou criação manual que não escala.
Conteúdo dinâmico ou em grande volume
Quando usar imagens estáticas
Para a maioria das páginas — landing pages, guias e artigos permanentes — uma imagem estática bem feita supera a gerada em qualidade e consistência da marca.
Abordagem focada na qualidade
Ferramentas populares para geração dinâmica incluem Cloudinary (transformações via parâmetros URL), Vercel OG (renderiza React/HTML em imagem na borda) e pipelines de captura com Puppeteer ou Playwright para qualquer stack.