canonical e meta tags: o que o Google lê antes de ler o seu texto

tl;dr#

meta tags são o que o Google e as redes sociais leem antes de abrir a sua página: título, descrição, imagem. a canonical é uma delas, e diz qual é o endereço "oficial" de uma página quando o mesmo conteúdo aparece em mais de um lugar. eu aprendi isso fazendo: no CMS virou um diálogo com os campos de SEO e uma prévia ao vivo de como fica no Google, e no meu portfólio virou um helper que todas as páginas usam.

o problema que a canonical resolve#

o mesmo artigo pode ter mais de um endereço:

https://blog.exemplo.com/artigos/meu-post
https://blog.exemplo.com/artigos/meu-post?utm_source=instagram
https://blog.exemplo.com/artigos/titulo-antigo-do-post

pra você é a mesma página. pro Google são três, com o mesmo texto. ele não sabe qual mostrar e acaba dividindo a "força" entre elas. a canonical resolve isso com uma linha no <head>:

<link rel="canonical" href="https://blog.exemplo.com/artigos/meu-post" />

ou seja: "pode ter vários jeitos de chegar aqui, mas o endereço certo é esse".

as outras meta tags#

as que mais importam no dia a dia:

• <title>: o título azul no resultado do Google. não precisa ser igual ao título do artigo; às vezes um título mais curto e direto funciona melhor na busca.
• <meta name="description">: o textinho cinza embaixo do título. se você não escreve, o Google pega um pedaço qualquer da página.
• Open Graph (og:title, og:description, og:image): o que aparece quando alguém cola o link no WhatsApp, LinkedIn ou Discord.

no CMS: um diálogo pra isso#

antes, o editor de artigo só deixava mudar título, descrição e endereço numa gaveta pequena. os campos de SEO nem tinham tela. agora tem um diálogo "Avançado":

• na esquerda, os campos: resumo, título pro Google, descrição, palavras-chave, endereço, endereços antigos e URL canônica;
• na direita, uma prévia ao vivo de como o artigo aparece no Google, no link compartilhado e no card do blog.

a prévia foi o que fez eu entender de verdade. você digita a descrição e vê ela cortando no Google quando passa do tamanho. fica muito mais claro do que ler sobre isso.

os endereços antigos também têm a ver com canonical: quando você muda o endereço de um artigo, o antigo não pode simplesmente quebrar. ele continua levando pro novo, e a canonical aponta só pro novo.

no meu portfólio#

o site tem português e inglês, então cada página existe em dois endereços (/agora e /en/agora). aqui o cuidado é outro: não é conteúdo duplicado, é a mesma página em idiomas diferentes. então além da canonical, cada página diz quais são as versões em outros idiomas:

export function alternates(locale: Locale, path: string) {
  return {
    canonical: localePath(locale, path),
    languages: {
      "pt-BR": localePath("pt", path),
      en: localePath("en", path),
      "x-default": localePath("pt", path),
    },
  };
}

e cada página só chama isso no generateMetadata:

alternates: alternates(locale, "/agora"),

a página em português aponta a canonical pra ela mesma, a em inglês também, e as duas dizem "minha irmã em outro idioma tá ali". o x-default é pra quem não fala nenhum dos dois: cai no português.

o que eu levo disso#

SEO parecia um assunto de marketing, meio mágico. na prática é bem concreto: dizer pro Google qual endereço é o certo, o que mostrar no resultado e o que mostrar quando alguém compartilha. o resto é escrever um bom texto.