Tamanho da imagem Open Graph: 1200 × 630 e o que realmente quebra

Quando alguém cola seu link no Slack, iMessage, LinkedIn, WhatsApp ou Facebook, aparece um cartão de prévia com uma imagem. Essa imagem é a do Open Graph, e a maioria dos sites a tem errada de um jeito sobre o qual ninguém avisa, porque a página em si parece bem.

O tamanho

1200 × 630 pixels. É uma proporção de 1,91:1, e é em torno dela que Facebook, LinkedIn e quase todos os sistemas de prévia de link foram construídos.

• Mínimo 200 × 200 — abaixo disso, muitas plataformas se recusam a exibir cartão e caem para um link de texto puro.
• Mínimo 600 × 315 para o cartão grande. Abaixo disso você costuma receber o layout de miniatura em vez do largo, bem menos visível no feed.
• Abaixo de 1 MB como meta prática. Os tetos documentados são maiores, mas uma prévia lenta às vezes simplesmente não aparece — a plataforma desistiu de esperar.

Use 1200 × 630. Está acima de todos os mínimos, é a proporção nativa do layout mais comum e reduz com limpeza em todos os outros.

Não é a primeira imagem da página

Esse é o mal-entendido que causa quase todo o problema. A imagem de prévia é declarada, numa tag dentro do head:

<meta property="og:image" content="https://example.com/img/card.jpg">

Se você não declara nada, cada plataforma adivinha. E adivinha mal: um logo do cabeçalho, um ícone, um pixel de rastreamento, um anúncio, ou nada. Plataformas diferentes adivinham diferente, então o mesmo link fica diferente no Slack e no LinkedIn.

O conjunto que vale declarar:

• og:image — a URL absoluta. É a falha mais comum; um caminho relativo como /img/card.jpg funciona no seu navegador e falha para todo rastreador de prévia.
• og:image:width e og:image:height — para a plataforma reservar o espaço antes de baixar o arquivo.
• og:image:alt — uma descrição, para leitores de tela.
• og:title e og:description — o texto do cartão.
• twitter:card com summary_large_image — sem isso, o X mostra o layout quadrado pequeno mesmo com a imagem perfeita.

O problema do corte

Você desenha uma imagem e cada plataforma corta de um jeito.

• Facebook e LinkedIn: mais ou menos o quadro inteiro 1,91:1.
• O cartão grande do X: mais perto de 2:1 — as bordas de cima e de baixo vão embora.
• Apps de chat na lista de mensagens: muitas vezes um quadrado pequeno ou uma faixa estreita — os terços laterais vão embora.
• Alguns apps não mostram imagem na lista e só a revelam ao abrir a mensagem.

Não dá para atender todas com exatidão. O que dá é tratar o centro como a única área confiável. Mantenha o sujeito e todo o texto dentro de uma caixa centralizada de cerca de 1000 × 520 e deixe a faixa externa carregar só fundo. O que precisa sobreviver a um corte quadrado tem que caber nos 630 × 630 centrais.

Texto no cartão

Uma imagem de 1200 pixels de largura é exibida a cerca de 500 num feed de desktop, e menor numa lista de chat no celular. É uma redução de uns 40%, antes de qualquer corte.

Então o texto numa imagem OG precisa ser bem maior do que parece na sua ferramenta de design. Um bom teste: reduza a exportação de 1200 × 630 para 500 pixels de largura e olhe. Se você precisa se aproximar, está pequeno demais. Na prática isso significa um título de poucas palavras em corpo enorme, não uma frase.

E lembre que o cartão já mostra seu og:title como texto real logo abaixo. Repetir as mesmas palavras dentro da imagem desperdiça o espaço — use a imagem para algo que o título não diz.

A armadilha do cache

As plataformas baixam sua imagem OG uma vez e guardam em cache, às vezes por muito tempo. A consequência pega todo mundo: você conserta a imagem, compartilha o link de novo, e a antiga continua aparecendo.

• Use o depurador de compartilhamento de cada plataforma para forçar uma nova busca daquela URL.
• Ou mude o nome do arquivo. Uma URL nova não tem entrada no cache, então é buscada na hora. Funciona em todo lugar sem precisar entrar em conta nenhuma.

Uma imagem para o site inteiro ou uma por página?

Uma única imagem OG para o site todo é o atalho de sempre. É melhor que nada — ao menos impede a plataforma de adivinhar — mas todo link que você compartilha fica idêntico, o que não diz nada ao leitor sobre o que ele vai abrir.

Imagens por página funcionam melhor, e não precisam ser feitas à mão. Um meio-termo razoável é um modelo: fundo e posição do logo constantes, com o título da própria página composto por cima. Produção barata e um cartão que diz algo específico em cada link.

Cinco falhas silenciosas

• URL relativa. Parece certa no código e não busca nada. Precisa ser absoluta, com https://.
• PNG transparente. Transparência não é suportada na maioria das renderizações de prévia e costuma virar preto. Exporte em JPEG, ou em PNG com fundo sólido pintado.
• Rastreador bloqueado. Se o caminho da imagem está proibido no robots.txt, atrás de login, ou num host que bloqueia agentes desconhecidos, o cartão sai vazio.
• Imagem lenta demais. Um arquivo muito grande pode estourar o tempo da busca da prévia. Mantenha abaixo de 1 MB.
• Sem twitter:card. A imagem está boa, só o layout é pequeno — fácil de olhar e não ver.

Consulta rápida

• 1200 × 630, proporção 1,91:1, abaixo de 1 MB, JPEG
• Declare og:image com URL absoluta — caminhos relativos são a falha número um
• Adicione twitter:card = summary_large_image ou o X mostra o cartão pequeno
• Sujeito e texto num centralizado de 1000 × 520; conte com as bordas cortadas
• Confira o texto a 500 px de largura, não em tamanho cheio
• Mude o nome do arquivo para vencer o cache de prévias
• Nada de transparência — ela renderiza preta