Imagem Open Graph

Uma imagem Open Graph é a imagem de pré-visualização que redes sociais, aplicativos de mensagem e ferramentas de colaboração exibem quando alguém compartilha um link. A página a declara com a meta tag og:image do protocolo Open Graph, que o Facebook introduziu em 2010.

O valor da tag é uma URL absoluta para a imagem. Tags opcionais informam a largura, a altura, o tipo MIME e o texto alternativo: og:image:width, og:image:height, og:image:type e og:image:alt. O X, antigo Twitter, lê as próprias tags twitter:image e usa as tags Open Graph quando elas estão ausentes.

Os serviços buscam e armazenam em cache a imagem quando um link é compartilhado pela primeira vez, então as mudanças podem não aparecer até que o cache seja atualizado.

Por que as imagens OG importam

Um link com uma imagem de pré-visualização clara ocupa mais espaço em um feed ou em um chat do que uma URL simples, e mostra ao leitor do que trata a página antes de ele clicar. Sem og:image, os serviços escolhem uma imagem da página ou não mostram imagem nenhuma.

Especificações de imagens OG

Propriedade	Prática comum
Tamanho	1200×630 pixels
Proporção de aspecto	Cerca de 1.91:1
Formato	PNG ou JPG
URL	Absoluta, acessível publicamente por HTTPS
Texto	Mantido longe das bordas, que alguns serviços cortam

Cada plataforma publica suas próprias diretrizes e as altera com o tempo. Verifique a documentação atual das plataformas que importam para você.

Como criar imagens OG eficazes

1. Comece com uma tela de 1200×630.
2. Adicione um título curto em tipografia grande e uma captura de tela ou visual claro do produto.
3. Mantenha o conteúdo importante na área central.
4. Exporte em PNG para layouts com muito texto ou em JPG para fotos, e mantenha o arquivo pequeno.
5. Teste o link na ferramenta de pré-visualização ou de depuração de cada plataforma.

Em um fluxo real de publicação

Equipes costumam gerar imagens OG a partir de um modelo para cada post de blog ou página de documentação. Uma captura de tela do produto dentro do modelo mostra a interface real. Capture-a em um tamanho maior que o espaço disponível e depois reduza para obter texto nítido.

Erros comuns

• Usar uma URL relativa em og:image.
• Colocar texto perto das bordas, onde algumas plataformas cortam.
• Esquecer o cache depois de atualizar a imagem.
• Usar uma captura alta que é cortada em uma faixa ilegível.

Precisa corrigir uma imagem agora?

Monte uma pré-visualização de 1200×630 a partir de uma captura de tela com o Social Image Composer e confirme a proporção com o Aspect Ratio Calculator.

Perguntas frequentes

A imagem OG é igual ao favicon?

Não. O favicon é um pequeno ícone do site. A imagem OG é uma pré-visualização grande para links compartilhados.

Posso usar SVG em og:image?

Muitos serviços não renderizam pré-visualizações em SVG. Use PNG ou JPG.

Fontes

• The Open Graph protocol

Recursos relacionados

• Favicon: o pequeno ícone exibido nas abas do navegador.
• Image Compressor: mantém pequeno o arquivo de pré-visualização.