Meta tags que o Google e as redes sociais realmente leem

Você abre o código de um site antigo e encontra trinta meta tags no cabeçalho: keywords com cinquenta palavras, author, revisit-after, copyright. Mesmo assim, na busca, todas as páginas aparecem com o mesmo título e um trecho aleatório do menu. A resposta curta: para a busca, o que conta é o title, a meta description e o link rel="canonical". Para o cartão que aparece quando alguém cola o link no WhatsApp ou numa rede social, contam as tags Open Graph: og:title, og:description, og:image e og:url. Escreva essas poucas tags direito, uma versão diferente por página, e apague o resto que não tem função.

Como o resultado da busca é montado

Um resultado do Google tem três partes visíveis: o título clicável, o endereço e um trecho de texto. O título vem, na maioria das vezes, do elemento title. O trecho pode vir da meta description ou do próprio conteúdo da página, se o Google achar que outro trecho responde melhor à busca. O endereço exibido depende de qual URL ele escolheu como a oficial, e é aí que entra a canônica.

O Google não é obrigado a usar o que você escreveu. Se o title for genérico, repetido em várias páginas ou cheio de palavras-chave, ele pode reescrever o título a partir do h1 ou de outros textos da página. Quanto mais específico e honesto o seu título, maior a chance de ele aparecer como você escreveu.

A meta keywords não é usada pelo Google há muitos anos. Ela não ajuda e ainda entrega à concorrência a lista de termos que você mira. Pode remover.

As três tags que decidem a busca

title

É a frase azul do resultado e o texto da aba do navegador. Coloque primeiro o assunto da página e, no fim, o nome do site, se couber. O Google corta títulos longos pela largura em pixels, não por um número fixo de caracteres, então o começo é o que precisa carregar o sentido. Cada página tem o seu.

meta description

É o convite. Uma ou duas frases dizendo o que a pessoa encontra e por que vale clicar. Ela não é fator de posição, mas muda a taxa de clique, e o clique é o que interessa. Escreva como resposta, não como lista de sinônimos. Em um artigo, o resumo que você já escreveu costuma servir.

link rel="canonical"

Diz qual endereço é o oficial quando o mesmo conteúdo responde em várias URLs: com e sem barra no final, com parâmetro de campanha, com e sem www. Sem ela, a busca escolhe sozinha e pode dividir sinais entre as cópias. Os detalhes estão em canonical aponta para a página certa.

Como montar o cabeçalho de um artigo

1. Escreva o title com o assunto do artigo, e a marca no fim.
2. Escreva a meta description com o que a pessoa vai conseguir fazer depois de ler.
3. Declare a canônica com a URL absoluta da própria página.
4. Adicione as tags Open Graph, repetindo título e descrição se fizer sentido, e uma imagem própria.
5. Adicione twitter:card para o cartão grande no X e em serviços que leem essa tag.
6. Gere tudo no servidor, no HTML inicial, não depois via JavaScript.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Backup de MySQL que restaura de verdade | DevBras</title>
  <meta name="description" content="Como gerar o backup com mysqldump, guardar fora do servidor e testar a restauração antes de precisar dela.">
  <link rel="canonical" href="https://www.exemplo.com.br/blog/backup-de-mysql-que-restaura">

  <meta property="og:type" content="article">
  <meta property="og:title" content="Backup de MySQL que restaura de verdade">
  <meta property="og:description" content="Gerar, guardar fora e testar a restauração antes de precisar.">
  <meta property="og:url" content="https://www.exemplo.com.br/blog/backup-de-mysql-que-restaura">
  <meta property="og:image" content="https://www.exemplo.com.br/img/og/backup-mysql.png">
  <meta property="og:site_name" content="DevBras">
  <meta name="twitter:card" content="summary_large_image">
</head>

Repare que as tags Open Graph usam o atributo property, não name. A charset e a viewport não têm nada a ver com busca, mas pertencem a todo cabeçalho: a primeira evita acento quebrado, a segunda faz a página se ajustar ao celular.

Quando alguém cola o link

WhatsApp, Facebook, LinkedIn, Telegram e outros leem as tags Open Graph para montar o cartão de prévia. Sem elas, cada serviço improvisa: pega o primeiro texto que encontra, às vezes o menu, e a primeira imagem, às vezes o logo minúsculo.

Três detalhes resolvem a maioria dos cartões feios. A og:image precisa de URL absoluta, com https e domínio, porque o robô não sabe resolver caminho relativo do seu jeito. A imagem precisa ter tamanho de verdade: 1200 por 630 pixels é a proporção mais usada para cartão grande e funciona bem nas principais redes. E o arquivo tem de estar acessível sem login e sem bloqueio no robots.txt.

Os robôs de prévia, em geral, não executam JavaScript. Se o seu site é uma aplicação de página única que injeta as tags depois de carregar, o robô vê o HTML vazio do template. A solução é renderizar as tags no servidor, seja com renderização no servidor do seu framework, seja com um template simples que preenche o cabeçalho antes de enviar.

Como conferir o que o servidor entrega

Não confie no inspetor do navegador, que mostra o HTML depois do JavaScript. Peça a página crua e filtre as tags:

curl -s https://www.exemplo.com.br/blog/backup-de-mysql-que-restaura \
  | grep -iE '<title|<meta name="description"|rel="canonical"|property="og:'

Se a saída vier vazia ou com os valores da home, o problema está no template. Os serviços também guardam a prévia em cache. Depois de corrigir, o Facebook tem uma ferramenta de depuração de compartilhamento que busca a página de novo. Em outros aplicativos, a prévia antiga pode demorar a sumir.

Erros comuns

• Title igual em todas as páginas, definido uma vez no layout. A busca mostra várias linhas idênticas e reescreve os títulos do jeito dela.
• Meta description repetida ou cheia de palavras-chave. O Google ignora e pega um trecho qualquer da página, muitas vezes o menu.
• og:image com caminho relativo ou imagem pequena. O cartão aparece sem imagem ou com um ícone borrado.
• Tags inseridas por JavaScript no cliente. Os robôs de prévia não executam o script e o link compartilhado sai sem título e sem imagem.
• Canônica copiada do layout apontando para a home. Todos os artigos passam a se declarar cópia da página inicial.
• Manter dezenas de meta tags sem função. Não prejudica a posição, mas esconde as que importam e atrapalha a manutenção.

Checklist

• Cada página tem um title único, com o assunto antes da marca.
• Cada página indexável tem uma meta description própria, escrita como convite.
• A canônica é absoluta e aponta para a própria página.
• As tags Open Graph usam property e a og:image tem URL absoluta.
• A imagem de compartilhamento tem tamanho adequado e abre sem login.
• O curl da página mostra as tags no HTML inicial.
• A meta keywords e as tags sem função foram removidas.

Busque o seu próprio domínio no Google e leia em voz alta os cinco primeiros resultados. Dá para saber, só pelo título e pelo trecho, do que trata cada página, ou todas parecem a mesma?