Tags Open Graph: como controlar a prévia de links
Quando um link é compartilhado no Facebook, LinkedIn, WhatsApp, Slack ou X, algumas linhas no head da página decidem que título, texto e imagem as pessoas vão ver.
Cole um link numa conversa ou num post e, um instante depois, aparece um card com uma imagem, um título e uma linha de texto. Esse card não é adivinhado a partir da página: ele é montado com as tags Open Graph, um punhado de elementos meta no <head> da página. Páginas sem essas tags recebem o que a rede conseguir extrair, que muitas vezes é o logotipo, um aviso de cookies ou imagem nenhuma. Este guia explica as tags que importam, as regras da imagem e como corrigir uma prévia que não atualiza.
O que é Open Graph
Open Graph é um pequeno conjunto de convenções lançado pelo Facebook em 2010 para que qualquer página web pudesse se descrever ao ser compartilhada. A ideia se espalhou muito além do Facebook: LinkedIn, WhatsApp, Telegram, Slack, Discord, Microsoft Teams e muitos outros leem as mesmas tags. O X também as lê, junto com as suas próprias tags twitter:. Por isso, escrevê-las uma vez cobre quase todos os lugares onde um link pode ser compartilhado.
As tags têm esta cara:
<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">As tags que importam
| Tag | O que define | Dica |
|---|---|---|
og:title | O título em negrito do card | Pode ser diferente do título de busca: mais curto e mais convidativo |
og:description | A linha abaixo do título | Uma ou duas frases; muitos apps mostram só a primeira linha |
og:image | A imagem | Um endereço https:// completo; veja as regras de tamanho abaixo |
og:url | O endereço ao qual o compartilhamento é atribuído | O endereço canônico, sem parâmetros de rastreamento |
og:type | O tipo de página | website para a maioria das páginas, article para posts |
og:site_name | O site mostrado acima ou abaixo do título | O nome da sua marca |
og:locale | O idioma e a região | Por exemplo en_US; opcional |
Repare que o Open Graph usa property, e não name. A maioria das plataformas aceita os dois, mas property é o que a especificação diz.
A imagem: tamanho e formato
A imagem é o que as pessoas notam primeiro, e é onde a maioria das prévias dá errado.
- Tamanho: 1200 × 630 pixels, uma proporção de 1,91 para 1, funciona em todo lugar. Imagens menores que 600 × 315 podem aparecer como uma miniatura pequena ou ser descartadas.
- Formato: JPG ou PNG são seguros. O WebP é aceito pela maioria das plataformas, mas não por todas; GIFs aparecem como imagem estática.
- Tamanho do arquivo: mantenha bem abaixo de alguns megabytes. Alguns apps, o WhatsApp em especial, ignoram imagens pesadas.
- Endereço: um endereço https:// absoluto que qualquer pessoa consiga abrir. Caminhos relativos, imagens atrás de login e endereços bloqueados pelo robots.txt não funcionam.
- Área segura: mantenha textos e rostos longe das bordas, porque alguns apps cortam a imagem em um quadrado ou numa faixa mais estreita.
O conversor de imagens redimensiona e comprime uma imagem para essas dimensões sem fazer upload dela.
Cards do X (Twitter)
O X lê as tags Open Graph para o título, a descrição e a imagem, mas uma decisão precisa de uma tag própria: twitter:card. Com summary_large_image, a imagem aparece larga acima do texto; com summary, ela é um quadrado pequeno ao lado. Sem essa tag, os links podem aparecer como uma URL simples. A twitter:site pode indicar a conta por trás do site. O gerador de Twitter Card escreve os dois conjuntos de tags juntos.
Open Graph e mecanismos de busca
Os mecanismos de busca não classificam páginas pelas tags Open Graph; quem molda o resultado de busca é o elemento <title> e a meta description. Os dois conjuntos costumam ter textos parecidos, mas servem leitores diferentes: o título de busca deve conter as palavras que as pessoas pesquisam, enquanto o título de compartilhamento pode ser escrito para quem está rolando um feed. A prévia da busca do Google mostra como fica a versão de busca.
Por que a prévia está errada ou não aparece
| Sintoma | Causa provável | Solução |
|---|---|---|
| Imagem ou texto antigo depois de uma alteração | A plataforma guardou em cache a primeira prévia | Peça para ela ler a página de novo, por exemplo com o Facebook Sharing Debugger ou o LinkedIn Post Inspector |
| Nenhuma imagem | Endereço de imagem relativo ou inacessível | Use um endereço https:// completo e público |
| Miniatura pequena em vez de imagem larga | Imagem pequena demais, ou falta de twitter:card no X | Use 1200 × 630 e adicione summary_large_image |
| Título errado | Tags adicionadas por JavaScript depois que a página carrega | Coloque as tags no HTML que o servidor envia; a maioria dos robôs não executa scripts |
| Nada aparece em uma única página | A página bloqueia robôs ou exige login | Permita que o robô acesse a página |
O ponto do JavaScript pega muitos aplicativos de página única (SPA): se as tags só aparecem depois que os scripts rodam, os robôs das redes sociais nunca as veem. Renderize as tags no servidor ou pré-renderize as páginas mais compartilhadas.
Escrevendo as tags
O Gerador de Meta Tags escreve as tags de busca, as tags Open Graph e as tags do X a partir de um único formulário curto, com prévias do Google, do Facebook e do X que se atualizam enquanto você digita. Ele também consegue ler as tags de uma página existente a partir do HTML dela, que é o jeito mais rápido de auditar uma página que você já tem. O gerador de Open Graph abre a ferramenta com a prévia social em destaque.