Title duplicado: como dar a cada página um título único que a busca mostra

Dez abas abertas e todas dizem só "DevBras". Você não acha a que estava lendo, e na busca acontece a mesma coisa: três resultados do seu site, três linhas idênticas, e a pessoa escolhe no chute. A resposta curta: cada URL precisa de um <title> próprio, com o assunto da página na frente e a marca no fim, se couber. O title não é o nome do site. É o nome daquela página.

O problema quase nunca é preguiça de quem escreve. É o template. Alguém deixou o <title> fixo no layout, ou o framework usa o nome do projeto como padrão quando a página não define nada. Neste guia você vai descobrir quantas páginas repetem title, montar uma regra por tipo de página e verificar o resultado com um script.

Por que o title repetido custa clique

O title aparece em três lugares que importam: na aba do navegador, no histórico e favoritos, e como o link azul do resultado da busca. Nos três, ele é a única pista de qual página é qual. Se dez páginas dizem a mesma coisa, a pessoa perde a capacidade de escolher.

Para a busca, o efeito é parecido. A documentação do Google sobre title links diz que ele usa várias fontes para montar o link do resultado, e o <title> é a principal. Quando o title está vazio, repetido em muitas páginas, cheio de palavra-chave ou é só um texto padrão do site, o Google tende a ignorá-lo e montar outro a partir do h1, de textos de link ou do conteúdo. Ou seja: title ruim não some, ele é substituído por algo que você não escolheu.

Existe ainda um efeito menos visível. Páginas com o mesmo title e conteúdo parecido dão a impressão de serem a mesma coisa. Isso não é penalidade, mas atrapalha a busca a entender qual página responde a qual pergunta. Se esse for o seu caso, vale ler também como apontar a canonical para a URL certa.

Como descobrir quantas páginas repetem title

Não adianta olhar três páginas no navegador. O erro mora nas páginas que ninguém abre: categorias, tags, paginação, páginas antigas. Use o sitemap como lista e peça o HTML de cada URL.

// auditar-titles.mjs (Node 18 ou mais novo, que já tem fetch)
const SITEMAP = 'https://www.exemplo.com.br/sitemap.xml';

async function baixar(url) {
  const res = await fetch(url, { redirect: 'manual' });
  if (!res.ok) throw new Error(url + ' respondeu ' + res.status);
  return res.text();
}

const xml = await baixar(SITEMAP);
const urls = [...xml.matchAll(new RegExp('<loc>([^<]+)</loc>', 'g'))].map((m) => m[1].trim());
const porTitle = new Map();

for (const url of urls) {
  try {
    const html = await baixar(url);
    const m = html.match(new RegExp('<title[^>]*>([^<]*)</title>', 'i'));
    const title = m ? m[1].trim() : '(sem title)';
    if (!porTitle.has(title)) porTitle.set(title, []);
    porTitle.get(title).push(url);
  } catch (err) {
    console.error('falhou:', err.message);
  }
}

for (const [title, lista] of porTitle) {
  if (lista.length > 1 || title === '(sem title)') {
    console.log(lista.length + 'x  ' + title);
    for (const u of lista) console.log('    ' + u);
  }
}

Rode com node auditar-titles.mjs. O script usa redirect: 'manual' de propósito: URL do sitemap que redireciona aparece como falha, e isso também é um problema a corrigir. Se o seu sitemap for um índice que aponta para outros sitemaps, rode o script em cada arquivo filho.

No blog de exemplo, com 300 URLs, a saída foi esta:

41x  DevBras
12x  Categoria | DevBras
 6x  Programação | DevBras
 2x  (sem title)

Os 41 eram páginas de tag que nunca definiram title. As 12 eram categorias. As seis de "Programação" eram as páginas 2 a 7 da mesma categoria. Três causas, três correções no template, nenhuma no texto dos artigos.

Como montar o title certo para cada tipo de página

A regra é por tipo de página, não por página. Você define uma vez e o template aplica em todas.

