Pré-visualização do Open Graph
Informe o endereço de uma página, ou cole o HTML dela, para ver o cartão que as pessoas recebem ao compartilhá-la e corrigir o que estiver faltando.
As tags Open Graph são metatags no head de uma página. Elas dizem às redes sociais e aos apps de chat qual título, descrição e imagem mostrar quando alguém compartilha o link.
A ferramenta lê essas tags e desenha um cartão de link no estilo de uma publicação do Facebook. Ela também confere o tamanho e a proporção da imagem e lista as tags que faltam ou são longas demais.
Perguntas
Por que o Facebook ainda mostra a minha pré-visualização antiga?
O Facebook guarda o cartão do link em cache após o primeiro compartilhamento. Depois de corrigir as tags, passe o endereço pelo Sharing Debugger e faça uma nova coleta para atualizar o cache. Outras plataformas têm caches próprios.
Por que a pré-visualização fica vazia em uma página feita com JavaScript?
Os coletores de links leem o HTML enviado pelo servidor e não executam JavaScript. Se as tags são adicionadas apenas no navegador, elas não são vistas. Gere-as no servidor ou no HTML estático.
Qual é o tamanho ideal da imagem Open Graph?
1200 x 630 pixels, proporção de cerca de 1,91:1, com menos de 8 MB. Imagens menores que 600 x 315 pixels aparecem como uma miniatura ao lado do texto.
Por que a pré-visualização é diferente do que vejo ao compartilhar?
Cada plataforma tem o próprio corte, limites de texto e cache. Esta pré-visualização segue o layout comum do Facebook e lê a sua página uma única vez, agora. A plataforma também pode ter guardado uma versão mais antiga.
Quais tags são mais importantes?
og:title, og:description, og:image e og:url. As demais, como og:site_name e twitter:card, são opcionais, mas melhoram o cartão.