Categoria: Desenvolvimento
Pré-visualização de Open Graph
Veja como o card de link de uma página vai aparecer ao ser compartilhado
Cole as tags <head> de uma página e veja como o link vai ser renderizado como um card compartilhado, além de um checklist dos campos de Open Graph e Twitter Card que estão faltando. Tudo analisado no seu navegador — nada é buscado ou enviado.
Pré-visualização do link
Checklist
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Quando um link é compartilhado em redes sociais ou em um aplicativo de chat, o card de pré-visualização é montado a partir das meta tags de Open Graph e Twitter Card no <head> da página — não a partir do conteúdo da página em si. Tags ausentes ou malformadas resultam em título em branco, imagem ausente, ou nenhum card. Esta ferramenta lê as tags que você cola e renderiza o card da mesma forma que uma plataforma de compartilhamento faria, ao lado de um checklist do que está presente.
Como usar
- Copie a seção <head> da sua página, ou apenas suas meta tags.
- Cole na entrada.
- Confira o card de pré-visualização renderizado e o checklist abaixo dele.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Isso busca minha página ao vivo?
- Não — você mesmo cola o HTML. Nada do que você digita é enviado a lugar nenhum; as tags são analisadas no seu navegador.
- Por que minha imagem não aparece?
- A pré-visualização carrega a URL da sua tag og:image diretamente do seu navegador, então ela só vai aparecer se essa URL for pública e acessível. Uma tag de imagem ausente também deixa o card em branco.
- Preciso das tags de Open Graph e de Twitter Card ao mesmo tempo?
- Open Graph (og:*) cobre Facebook, LinkedIn, Slack e a maioria das plataformas. Twitter/X lê primeiro as tags twitter:* e recorre ao Open Graph como alternativa, então definir ambas dá o resultado mais consistente.