Tamanho da imagem Open Graph e tags OG: o guia completo
Quando um link é colado no Facebook, LinkedIn, X, Telegram, Slack ou WhatsApp, a plataforma não tira uma captura de tela da página. O crawler dela baixa o HTML, lê algumas tags Open Graph no <head> e monta um card de pré-visualização a partir delas: um título, uma descrição curta e uma imagem. Se as tags estiverem ausentes ou erradas, a plataforma tenta adivinhar, e o resultado geralmente é um logo cortado ou nenhuma imagem. Este guia explica quais tags você precisa, qual deve ser o tamanho da imagem OG e como fazer as plataformas esquecerem uma pré-visualização antiga.
A resposta curta: tamanho da imagem OG
Use uma imagem de 1200×630 pixels (proporção 1,91:1) em JPG ou PNG e mantenha o arquivo razoavelmente leve. Essa única imagem funciona como card grande no Facebook, LinkedIn e X, e os mensageiros a reduzem para suas pré-visualizações menores. Mantenha o título e o logo na área central, pois alguns apps cortam as laterais ou exibem uma miniatura quadrada.
| Plataforma | O que a documentação recomenda |
|---|---|
| No mínimo 1200×630 para um card grande; imagens menores que 600×315 recebem o layout pequeno; mínimo absoluto de 200×200; arquivo de até 8 MB | |
| 1,91:1, recomendado 1200×627 | |
X, summary_large_image | 2:1, mínimo de 300×157, arquivo com menos de 5 MB; JPG, PNG, WebP ou GIF (apenas o primeiro quadro) |
X, summary | Miniatura 1:1, mínimo de 144×144 |
A proporção 2:1 do X e a 1,91:1 das demais plataformas são próximas o bastante para que uma imagem de 1200×630 funcione nas duas: o X corta alguns pixels no topo e na base. As plataformas mudam seus layouts de tempos em tempos, então use a tabela como ponto de partida e confira o card atual na ferramenta de cada rede antes de um grande lançamento.
Quais tags Open Graph são obrigatórias
O protocolo Open Graph (ogp.me) define quatro propriedades obrigatórias: og:title, og:type, og:image e og:url. Na prática, você também vai querer uma descrição e o tipo de card do X. Um conjunto completo para um artigo fica assim:
<meta property="og:title" content="How to choose running shoes for flat feet"> <meta property="og:description" content="Five checks before you buy, from a physiotherapist."> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/blog/running-shoes-flat-feet"> <meta property="og:image" content="https://example.com/img/og/running-shoes-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Runner's feet on a treadmill in neutral shoes"> <meta property="og:site_name" content="Example Running"> <meta property="og:locale" content="en_US"> <meta name="twitter:card" content="summary_large_image">
| Tag | Status | O que observar |
|---|---|---|
og:title | Obrigatória | Escreva pensando no feed: não é preciso o sufixo " | Marca", já que o card exibe o domínio de qualquer forma |
og:type | Obrigatória | website para a página inicial e seções, article para posts |
og:image | Obrigatória | URL https:// absoluta que um crawler consiga baixar sem cookies ou login |
og:url | Obrigatória | A URL canônica desta página; o Facebook monta o card a partir da página para a qual ela aponta |
og:description | Recomendada | Uma ou duas frases; alguns apps mostram apenas a primeira linha |
og:image:width, og:image:height | Recomendada | Permitem que o Facebook renderize o card no primeiro compartilhamento sem esperar a imagem |
og:image:alt | Recomendada | Descrição em texto da imagem para leitores de tela |
og:site_name, og:locale | Opcional | Nome da marca e idioma, como en_US ou pl_PL |
As tags Open Graph usam o atributo property, e as tags do X usam name. Muitos parsers aceitam os dois, mas seguir a convenção evita surpresas. Se você não quer escrever o markup à mão, o gerador de meta tags cria o bloco Open Graph e X junto com o título e a descrição.
twitter:card e os fallbacks
O X lê primeiro as próprias tags twitter:*. Quando twitter:title, twitter:description ou twitter:image estão ausentes, ele usa como fallback og:title, og:description e og:image. Por isso, uma página com Open Graph completo precisa de apenas mais uma linha: twitter:card, definida como summary_large_image para uma imagem grande ou summary para uma miniatura quadrada pequena. Adicione tags twitter:* separadas apenas quando quiser um texto ou uma imagem diferente no X.
LinkedIn, Telegram, Slack, Discord e WhatsApp também funcionam a partir do Open Graph. Quando uma plataforma não encontra nenhuma tag OG, ela pode recorrer ao <title>, à meta description e à primeira imagem adequada da página, e é assim que os compartilhamentos acabam exibindo um pixel de rastreamento ou o logo do rodapé.
Por que a URL absoluta da imagem importa
Um caminho relativo como /img/cover.jpg funciona no navegador porque ele sabe em qual página está. Os crawlers nem sempre o resolvem, e muitos simplesmente exibem um card sem imagem. Escreva sempre o endereço completo, com o protocolo. Três verificações relacionadas:
- Sem login, sem cookies. A imagem deve abrir em uma janela anônima. Imagens protegidas contra hotlink, atrás de um desafio de firewall ou com uma URL assinada que expira quebram compartilhamentos futuros.
- Sem JavaScript. Os crawlers sociais geralmente não executam scripts. Se um aplicativo de página única define as meta tags no cliente, o crawler vê o template vazio. Renderize as tags no servidor ou faça prerender das páginas.
- Crawler não bloqueado. Um
Disallowno robots.txt ou um filtro de bots agressivo devolve uma página de erro ao crawler, e o card é montado a partir dela.
Como as plataformas fazem cache das prévias e como atualizá-las
Cada rede coleta uma URL uma vez e guarda o resultado por um tempo. Depois que você corrige as tags, sua página está correta, mas o card antigo continua aparecendo até a rede buscar a página de novo. As formas oficiais de forçar isso:
- Facebook (e links no Messenger e nas DMs do Instagram): abra o Sharing Debugger em developers.facebook.com, cole a URL e clique em Scrape Again. O debugger também lista as tags que leu e os avisos encontrados.
- LinkedIn: passe a URL pelo Post Inspector (linkedin.com/post-inspector). Ao inspecionar a URL, o LinkedIn a busca novamente.
- Telegram: envie o link para o bot oficial @WebpageBot. Ele atualiza a prévia que o Telegram guarda para essa URL; talvez seja necessário enviar mais de uma vez se a primeira resposta ainda mostrar o card antigo.
- X: atualmente não há uma ferramenta pública para limpar o cache. Uma solução comum é compartilhar a URL com um parâmetro inofensivo, como
?v=2, que o X trata como um novo endereço. - WhatsApp, Slack, Discord: até onde sabemos, não há botão oficial de atualização. Eles captam as mudanças com o tempo; um novo parâmetro na URL é, novamente, a solução prática.
cover-v2.jpg) e atualize o og:image.Erros comuns
- O mesmo card em todas as páginas. Um tema que exibe o título e o logo da home em todo lugar faz com que todo compartilhamento fique idêntico. Gere
og:title,og:descriptioneog:imagepor página. - og:url apontando para a home. O Facebook trata o
og:urlcomo canônico e mostra o card da home para todos os artigos. - Tags duplicadas. Um plugin de SEO e o tema imprimem
og:imageao mesmo tempo. Normalmente a primeira vence, e pode ser a errada. - Texto pequeno demais ou muito perto das bordas. O card costuma ser exibido com algumas centenas de pixels de largura no celular; um texto de 20 pixels fica ilegível.
- Imagem pequena demais. Abaixo de 600×315, o Facebook muda para o layout pequeno, com a miniatura ao lado.
- Mudanças testadas apenas no navegador. O navegador mostra a página nova; as redes ainda têm a antiga. Sempre faça um novo scrape.
Como verificar suas tags
Cole a URL no depurador de Open Graph. Ele busca a página a partir do nosso servidor sem executar JavaScript, da mesma forma que os crawlers das redes sociais, e mostra cards aproximados do Facebook, X e LinkedIn, a lista de tags encontradas e ausentes, o tamanho real da imagem em pixels e um aviso sobre URLs relativas. As prévias são próximas das reais, mas o design atual de cada rede e o cache dela têm a palavra final.
O Open Graph não afeta o ranqueamento no Google: os snippets de busca são criados a partir do <title>, da meta description e do conteúdo da página. Verifique essa parte separadamente com o analisador de meta tags e a prévia da SERP. Para mais detalhes, leia como verificar meta tags e o snippet nos resultados de busca e prévia do snippet.
