Tags Open Graph: como controlar a prévia dos seus links

Resumindo: as tags Open Graph dizem às redes sociais e aos aplicativos de mensagem o que exibir quando seu link é compartilhado. Toda página precisa de og:title, og:description, og:image e og:url, além de twitter:card para o X. Use uma URL de imagem absoluta em HTTPS, com cerca de 1200 × 630 px, menos de 5 MB e a parte importante perto do centro. Renderize as tags no HTML enviado pelo servidor e, depois de alterá-las, atualize a prévia em cache de cada plataforma, porque os cards antigos teimam em ficar.

A prévia de um link costuma ser a primeira impressão do seu site. Um colega cola sua página de preços no Slack, um cliente compartilha um produto no WhatsApp, um parceiro publica seu artigo no LinkedIn. Se a página não tem tags Open Graph, cada aplicativo adivinha: o texto do banner de cookies vira a descrição, a imagem é um logotipo minúsculo ou simplesmente não existe, e o título é o que estiver no <title> da página.

Este guia explica o que cada tag faz, quais plataformas leem o quê, os tamanhos de imagem que funcionam em todo lugar, por que as prévias não atualizam e como nosso verificador de Open Graph gratuito encontra tags ausentes, com a correção para cada uma.

O que é o Open Graph

Segundo o ogp.me, "The Open Graph protocol was originally created at Facebook." Ele transforma uma página web em um "rich object" com título, tipo, imagem e URL que outros serviços podem exibir. Foi criado pelo Facebook, mas LinkedIn, Slack e a maioria dos aplicativos de mensagem leem as mesmas tags, e o X as lê como alternativa (fallback) às suas próprias.

As tags são elementos meta comuns no <head>, escritos com o atributo property:

<meta property="og:title" content="Waterproof Hiking Boots for Women">
<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43.">
<meta property="og:image" content="https://www.example.com/images/boots-share.jpg">
<meta property="og:url" content="https://www.example.com/hiking-boots/women/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

As tags que importam

O protocolo define quatro propriedades obrigatórias: título, tipo, imagem e URL canônica. Na prática, algumas opcionais também importam.

Dois detalhes da especificação valem a atenção. Se uma tag aparece duas vezes, "the first tag (from top to bottom) is given preference during conflicts", então a tag do tema, que vem acima da do plugin, prevalece. E propriedades estruturadas como og:image:width pertencem ao og:image imediatamente acima delas.

Quem lê o quê

Cada plataforma documenta suas próprias regras. O essencial:

• Facebook e aplicativos da Meta. O guia para webmasters da Meta lista og:url, og:title, og:description, og:image e og:type. As imagens ficam em cache por URL. O Sharing Debugger mostra o que o crawler coletou e dispara uma nova coleta.
• LinkedIn. Sua página de ajuda cita quatro tags que "must exist": og:title, og:image, og:description e og:url. As imagens precisam ter pelo menos 1200 × 627 px, proporção de 1,91:1 e no máximo 5 MB. O Post Inspector mostra como o LinkedIn enxerga uma URL e atualiza sua cópia.
• X. O X usa tags twitter: e recorre aos equivalentes Open Graph quando elas faltam, então og:title, og:description e og:image costumam bastar. twitter:card define o layout; summary_large_image mostra uma imagem larga. O X documenta proporção de 2:1 para esse card, mínimo de 300 × 157 px, arquivos abaixo de 5 MB e JPG, PNG, WebP ou GIF (não SVG).
• Slack. Quando nenhum app cuida de um domínio, o Slack "crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadata" (documentação do Slack).
• Google. Não é uma rede social, mas o Google lista og:title entre as fontes dos title links e considera og:site_name ao escolher o nome do site exibido acima dos seus resultados.

Como escolher a og:image

A imagem decide se a prévia parece caprichada ou quebrada. Os requisitos variam um pouco entre plataformas, então mire em uma imagem que atenda a todas:

Use uma imagem específica para cada página importante (foto do produto, ilustração do artigo) e uma imagem padrão bem desenhada para as demais. Um logotipo sobre um quadrado branco é a pior opção: a maioria dos aplicativos o exibe pequeno ou o corta de forma desajeitada.

Por que as prévias não atualizam

As plataformas guardam a prévia que montaram na primeira vez que a URL foi compartilhada. A Meta afirma que "Images are cached based on the URL and won't be updated unless the URL changes", então trocar share.jpg por um novo arquivo com o mesmo nome pode não mudar nada. A sequência confiável:

