Como usar
- Informe o og:title e a og:description usados ou planejados para a página.
- Cole a URL completa de og:image. A ferramenta carrega a imagem e informa suas dimensões reais em pixels.
- Adicione a URL ou o domínio da página, compare as prévias dos cartões grande e pequeno e corrija os avisos.
Como funciona
Quando alguém compartilha um link, a maioria das redes sociais e dos apps de mensagens acessa a página e lê as tags Open Graph: og:title, og:description, og:image e og:url. Em seguida, cria um cartão. Uma imagem larga, com proporção de aproximadamente 1,91:1, costuma gerar um cartão grande, com a imagem na parte superior; uma imagem pequena ou quadrada geralmente gera um cartão compacto, com uma miniatura ao lado do texto.
Esta ferramenta mostra dois estilos genéricos de cartão para ajudar você a avaliar o comprimento do texto e o enquadramento da imagem. Ela verifica as dimensões naturais da imagem depois que o navegador a carrega: abaixo de 200 × 200 px, muitos apps não exibem a imagem; abaixo de 600 × 315 px, tendem a usar o layout pequeno; e uma proporção muito diferente de 1,91:1 significa que haverá corte. A dimensão de 1200 × 630 px é amplamente recomendada porque mantém a imagem nítida em telas de alta densidade.
A prévia não mostra exatamente o que um app específico vai exibir. Os apps variam na quantidade de linhas do título e da descrição que mostram; alguns ignoram a descrição, e a maioria mantém a prévia em cache por um tempo após o primeiro compartilhamento, então as alterações nas tags podem demorar para aparecer. Muitas plataformas oferecem uma ferramenta própria de depuração para atualizar esse cache.
Exemplos
Uma captura de tela usada como og:image
Uma captura de tela de 1440 × 900 tem proporção de 1,6:1. A ferramenta avisa sobre a proporção: em um cartão grande, a parte superior e a inferior seriam cortadas. Exportar uma versão de 1200 × 630 evita surpresas.
Um logotipo como única imagem
Um logotipo de 180 × 180 fica abaixo de 200 × 200 px, então muitos apps não exibiriam nenhuma imagem. Em vez disso, use um banner maior e largo que inclua o logotipo.
Verificar o comprimento do título
Um og:title de 90 caracteres ocupa três linhas na prévia do cartão grande. Reduzir para cerca de 60 caracteres deixa o cartão organizado na maioria dos apps.
Perguntas frequentes
Por que meu link aparece diferente no Facebook, no LinkedIn e no X?
Cada plataforma exibe os cartões com seu próprio layout, corte e limite de texto, e algumas mostram a descrição enquanto outras não. Esta prévia é uma aproximação genérica, não uma reprodução do design de nenhuma plataforma.
Alterei og:image, mas a imagem antiga ainda aparece. Por quê?
As plataformas mantêm as prévias dos links em cache. Use a ferramenta de depuração de compartilhamento da própria plataforma para buscar a página novamente ou aguarde o cache expirar. Alterar o nome do arquivo da imagem também ajuda.
Posso usar uma imagem SVG ou WebP?
A maioria das plataformas não é compatível com SVG. WebP funciona em muitos apps, mas não em todos; JPG ou PNG é a opção mais segura.
Por que a ferramenta não consegue carregar minha imagem?
A URL pode exigir login, apontar para uma página HTML em vez de uma imagem, ou o servidor pode bloquear solicitações de outros sites. Se o navegador não conseguir carregá-la aqui, o rastreador de uma rede social talvez também não consiga.
Privacidade
O texto informado permanece no seu navegador. Para verificar a imagem, seu navegador a solicita diretamente à URL informada (sem enviar um referenciador), então o servidor recebe uma solicitação de imagem normal. Nada é enviado ao TIG Tools.