1. Artigo: o título do artigo, que já foi escrito pensando no que a pessoa busca. Marca no fim, separada por um traço ou barra, só se couber.
2. Categoria e tag: o nome da categoria com um complemento que diga o que há ali ("Artigos de Programação"), nunca a palavra "Categoria" sozinha.
3. Paginação: o mesmo title da página 1 mais "página 2", "página 3". Sem isso, todas as páginas da lista ficam iguais.
4. Home: a marca mais a proposta do site. É a única página em que a marca vai na frente.
5. Páginas de sistema (busca, login, 404): title honesto ("Página não encontrada | DevBras"). Elas não precisam ranquear, mas precisam ser distinguíveis na aba.

Em código, a regra cabe numa função que o layout chama:

const MARCA = 'DevBras';
const LIMITE = 60;

function comMarca(base) {
  const completo = base + ' | ' + MARCA;
  return completo.length <= LIMITE ? completo : base;
}

function montarTitle(pagina) {
  switch (pagina.tipo) {
    case 'home':
      return MARCA + ': guias práticos de programação e servidores';
    case 'artigo':
      return comMarca(pagina.titulo);
    case 'categoria': {
      const sufixo = pagina.numero > 1 ? ', página ' + pagina.numero : '';
      return comMarca('Artigos de ' + pagina.nome + sufixo);
    }
    case 'erro404':
      return 'Página não encontrada | ' + MARCA;
    default:
      throw new Error('tipo de página sem regra de title: ' + pagina.tipo);
  }
}

Repare no default que lança erro. É ele que impede o próximo tipo de página de nascer com o title padrão. Melhor quebrar no desenvolvimento do que publicar 41 páginas chamadas "DevBras".

O limite de 60 caracteres é uma regra prática, não uma regra da busca. O Google corta o link pela largura disponível na tela, não por uma contagem fixa. Por isso o que importa é que o assunto venha primeiro: se o corte acontecer, ele come a marca, não o tema.

Como escrever o title de um artigo

Pense na frase que a pessoa digitaria e no resultado que ela quer. "Backup de MySQL que você consegue restaurar" diz o tema e a promessa. "Considerações sobre backup" não diz nenhum dos dois. Não empilhe sinônimos ("backup mysql, cópia mysql, dump mysql"): isso é exatamente o padrão que faz a busca reescrever o title.

O title e o h1 podem ter redações diferentes, mas precisam contar a mesma história. Se o title promete "como resolver o erro 403" e o h1 fala de "permissões no Linux", a pessoa clica e acha que caiu no lugar errado. O post um h1 por página e cabeçalhos em ordem trata desse alinhamento.

Erros comuns

• Title fixo no layout. Uma linha no template principal e o site inteiro tem o mesmo nome. A busca reescreve todos, e as abas ficam indistinguíveis.
• Marca na frente em toda página. "DevBras | Como configurar..." gasta o começo do link com o que a pessoa já sabe. No celular, o corte pode levar o assunto embora.
• Paginação sem número. Página 1 a 7 da categoria com o mesmo title parecem a mesma URL repetida no relatório de qualquer ferramenta.
• Title gerado no navegador. Em aplicação de página única, o title trocado só por JavaScript pode não estar no HTML que o servidor entrega. Quem compartilha o link e alguns robôs veem o padrão.
• Encher de palavra-chave. Lista de termos separados por vírgula é um dos casos que a documentação do Google cita como motivo para trocar o title.
• Title vazio em página de erro. A aba mostra a URL crua e a pessoa não percebe que caiu num 404.

Checklist

• O script de auditoria não mostra nenhum title com mais de uma URL.
• Nenhuma URL do sitemap aparece como "(sem title)".
• Cada tipo de página tem uma regra explícita, e tipo novo sem regra quebra o build ou o teste.
• Páginas de lista paginadas trazem o número da página no title.
• O assunto aparece antes da marca em todas as páginas, exceto a home.
• O title está no HTML que o servidor devolve, conferido com curl -s URL | grep -i "<title", não só no inspetor do navegador.
• Title e h1 de cada artigo tratam do mesmo assunto.

Para fechar: abra o seu site em dez abas, cada uma numa seção diferente. Só olhando a aba, você consegue dizer qual é qual?