Prévia Open Graph — X, Facebook, LinkedIn, Slack, Discord
Busque as tags Open Graph por URL ou cole o HTML. Mostra o cartão de compartilhamento em cinco plataformas na largura real.
1200 × 630 (1.91:1) — one image serves every platform
Visão geral
Um cartão de compartilhamento é a primeira coisa que a maioria das pessoas vê de uma página, e ele é renderizado por cinco plataformas diferentes com cinco layouts diferentes. Esta ferramenta desenha todos eles nas larguras reais dos respectivos feeds, a partir das mesmas tags, de modo que «o título é cortado no LinkedIn?» passa a ser algo que você olha em vez de adivinhar.
O bloco de tags gerado é exatamente a marcação para colar no seu <head>, com os
valores de conteúdo já escapados para HTML.
Como usar
- Coloque a URL da página no campo de cima e aperte fetch meta — nosso servidor lê as tags dela e preenche os campos. Ou aperte paste HTML e cole o código-fonte, o que fica inteiramente dentro da sua aba.
- Ajuste manualmente o título, a descrição, o nome do site e a URL da imagem para testar alternativas.
- Alterne entre ALL e uma única plataforma para comparar, ou concentre-se naquela que te interessa.
- Observe os contadores; eles ficam âmbar quando um valor está longo o suficiente para ser cortado.
- Aperte copy tags e cole o resultado no
<head>da página.
As tags que realmente importam
Cinco plataformas, um conjunto de tags. O que cada uma delas lê, na ordem em que lê:
| Tag | Efeito | Observações |
|---|---|---|
og:title | Manchete do cartão | Cai para <title>. Cerca de 60 caracteres antes do corte nos cartões mais estreitos |
og:description | Texto do corpo | Cai para <meta name="description">. Cerca de 155 caracteres |
og:image | A imagem | URL absoluta obrigatória. Um caminho relativo não é resolvido por nenhum crawler |
og:url | URL canônica do compartilhamento | As plataformas deduplicam por este valor, então um valor errado mistura o engajamento de duas páginas |
og:type | website ou article | Raramente muda a renderização; article habilita campos extras em algumas plataformas |
og:site_name | Rótulo pequeno acima ou abaixo do título | Ignorado pelo X |
twitter:card | summary ou summary_large_image | Controla se o X mostra uma miniatura ou uma imagem de largura total |
twitter:image | Imagem para o X | Opcional — o X cai para og:image |
O erro mais comum de todos é uma og:image relativa. Ela renderiza corretamente em
toda ferramenta de prévia local que a resolve contra a URL da página, e produz um
cartão sem imagem em todo o resto, porque os crawlers não a resolvem.
O segundo mais comum é uma og:url apontando para a variante errada — com um
parâmetro de rastreamento, ou para http:// quando o site serve https://. As
plataformas indexam o cache pelo valor dessa tag, então o erro também torna o cartão
difícil de corrigir.
Cache, e por que a sua correção não apareceu
Toda plataforma guarda em cache o cartão que montou na primeira vez que uma URL foi compartilhada, e nenhuma delas rebusca em um intervalo que você controle. Editar as tags não atualiza um cartão que já foi compartilhado.
Cada plataforma tem a sua própria maneira de forçar uma atualização:
- Facebook e Instagram — o Sharing Debugger, «Scrape Again»
- LinkedIn — o Post Inspector
- X — não há mais debugger público; mudar a URL é o caminho confiável
- Slack — mantém em cache por cerca de 30 minutos e depois rebusca
- Discord — faz cache de forma agressiva; uma URL alterada é a solução prática
É esse o argumento para conferir o cartão antes do primeiro compartilhamento, e não depois. Um cartão errado que já se propagou é um problema muito maior que um cartão errado que você pegou em uma prévia.
Requisitos de imagem na prática
1200 × 630 numa proporção de 1.91:1 funciona nas cinco plataformas e é o único tamanho que vale a pena produzir. Os detalhes que quebram cartões:
- Abaixo de 200 × 200 é rejeitado de saída por várias plataformas.
- Acima de cerca de 5 MB é descartado por alguns crawlers, em vez de redimensionado.
- PNGs transparentes são compostos contra o fundo que a plataforma usa, que varia entre modo claro e escuro. Use uma imagem opaca.
- Texto perto das bordas é cortado, porque cada plataforma recorta a mesma imagem de forma ligeiramente diferente. Mantenha o que é importante dentro dos 80% centrais.
- Uma imagem atrás de autenticação produz um cartão vazio. Crawlers não estão logados, e não enviam os seus cookies.
Exemplos
- Auditar uma página no ar: cole a URL dela e aperte fetch meta — os campos se preenchem com as próprias tags da página e você vê o que as plataformas sociais vão montar.
- Escrever uma página nova: deixe a imagem vazia para trabalhar contra o placeholder e depois insira a URL real de 1200 × 630 quando ela existir.
- Títulos longos: cole uma manchete de 90 caracteres e observe-a sobreviver no X, mas quebrar em duas linhas no Facebook.
Observações
As prévias são reconstruções fiéis do cartão de cada plataforma nas larguras que elas usam, não capturas de tela tiradas dessas plataformas. As plataformas ajustam os seus layouts ao longo do tempo, e algumas aplicam o próprio cache — um cartão que você já compartilhou pode manter a imagem antiga até você limpá-la no debugger daquela plataforma.
A extração de tags lê og:* primeiro e cai para twitter:*, depois para <title> e
<meta name="description">, que é aproximadamente a ordem que os próprios crawlers
usam. A mesma ordem se aplica tanto se as tags vieram de fetch meta quanto se
vieram de HTML colado.
A busca no lado do servidor segue no máximo cinco redirecionamentos, lê no máximo os primeiros 512 kB da página e recusa qualquer coisa que não seja HTML. Apenas uma lista fixa de chaves meta é retornada; nada mais da página é repassado.