Visualização OG
A Pré-visualização de OG lê suas tags Open Graph e Twitter card e mostra o card de link que um crawler vai renderizar de verdade, incluindo os fallbacks — sem og:title, o card mostra seu <title>, que em geral coloca o nome do site primeiro. Também reporta as falhas silenciosas: uma URL de imagem relativa simplesmente nunca é buscada.
acme.example
Preços
Três planos, sem mínimo de usuários e com um plano gratuito para sempre.
acme.example
Preços
Três planos, sem mínimo de usuários e com um plano gratuito para sempre.
O que há de errado com estas tags?
Como funciona o Visualização OG?
Um card de link é renderizado pelo crawler de outra pessoa, a partir de tags na sua página, e toda forma de dar errado é silenciosa. Nada lança erro, nada registra log, e a página parece ótima no navegador — o card está apenas levemente errado, e a taxa de cliques está levemente menor, para sempre.
A cadeia de fallback é o que de fato renderiza
Plataformas não exigem og:title. Se ele estiver ausente, usam o <title>, que na maioria dos sites é o nome da página com o nome do site na frente — então o card mostra “Acme Analytics — Preços” onde deveria mostrar “Preços”. A pré-visualização acima resolve a cadeia em vez de mostrar apenas o que está presente, e indica de qual fonte cada campo veio, porque “ausente” e “presente, porém errado” pedem correções diferentes.
A falha que parece sucesso
<meta property="og:image" content="/og/pricing.png"> é HTML válido e completamente quebrado. Crawlers não resolvem caminhos relativos contra a página, então a imagem nunca é buscada e o card mostra um retângulo cinza. É a causa mais comum de um card que funciona na pré-visualização local e não mostra nada em produção, e é por isso que uma URL de imagem relativa é reportada como critical, e não como uma nota de estilo.
Por que isto faz parsing em vez de casar padrões
A implementação óbvia é uma expressão regular por tag, e ela quebra na primeira página real: content="a > b" tem um > dentro de um atributo entre aspas, content='It's here' tem um apóstrofo que encerra uma varredura ingênua, e <meta> pode vir auto-fechada, sem tag de fechamento ou com os atributos em qualquer ordem. Por isso o documento é percorrido uma única vez por um scanner que entende de aspas e de elementos de texto cru — a mesma abordagem das ferramentas de JSON e XML daqui.
O que isto não pode fazer é buscar a sua imagem, porque isso significaria uma requisição de rede de uma página que promete nenhuma. Então verifica o que é verificável sem uma — a URL é absoluta, as dimensões declaradas são grandes o bastante, a proporção está próxima do 1.91:1 para o qual todas as plataformas recortam, e o texto alt existe.
Marcação do <head>
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" />
Achados
critical og:image "/static/og/pricing.png" is not an absolute URL.
Crawlers do not resolve relative paths.
warning og:description Missing. The card falls back to <meta description>.
warning og:image:alt Missing. Screen readers announce nothing.
info twitter:card "summary" renders a small square thumbnail.Marcação do <head> → Achados
Marcação do <head>
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" /> <title>Acme Analytics — Pricing</title> <meta name="description" content="Pricing for Acme Analytics." /> <link rel="canonical" href="https://acme.example/pricing" />
Achados
critical og:image "/static/og/pricing.png" is not an absolute URL. warning og:description Missing. warning og:url Missing. warning og:image:alt Missing. info og:type Missing, so it defaults to "website". info og:site_name Missing.
Quais opções e casos-limite o Visualização OG suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| og:title | obrigatória | fallback para <title> | O título do card. Sem ela, o card usa seu <title>, que em geral traz o nome do site na frente — aí o card parece a página inicial, não a página. |
| og:description | obrigatória | fallback para a meta description | As duas linhas abaixo do título. Uma meta description é escrita para um resultado de busca; o texto do card é escrito para alguém decidindo se clica, e raramente são a mesma frase. |
| og:image | obrigatória | nenhuma | Precisa ser uma URL https absoluta — crawlers não resolvem caminhos relativos. 1200×630 é o tamanho do qual todas as plataformas recortam; abaixo de 600×315 o card é ampliado e perde nitidez. |
| og:image:alt | recomendada | nenhuma | Lido em voz alta por leitores de tela e exibido quando a imagem falha ao carregar. Suportado por todas as plataformas grandes e quase sempre omitido. |
| og:image:width / height | recomendada | descobertas | Declará-los permite que o crawler monte o layout do card antes de baixar a imagem. Sem eles, a primeira busca de uma página vira uma segunda requisição pela figura. |
| og:url | recomendada | a URL buscada | O endereço canônico da página. Sem ela, uma página alcançável por duas URLs divide os contadores de compartilhamento entre elas. |
| og:type | recomendada | website | "article" libera os campos de autor e data de publicação e muda a forma como alguns clientes apresentam o card. |
| og:site_name | opcional | hostname | Exibido acima do título pelo LinkedIn e por vários clientes de chat. Sem ele, eles imprimem o nome do host. |
| twitter:card | recomendada | summary | summary_large_image mostra a imagem em largura total; summary mostra uma miniatura quadrada pequena. Um valor não reconhecido é tratado como summary. |
| canonical | recomendada | nenhuma | Um <link rel="canonical"> não é uma tag OG e importa tanto quanto: é o que impede a mesma página em dois endereços de competir consigo mesma. |
Perguntas frequentes
Por que minha imagem não aparece na pré-visualização?
Quase sempre é uma URL relativa. og:image precisa ser absoluta — https://acme.example/og/pricing.png, não /og/pricing.png — porque o crawler a busca fora de contexto e não tem página contra a qual resolver. Por isso ela é reportada aqui como critical. A segunda causa mais comum é uma imagem atrás de login, e a terceira é uma CDN que bloqueia o user agent da plataforma.
Atualizei as tags, mas o card não mudou. Por quê?
Crawlers fazem cache. Facebook e LinkedIn guardam o card por dias, e o X faz cache por cerca de uma semana. O Sharing Debugger do Facebook tem um botão Scrape Again que limpa; o Post Inspector do LinkedIn faz o mesmo. Até você fazer isso, está vendo as tags antigas — por isso uma mudança que funcionou pode parecer que não funcionou.
Qual tamanho a imagem deve ter?
1200×630 pixels. É exatamente 1.91:1, a proporção para a qual todas as plataformas recortam, então nada é aparado. Abaixo de 600×315 a imagem é ampliada e perde nitidez; algo muito mais largo perde as bordas. JPEG para fotos, PNG para arte plana e texto, e mantenha abaixo de cerca de 1 MB — alguns clientes descartam imagens maiores em vez de esperar.
Preciso de tags Twitter se já tenho Open Graph?
O X recorre ao Open Graph para título, descrição e imagem, então og:* sozinho já produz um card. O que ele não faz é escolher o tipo certo de card: sem twitter:card você recebe o summary quadrado pequeno em vez da imagem grande. Uma tag extra vale a pena, e twitter:title vale ter quando o texto do card deve ser diferente da pré-visualização do link nos demais lugares.
Esta ferramenta busca minha página ou minha imagem?
Não. Você cola a marcação e ela é analisada na aba — o painel Network não mostra nada. Essa é uma restrição deliberada, não uma limitação: uma ferramenta que buscasse sua imagem poderia medi-la, e também seria um servidor que conhece cada URL que você cola. As verificações aqui são as que dispensam requisição: URLs absolutas, dimensões declaradas, proporção e texto alt.
Quais plataformas leem quais tags?
O Open Graph é lido por Facebook, LinkedIn, Slack, WhatsApp, Discord, Telegram, Pinterest e — como fallback — X. As tags twitter:* do próprio X vencem lá quando presentes. Alguns clientes acrescentam expectativas próprias: o Slack quer uma imagem quase quadrada para seu unfurl, e o Discord mostra uma miniatura pequena para cards summary e um banner de largura total para summary_large_image.