Pré-visualização Open Graph

O que uma plataforma realmente lê

Quando um link é colado no Slack, LinkedIn, X ou iMessage, essa plataforma busca a página e cria um cartão a partir das suas meta tags. Nunca executa o teu JavaScript nem vê o teu CSS — lê apenas as tags no head e mais nada.

A cadeia de fallback

A maioria das plataformas resolve pela mesma ordem, e esta pré-visualização segue-a:

Título - twitter:title, depois og:title, depois <title>
Descrição - twitter:description, depois og:description, depois a meta descrição
Imagem - twitter:image, depois og:image, depois nada

Por isso, duplicar todas as tags Open Graph como tags Twitter é normalmente trabalho perdido. A única que vale a pena definir separadamente é twitter:card, porque decide entre a imagem grande e a miniatura pequena.

As três falhas que causam a maioria dos cartões quebrados

Um og:image relativo. O rastreador não tem contexto da página para o resolver. URL HTTPS absoluta ou nada.
Uma imagem inacessível. Por trás de autenticação, bloqueada no robots.txt ou servida por um host que recusa user agents desconhecidos.
Cache agressivo. Corrigiste as tags e o cartão antigo persiste por dias. Facebook Sharing Debugger e LinkedIn Post Inspector forçam uma nova análise; o cache do X só precisa expirar.

Não é uma funcionalidade SEO

Nenhuma destas tags é fator de ranking. Elas decidem se um link parece valer a pena clicar quando alguém o partilha – e um link que aparece como uma caixa cinzenta com uma URL simples é partilhado e clicado significativamente menos.

Para escrever as tags desde o início, usa o gerador de meta tags em vez disso.

Perguntas frequentes

Por que o meu link não mostra imagem quando partilhado?

Quase sempre porque falta og:image, é um caminho relativo em vez de um URL HTTPS absoluto, ou aponta para algo que a plataforma não consegue obter – atrás de autenticação, bloqueado por robots.txt ou demasiado grande. O rastreador que obtém o cartão não tem contexto da página, por isso caminhos relativos não funcionam.

Que tamanho de imagem devo usar?

1200 por 630 pixels, menos de cerca de 5MB. As plataformas cortam de formas diferentes, por isso mantém texto e rostos longe das bordas. Abaixo de 600 por 315 a maioria das plataformas reduz para a miniatura quadrada pequena independentemente da tua configuração twitter:card.

Atualizei as tags mas o cartão antigo continua a aparecer.

As plataformas fazem cache agressivo, muitas vezes por dias. Usa o Facebook Sharing Debugger e o LinkedIn Post Inspector para forçar uma nova análise. O X não tem equivalente público, por isso o cache só expira sozinho.

Preciso das tags twitter: se já tenho Open Graph?

Na maioria das vezes não – o X recorre ao Open Graph para título, descrição e imagem. A exceção é twitter:card, que decide entre imagem grande e miniatura pequena. Essa muda muito o cartão e vale a pena definir explicitamente.

Isto afeta o SEO?

Não diretamente. As tags Open Graph não são fatores de ranking. Influenciam se um link partilhado parece apelativo para clicar, o que afeta o tráfego e os sinais secundários que daí resultam – e um link que aparece como uma caixa cinzenta simples no Slack simplesmente é partilhado menos.