1. Envie a nova imagem com um novo nome de arquivo (ou adicione um parâmetro de versão à URL).
2. Atualize as tags da página e publique.
3. Passe a URL pelo Sharing Debugger da Meta e pelo Post Inspector do LinkedIn para forçar uma nova coleta.
4. Compartilhe o link de novo. Posts já publicados geralmente mantêm o card antigo.

Tags para diferentes tipos de página

As tags básicas são as mesmas em todo lugar, mas alguns tipos de página se beneficiam de mais:

• Artigos e posts de blog. Use og:type article. O protocolo define propriedades extras para esse tipo, como article:published_time, article:modified_time, article:author e article:section.
• Páginas de produto. Use a foto principal do produto como og:image e coloque o nome do produto, não o da loja, em og:title. Preço e disponibilidade ficam nos dados estruturados de Product, tema do nosso guia de schema markup.
• Home e páginas de categoria. São menos compartilhadas, mas mais vistas. Uma imagem padrão bem desenhada, com seu nome e uma frase curta sobre o que você faz, funciona melhor que uma foto aleatória.
• Páginas que não devem ser compartilhadas, como checkout ou conta. Não precisam de tags especiais; apenas garanta que a imagem padrão não aponte para algo privado.

Como ver o que o crawler vê

Antes de culpar uma plataforma, olhe o HTML que ela recebe. Abra a página com "Exibir código-fonte" (não o inspetor de elementos do DevTools, que mostra a página depois da execução dos scripts) e procure por og:. O guia da Meta também informa o user agent do crawler, facebookexternalhit/1.1, então você pode buscar a página como o Facebook faz, pelo terminal:

curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.example.com/ | grep -i 'og:'

Se as tags aparecem no navegador, mas não nessa saída, elas são adicionadas por JavaScript ou seu servidor ou firewall responde de forma diferente a bots.

Como funciona o verificador de Open Graph da Searvia

O verificador de Open Graph gratuito usa o mesmo mecanismo do nosso verificador de SEO de sites e coloca três verificações em primeiro lugar: tags de compartilhamento social, tag de título e meta description. Informe um domínio ou o endereço de uma página e ele:

1. Busca essa página, seguindo redirecionamentos. Se você informar apenas um domínio, a página verificada é a home; cole o endereço de um artigo ou de uma página de produto para checar a prévia dele.
2. Lê o HTML retornado pelo seu servidor, sem executar JavaScript, do mesmo jeito que a maioria dos crawlers de prévia de link enxerga.
3. Procura quatro tags e registra o primeiro valor não vazio de cada uma: og:title, og:description, og:image e twitter:card.

O resultado é uma tabela com um visto ou uma cruz e o valor exato de cada tag:

A verificação nunca mostra falha e tem baixa prioridade na nota geral, porque a falta de tags sociais não impede que uma página seja encontrada. Mas elas fazem todo compartilhamento parecer pior, e é por isso que a ferramenta as mostra primeiro.

As verificações de título e descrição (aprovadas com 30 a 60 e 70 a 160 caracteres) aparecem logo abaixo, porque muitos aplicativos recorrem a elas quando faltam tags Open Graph. O relatório também inclui uma prévia do resultado no Google, que usa og:site_name como nome do site quando você o define.

O que o verificador não faz: não baixa a imagem para medi-la, não verifica og:url, og:type ou og:image:alt e não busca a página como o crawler de cada plataforma. Use os debuggers das plataformas para a conferência final.

Como interpretar os resultados

• As quatro com visto: o básico está em ordem. Abra os valores e veja se fazem sentido: um título de verdade, uma descrição que não seja o aviso de cookies, uma URL de imagem que comece com https://.
• og:image ausente: corrija primeiro. É a parte da prévia que as pessoas mais notam.
• Só twitter:card ausente: o X ainda lerá suas tags Open Graph, mas pode mostrar um card pequeno. Adicione a tag para obter uma imagem grande.
• Avisos de título e descrição logo abaixo: afetam o Google e os aplicativos que recorrem a eles.

Como corrigir cada tag ausente

og:title ausente

Adicione um título escrito para quem rola o feed, não para o buscador. Ele pode ser igual ao seu <title>, sem o sufixo da marca:

<meta property="og:title" content="Waterproof Hiking Boots for Women">

og:description ausente

Escreva uma ou duas frases com um detalhe concreto. Reaproveitar sua meta description é válido:

<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43, free returns.">

og:image ausente

1. Crie uma imagem de 1200 × 630 px (JPG, PNG ou WebP) com o assunto centralizado.
2. Envie-a para um local público e copie a URL completa em HTTPS.
3. Adicione a tag da imagem, mais as dimensões e o texto alternativo:

<meta property="og:image" content="https://www.example.com/og/boots-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A pair of brown leather hiking boots on a wet rock">

1. Abra a URL da imagem em uma janela anônima para confirmar que ela carrega sem login.

twitter:card ausente

<meta name="twitter:card" content="summary_large_image">

Repare no atributo name: as tags do Twitter usam name por convenção, enquanto as do Open Graph usam property.

Configurações por plataforma

Depois de qualquer alteração, rode o verificador de novo e, em seguida, os debuggers das plataformas.

Erros comuns

• URLs de imagem relativas. /images/share.jpg funciona no navegador, mas não para crawlers que esperam uma URL completa. Use sempre https://….
• Tags injetadas por JavaScript. Aplicativos de página única que definem as tags no navegador costumam gerar prévias vazias. Renderize as tags no servidor ou no build. O Google também recomenda evitar JavaScript que altere meta tags.
• Imagem bloqueada. Uma tela de login, uma regra de proteção contra bots ou uma linha no robots.txt podem impedir o crawler de buscar a imagem. O LinkedIn observa que um site "may be blocking us from pulling the image."
• Uma única imagem para todas as páginas. Funciona, mas um produto ou artigo compartilhado com imagem própria recebe mais atenção.
• Tags duplicadas. Tema e plugin imprimindo og:image: vale a primeira, que pode ser a errada. Veja o código-fonte e procure por og:image.
• Trocar uma imagem mantendo a mesma URL. Os caches guardam a antiga. Use um novo nome de arquivo.
• SVG ou arquivos enormes. Não são aceitos pelo X e deixam tudo lento para todo mundo.

Exemplo prático (hipotético)

O exemplo a seguir é hipotético, não são dados reais. A Fernway, um aplicativo fictício de gestão de projetos, percebe que os links do seu site no Slack mostram apenas uma caixa cinza e o texto "We use cookies to improve your experience."

O verificador de Open Graph mostra og:title e og:description presentes, mas og:image e twitter:card ausentes. O valor da descrição acaba sendo o texto do banner de cookies: um plugin gera og:description a partir do primeiro parágrafo do HTML, e o banner vem primeiro.

As correções: um og:description escrito no template da página, uma imagem de 1200 × 630 px mostrando a visualização em quadro do produto com o assunto centralizado, og:image:width, og:image:height e og:image:alt, e twitter:card definido como summary_large_image. Uma segunda execução do verificador passa. Depois, a equipe passa a URL pelo Sharing Debugger e pelo Post Inspector e publica o link de novo no Slack, onde o novo card aparece.

Um checklist de 15 minutos

1. Rode o verificador de Open Graph no seu domínio.
2. Adicione qualquer tag ausente entre og:title, og:description, og:image e twitter:card.
3. Adicione og:url, og:image:width, og:image:height e og:image:alt enquanto estiver no template.
4. Confirme que a imagem tem 1200 × 630 px, menos de 5 MB, é pública e é servida por HTTPS.
5. Renderize as tags no HTML do servidor, não em JavaScript no cliente.
6. Atualize as prévias em cache nos debuggers das plataformas e compartilhe de novo.

Como a Searvia mantém suas prévias e listagens em ordem

O verificador de Open Graph gratuito analisa uma página, sua home ou qualquer endereço que você informar, em cerca de 20 segundos, sem cadastro, e o mesmo relatório cobre as outras 37 verificações da nossa auditoria de site. As prévias são só uma parte de como suas páginas aparecem; títulos, descrições e canonicals são tema do nosso guia de meta tags, e o verificador de meta tags mostra a sua prévia no Google.

Para o site inteiro, uma conta gratuita da Searvia adiciona uma auditoria de site semanal que rastreia todas as páginas e sinaliza títulos e descrições ausentes ou duplicados, para que o texto usado como alternativa pelos aplicativos continue correto. Para um título ou uma descrição fracos, o Write with AI da auditoria sugere opções prontas (1 crédito), e a auditoria roda de novo toda semana, então uma atualização de tema ou plugin que quebre seus títulos ou descrições aparece no relatório seguinte.