Teste de prévia de link
Cole um link num chat e ele vira um card com imagem, título e uma linha de texto. Ou uma triste caixa cinza. Esta verificação lê as tags que alimentam o card, mede a imagem e desenha o resultado para seis lugares.
O que acontece quando você cola um link
No momento em que você cola um endereço num post ou num chat, um servidor desse serviço pede a página. Ele não a exibe. Lê a primeira parte do HTML, procura algumas tags <meta>, baixa a imagem para a qual uma delas aponta e monta um card com essas peças. Depois guarda o card, e todo mundo que vê o link recebe a versão guardada.
As tags seguem uma convenção chamada Open Graph, que o Facebook lançou em 2010 e que hoje quase toda rede social e aplicativo de mensagens lê. Cada uma começa com og:. O X lê as mesmas tags e acrescenta uma própria, twitter:card, para escolher o layout.
As tags, em ordem de efeito
og:image- A imagem. Mais do que qualquer outra coisa, é ela que decide se o link chama a atenção. O endereço tem que ser absoluto, começando com
https://. og:title- O título do card. Sem ela, os serviços usam a tag
<title>, que muitas vezes termina com um nome de site que você não queria repetido. og:description- Uma ou duas frases abaixo do título. A alternativa é a meta description e, depois dela, um trecho que o serviço escolhe por você.
twitter:card- Coloque
summary_large_imagee o X mostra a imagem na largura toda. Sem ela, você ganha um quadradinho ao lado do texto. og:url- O endereço sob o qual curtidas e compartilhamentos são contados. Deve ser o mesmo que a URL canônica da página.
og:site_name,og:type,og:locale,og:image:alt- Detalhes de apoio: o rótulo acima do título no Slack e no Discord, o tipo de conteúdo, o idioma e uma descrição da imagem para quem usa leitor de tela.
Como a imagem é avaliada
Nosso servidor baixa o arquivo indicado em og:image (ou em twitter:image quando só existe essa) e o mede com estes limites.
| Medida | Resultado |
|---|---|
Nenhuma og:image | Problema. Se só existir twitter:image, vira um alerta, já que o X tem imagem e os outros não. |
| O arquivo não pode ser baixado, não é uma imagem ou passa de 5 MB | Problema |
| Menor que 600 × 315 px | Problema. O Facebook e o LinkedIn a reduzem a uma miniatura ou a descartam |
| Menor que 1200 × 630 px | Alerta. Aparece, mas fica sem nitidez em telas de alta densidade |
| Largura dividida pela altura abaixo de 1,6 ou acima de 2,2 | Alerta. Os cards têm uma proporção de cerca de 1,91 para 1, então as bordas são cortadas |
| Mais pesada que 1 MB | Alerta. Alguns robôs de prévia desistem de esperar |
Endereço relativo como /img/share.jpg | Alerta. Vários serviços precisam da URL completa |
Se você quer uma receita que funcione em todo lugar, faça um JPEG ou WebP de 1200 × 630 pixels, com menos de 300 KB, e mantenha qualquer texto longe das bordas. A verificação também aponta a falta de título ou de descrição, um <title> com mais de 60 caracteres, uma descrição com mais de 200, e uma og:url que não bate com o link canônico.
Os seis cards desenhados nos resultados são reconstruções feitas a partir das suas tags. O seu navegador carrega a imagem do nosso servidor, numa cópia reduzida, então o site testado nunca vê a sua visita.
Como adicionar as tags e atualizar cards antigos
Os resultados terminam com um bloco preenchido com o que encontramos. Ele vai dentro de <head>:
<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">Atenção ao atributo. As tags Open Graph usam property= e a tag do X usa name=. Num CMS você raramente digita isso à mão. Os plugins de SEO do WordPress, os temas da Shopify, o Squarespace e o Webflow têm um campo de “imagem para redes sociais” por página e um padrão para o site inteiro.
Corrigir as tags não muda os cards que já existem. Cada serviço guarda a sua cópia por dias ou semanas. Você pode pedir uma nova leitura com o Sharing Debugger do Facebook ou o Post Inspector do LinkedIn. Nos aplicativos de chat, acrescentar um parâmetro extra como ?v=2 ao link faz com que ele conte como um endereço novo.
Dois limites para ter em mente. Os layouts mudam, então os desenhos mostram quais peças aparecem, não os pixels exatos. E a verificação lê o HTML sem executar scripts, que é também como os robôs de prévia funcionam. Tags inseridas por JavaScript vão faltar aqui, e vão faltar nas redes também.
Perguntas frequentes
Qual deve ser o tamanho de uma og:image?
1200 × 630 pixels, uma proporção de 1,91 para 1, em JPEG, PNG ou WebP. Mantenha abaixo de 300 KB se puder e abaixo de 1 MB em qualquer caso. Abaixo de 600 × 315, o Facebook e o LinkedIn deixam de mostrá-la como card grande.
Por que meu link mostra uma imagem antiga depois que eu a troquei?
O serviço guardou o card em cache na primeira vez que o link foi compartilhado. Passe o endereço pelo Sharing Debugger do Facebook e clique em “Scrape Again”, ou pelo Post Inspector do LinkedIn. WhatsApp, iMessage e Slack não têm ferramenta assim, então mude a URL levemente para forçar um card novo.
O X ainda precisa das tags twitter:?
Só de uma. O X lê og:title, og:description e og:image quando as versões twitter: não existem. Acrescente twitter:card com o valor summary_large_image para ter a imagem larga.
Por que não aparece prévia nenhuma quando colo o meu link?
Normalmente é uma página que precisa de JavaScript para gerar as tags, um servidor ou firewall que barra os robôs de prévia, uma tela de login, ou um endereço de og:image que retorna erro. Esta verificação informa o erro da imagem quando há um.
As tags Open Graph ajudam no ranqueamento das buscas?
Não. Os mecanismos de busca montam os trechos de resultado a partir da tag title e da meta description. As tags Open Graph só definem a aparência do link onde as pessoas o compartilham, e isso afeta quantas delas clicam.