EN
PT
ES
Preview de Open Graph
Veja como um link aparece quando compartilhado no Facebook, LinkedIn, X/Twitter, WhatsApp e Slack — e copie um snippet de meta tags pronto para a sua página.
O que é Open Graph?
Open Graph é o protocolo que o Facebook publicou em 2010 para deixar sites declararem metadados estruturados sobre uma página — título, descrição, imagem, tipo, URL canônica — para que links compartilhados em redes sociais virem cards ricos em vez de URLs cruas. Quase todas as plataformas hoje consomem: Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage. O X/Twitter tem o namespace próprio twitter:* mas cai no Open Graph quando os tags do Twitter não estão lá, então um conjunto de tags og: cobre quase todo o ecossistema.
Como usar este previewer
Cole uma URL para buscar as tags existentes, ou preencha os quatro campos centrais à mão para desenhar o card antes de publicar. O preview atualiza ao vivo e aproxima como Facebook, LinkedIn e Slack renderizam. Olhe a imagem: qualquer coisa abaixo de 1200px de largura ou com proporção muito fora do quadrado fica cortada ou reduzida. Quando o card estiver bom, copie o snippet do final e cole no <head> da página.
Por que sua imagem de compartilhamento não atualiza
Facebook, LinkedIn e a maioria das plataformas cacheiam metadados scrapados de forma agressiva — às vezes por dias. Depois que uma URL é compartilhada, mudar só o og:image normalmente não atualiza o card. As soluções são: (1) usar o Sharing Debugger do Facebook para forçar um novo scrape, (2) trocar o nome do arquivo da imagem (card-v2.png) para invalidar o cache, ou (3) publicar em uma URL nova. Planeje isso no checklist de lançamento, em vez de descobrir sob pressão.
Referência de tags
| Tag | Função | Dica |
|---|---|---|
og:title | Mantenha abaixo de 60 caracteres para evitar truncamento. | Manchete exibida no card. |
og:description | 110-200 caracteres rendem bem em quase toda plataforma. | Subtítulo / linha de resumo. |
og:image | PNG ou JPEG 1200×630 em HTTPS, < 5 MB. | Imagem do card. |
og:url | Use a URL canônica, não a versão com tags. | URL canônica para onde o compartilhamento resolve. |
twitter:card | summary_large_image combina com o estilo do card OG. | Tipo de Twitter card. |
Perguntas frequentes
Preciso de tags Open Graph e Twitter card?
twitter:* faltam, o X/Twitter cai no og:*. As tags do Twitter só importam se você quer imagem ou texto diferente no X em relação ao Facebook/LinkedIn. Para a maioria das páginas, um bloco OG bem feito basta.Qual é o tamanho certo da imagem?
Por que o preview não fica idêntico ao card do Facebook?
A ferramenta busca URLs por um servidor?
Posso usar um vídeo como og:image?
og:video para isso, junto com um og:image estático como fallback. Quase todas as plataformas mostram o still no card e só rodam o vídeo após o clique.O que o og:type faz?
website, article, book, profile, etc. O Facebook já renderizava layouts diferentes por tipo; hoje afeta principalmente recursos de descoberta. Use article em posts de blog e website no resto e está ótimo.