Preview de Tags OG
Cole meta tags OG ou preencha título/descrição/imagem — visualize os share cards como aparecem no Twitter/X, Facebook, LinkedIn e Discord.
Para que serve?
Quando você compartilha um link no Twitter/X, Facebook, LinkedIn, Discord, Slack ou qualquer chat ou app social moderno, o link é desdobrado em um "card" — título, descrição e imagem — com base nos meta tags Open Graph no head da página. Cada plataforma renderiza esses cards de um jeito diferente e corta o texto em comprimentos diferentes. Esta ferramenta te dá previews lado a lado de como o mesmo conteúdo vai aparecer em cada uma, sem você precisar compartilhar a URL em cada plataforma.
Quando usar
- Você mudou a imagem OG ou o texto e quer confirmar que está certo antes de fazer o deploy.
- Você está escolhendo uma imagem hero e quer ver se o ponto focal vai sobreviver ao crop 1.91:1.
- Você está escrevendo o texto de título/descrição e quer saber onde cada plataforma vai cortar.
- Você herdou uma página sem tags OG e quer rascunhá-las visualizando o card renderizado.
As tags mínimas
<meta property="og:title" content="…"><meta property="og:description" content="…"><meta property="og:image" content="https://…">(URL absoluta, 1200×630 ideal)<meta property="og:url" content="https://…"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image">(para o estilo big-image do X/Twitter)
Cuidados comuns
- Este é um preview estático, não um fetcher ao vivo. As plataformas reais raspam sua página dos servidores delas; se seu site real tiver outra imagem, esta ferramenta não pega. Use os debuggers oficiais (card validator do Twitter, Sharing Debugger do Facebook, Post Inspector do LinkedIn) para a checagem oficial.
- URLs de imagem precisam ser absolutas.
/og.pngnão funciona — os scrapers não conhecem sua origem. - A imagem precisa estar publicamente acessível. Paredes de autenticação, CDNs que exigem referer ou proteção contra hot-link vão te deixar com um card quebrado.
- Aspect ratio importa. 1.91:1 (1200×630 é o canônico) renderiza bem em todas as plataformas. Quadrado ou retrato sofre crop ruim.
- Tamanho de arquivo importa. Alguns scrapers rejeitam imagens acima de 8 MB; mire em <1 MB para manter o first-load rápido.
- Invalidação de cache é real. Uma vez que uma plataforma raspou sua URL, ela faz cache do card. Use os debuggers da plataforma para forçar um re-scrape.
- Os limites de tamanho de título/descrição variam. Twitter/X corta título em torno de 70 caracteres; Facebook em torno de 88; LinkedIn em torno de 100. Coloque as palavras importantes no começo.
- Discord prefere
theme-color. Adicionar<meta name="theme-color" content="#xxxxxx">define a cor da borda esquerda nos embeds do Discord.