Prévia de Open Graph — confira os cards de redes sociais
As tags Open Graph decidem como sua página aparece cada vez que é compartilhada: uma imagem ou título ausente custa cliques e compartilhamentos. Cole suas tags og:/twitter:card ou uma URL para ver a prévia do card no Facebook, X e estilo WhatsApp, detectar campos faltantes e corrigir a proporção da imagem. Passos: cole as tags ou busque uma URL, leia os três cards e a tabela de campos, e corrija o que falta. O modo colar roda no seu dispositivo; o modo URL busca a página uma vez e não a armazena. Exemplo: uma página com og:image de 1200×630 compartilhada como card grande.
Como funciona
A prévia analisa as tags og:/twitter: que você cola (ou as extrai do HTML buscado de uma URL) e desenha três cards. O Facebook usa a imagem 1.91:1 à esquerda com título, descrição e domínio abaixo. O X segue twitter:card: summary_large_image mostra uma imagem grande em cima, summary mostra uma pequena ao lado do texto. Apps de mensagem como WhatsApp mostram um card grande. A tabela marca og:title, og:description e og:image como obrigatórios e lista os opcionais.
Regras usadas pela prévia
Estes são os tamanhos e fallbacks que as plataformas usam, com base no protocolo Open Graph e na documentação do X Cards.
- Campos obrigatórios: og:title, og:description e og:image. Os faltantes são marcados para você corrigir antes de publicar.
- og:image em 1200×630 px (1.91:1) funciona em todas as plataformas principais. O Facebook também aceita recortes 2:1 e 1:1; imagens pequenas costumam ser ampliadas e ficar borradas.
- twitter:card summary_large_image combina com imagem grande; summary com uma menor. Sem twitter:card, as plataformas inferem um card summary das tags og:.
- Quando og:title ou og:image faltam, as plataformas usam o título HTML, a meta description e a primeira imagem da página.
- O tamanho é medido carregando a imagem no navegador; se ela não carregar (bloqueada, offline ou URL errada), a verificação reporta desconhecido.
Exemplo
As tags de exemplo descrevem um post com og:image de 1200×630 e twitter:card summary_large_image. A prévia mostra um card do Facebook com a imagem à esquerda, um card grande do X, um card estilo WhatsApp e uma tabela com todos os campos obrigatórios presentes.
Bons usos
- Antes de publicar um post ou landing page, cole as tags uma vez e confirme que o card fica certo no Facebook, X e apps de mensagem.
- Quando um link compartilhado não mostra imagem ou sai cortado, cole as tags og: para ver se og:image está faltando ou com proporção errada.
- Depois de atualizar um CMS ou tema, busque a URL ao vivo e verifique se as tags og: ainda correspondem à página.
Frequently asked questions
O que acontece se uma página não tem tags Open Graph?
Facebook, X e WhatsApp montam a prévia com o título HTML, a meta description e a primeira imagem da página. O card pode sair incompleto ou com a imagem errada, e é por isso que os campos og: obrigatórios existem.
Qual deve ser o tamanho de og:image?
O tamanho seguro é 1200×630 px, proporção 1.91:1 que todas as plataformas principais aceitam. O Facebook agora também suporta recortes 2:1 e 1:1. Imagens muito pequenas costumam ser ampliadas e ficam borradas.
Como twitter:card se relaciona com as tags og:?
twitter:card escolhe o layout: summary_large_image mostra uma imagem larga, summary mostra uma pequena. Quando twitter:title, twitter:description ou twitter:image faltam, o X usa a tag og: correspondente.
O que a plataforma faz quando og:image está faltando?
Ela usa a primeira imagem encontrada no HTML da página, ou mostra o card sem imagem. A falta de og:image é a causa mais comum de um link compartilhado sem imagem de prévia.
Por que a verificação de proporção diz “desconhecido”?
A prévia tenta carregar og:image com um carregamento de imagem do navegador para ler o tamanho real. Quando a imagem está bloqueada, offline, lenta ou o servidor recusa a requisição, o tamanho não pode ser lido e a verificação reporta desconhecido.
Minhas tags são enviadas para algum lugar?
Não. No modo colar, a análise e a prévia rodam no seu dispositivo. O modo URL busca a página uma vez através do nosso worker e não a armazena.
Related tools
Dúvidas ou feedback
Algo pouco claro, quebrado ou faltando? Escreva abaixo — lemos cada mensagem sobre estas ferramentas.