Gerador de prévia do Open Graph

Você só descobre como fica um link compartilhado depois de compartilhá-lo — e aí o post já está no ar com a imagem errada. A ferramenta acima gera a prévia do card a partir das suas tags Open Graph antes da publicação, para que você corrija antes o tamanho do título ou a imagem que está faltando.

Como funciona

Há dois caminhos. Preencha os campos diretamente — título, nome do site, descrição, URL da página, URL da imagem — e a prévia é atualizada enquanto você digita. Ou cole o HTML do <head> da sua página na caixa de importação, e a ferramenta extrai as tags para você.

O parser segue a mesma ordem de precedência de um crawler de verdade:

• As tags og:* prevalecem sempre que estão presentes.
• As tags twitter:* preenchem o que o Open Graph deixou vazio — então uma página que só tem twitter:title também gera prévia.
• Um simples elemento <title> e a <meta name="description"> são o último recurso.
• As entidades HTML são decodificadas, então & aparece como & em vez de vazar para a prévia.

O domínio exibido abaixo do card é derivado da URL da página, sem o protocolo e sem um eventual prefixo www., que é como a maioria das plataformas o mostra. Tudo roda no seu navegador: você pode colar o código de uma página de staging ainda não lançada sem que ele vá para lugar nenhum.

O que conferir antes de publicar

A imagem é o card inteiro. Uma prévia de card grande é quase só imagem; se ela estiver ausente ou quebrada, o post vira um link de texto que recebe uma fração dos cliques. Requisitos que valem a pena respeitar: uma URL absoluta, no mínimo 1200×630 pixels, menos de uns 5 MB, um formato comum, e ela precisa estar acessível sem autenticação. Um caminho relativo é, de longe, a causa mais frequente de card em branco — o crawler que busca sua página não está na origem da sua aplicação.

Os títulos são truncados pela largura em pixels. Cerca de 60 caracteres funcionam bem em todas as plataformas; no celular, menos que isso. Coloque no início o que faz a pessoa clicar; um título no formato "… | Seção | Nome do site" desperdiça sua posição mais valiosa.

As descrições são cortadas por volta de 150–200 caracteres, e algumas plataformas as omitem por completo em telas pequenas. Escreva a primeira frase de modo que ela se sustente sozinha.

O tipo de card acompanha a imagem. twitter:card deve ser summary_large_image quando você tem uma imagem adequada e summary quando não tem; declarar o card grande sem uma imagem grande gera um recorte esticado e de baixa qualidade.

Toda URL absoluta precisa ser absoluta para um estranho. og:url, og:image e a canônica devem apontar para a URL pública de produção, não para um endereço de localhost ou de staging que vazou por uma variável de template.

Por que a prévia e a realidade às vezes não batem

Esta ferramenta mostra o que as suas tags dizem. Depois, as plataformas aplicam as próprias regras por cima, e três delas costumam pegar as pessoas desprevenidas.

Cache. Facebook, LinkedIn e Slack fazem cache agressivo dos metadados coletados — muitas vezes por dias. Corrigir uma tag não atualiza um link que já foi compartilhado; você precisa usar o scraper ou o depurador da própria plataforma para forçar uma nova coleta.

Rastreabilidade. Em geral, os crawlers das redes sociais não executam JavaScript. Tags injetadas no cliente depois da hidratação ficam invisíveis para eles. Se o seu card aparece em branco quando compartilhado, mas está correto no inspetor de elementos do navegador, quase certamente o motivo é esse — as tags precisam estar no HTML renderizado no servidor.

Redirecionamentos e autenticação. Um crawler que bate numa tela de login, num redirecionamento geográfico ou num intersticial de consentimento enxerga os metadados dessa página, não os seus.

Leituras e ferramentas relacionadas

O head do documento e as regras sobre o que deve ir nele são tratados em O essencial de HTML5. Como um card só aparece quando o crawler recebe uma resposta bem-sucedida, vale conhecer os códigos que ele pode receber no lugar — Códigos de status HTTP cobre os redirecionamentos e erros que quebram o compartilhamento sem alarde.

Para gerar o bloco de tags logo de início, use o gerador de meta tags; para organizar a marcação do <head> ao redor, o formatador de HTML.