Um h1 por página e cabeçalhos em ordem: a estrutura que leitor de tela entende

Uma pessoa cega abre o artigo da sua loja com o NVDA e aperta a tecla 1 para ir ao título principal. O leitor anuncia "Loja Modelo", que é o logo. Aperta de novo: "Frete grátis acima de R$ 200", que é o banner. Na terceira, finalmente, "Como escolher o tamanho do tênis". Três títulos principais, e só um deles é o assunto da página. A resposta curta: use um único h1 com o assunto da página, seções em h2, subseções em h3, sem pular nível. Escolha o cabeçalho pelo papel na estrutura e resolva o tamanho no CSS. O h1 e o title não precisam ser idênticos, mas precisam contar a mesma história.

Se a lista de cabeçalhos da página, lida em ordem, parece o sumário de um livro, a estrutura está certa.

Por que a hierarquia de cabeçalhos importa

Quem enxerga a tela percebe a estrutura pelo tamanho e pela posição do texto. Quem usa leitor de tela percebe pelos elementos h1 a h6. Os leitores de tela oferecem navegação por cabeçalho: no NVDA e no JAWS, a tecla H pula para o próximo cabeçalho e as teclas de 1 a 6 pulam por nível; no VoiceOver, o rotor lista todos eles. Para muita gente, essa lista é o jeito principal de entender e percorrer a página.

Quando o logo, o banner e o título do artigo são todos h1, essa lista perde o topo. Quando o template pula de h2 para h4 porque o h4 tinha o tamanho certo, a lista sugere uma subseção que não existe. A estrutura passa a descrever a fonte, não o conteúdo.

Houve uma época em que a especificação do HTML descrevia um "algoritmo de outline", segundo o qual cada section poderia ter o seu próprio h1 e o navegador calcularia os níveis. Nenhum navegador nem leitor de tela implementou isso, e a descrição foi retirada da especificação. Na prática, um h1 dentro de section continua sendo anunciado como nível 1.

E a busca?

O Google já disse publicamente que ter mais de um h1 não é penalidade e que ele consegue entender páginas com estruturas variadas. Então o motivo principal não é ranqueamento. É que uma estrutura clara ajuda qualquer leitor, humano ou máquina, a saber do que a página trata. O que tem peso direto na busca é o title, assunto de cada página com um title único, e as metatags vistas em meta tags que o Google lê.

Como arrumar a estrutura do template

1. Liste os cabeçalhos atuais de três tipos de página: inicial, listagem e artigo.
2. Tire o h1 do logo. O logo vira um link com imagem e texto alternativo; ele se repete em todas as páginas e não é o assunto de nenhuma.
3. Rebaixe os banners e chamadas para parágrafo ou, se forem mesmo uma seção, para h2.
4. Dê o h1 ao assunto da página: o título do artigo, o nome do produto, o nome da categoria.
5. Numere as seções sem pular: h2 para cada seção, h3 dentro de um h2.
6. Crie estilos independentes do elemento no CSS, para que um h2 possa ter o tamanho que o design pedir.
7. Compare o h1 com o title e ajuste se um contradiz o outro.

Como listar os cabeçalhos em segundos

Cole isto no console do navegador, em qualquer página do site:

document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => {
  const nivel = Number(h.tagName.slice(1));
  console.log('  '.repeat(nivel - 1) + h.tagName + ' ' + h.textContent.trim());
});

A saída sai indentada pelo nível. Na página de artigo da loja, antes da correção, ela mostrava isto:

H1 Loja Modelo
H1 Frete grátis acima de R$ 200
H1 Como escolher o tamanho do tênis
      H4 Meça o pé no fim do dia
      H4 Compare com a tabela da marca
   H3 Newsletter
   H3 Categorias

Três h1, seções do artigo em h4 porque o designer queria texto menor, e o rodapé em h3 como se fosse parte do artigo. Extensões de acessibilidade e o painel de acessibilidade das ferramentas de desenvolvedor mostram a mesma coisa, mas o script resolve sem instalar nada.

O HTML corrigido

<header>
  <a href="/"><img src="/logo.svg" alt="Loja Modelo, página inicial" width="160" height="40"></a>
  <p class="faixa">Frete grátis acima de R$ 200</p>
</header>
<main>
  <article>
    <h1>Como escolher o tamanho do tênis</h1>
    <h2 class="titulo-pequeno">Meça o pé no fim do dia</h2>
    <h2 class="titulo-pequeno">Compare com a tabela da marca</h2>
  </article>
</main>
<footer>
  <h2>Newsletter</h2>
  <h2>Categorias</h2>
</footer>

E o CSS que separa o visual do nível:

.titulo-pequeno {
  font-size: 1.125rem;
  font-weight: 600;
}

Agora a lista tem um topo e duas seções do artigo no mesmo nível. Os títulos do rodapé ficam em h2 porque são seções da página, não do artigo; outra opção comum é não usar cabeçalho no rodapé quando ele é só uma lista de links.

O h1 e o title contam a mesma história

O title aparece na aba do navegador e, muitas vezes, no resultado de busca. O h1 aparece na página. Eles têm públicos e espaços diferentes, então podem diferir. É comum o title trazer o nome do site no fim e ser mais curto:

<title>Tamanho do tênis: como medir o pé | Loja Modelo</title>
<h1>Como escolher o tamanho do tênis</h1>

O que não pode é a pessoa clicar num resultado que promete "tabela de medidas" e cair numa página cujo h1 fala de promoção. A regra prática: se você trocar um pelo outro, a página ainda faz sentido? Se sim, estão alinhados.

Erros comuns

• Logo em h1 no template inteiro. Toda página passa a ter como assunto principal o nome do site, e a navegação por nível 1 nunca chega direto ao conteúdo.
• Escolher o nível pelo tamanho da fonte. A estrutura passa a refletir o design de cada componente e pula níveis sem sentido.
• Página sem nenhum h1. O título do artigo vira um div estilizado e quem navega por cabeçalho não acha o começo do conteúdo.
• Usar cabeçalho para destacar frase solta. Um "Aproveite!" em h2 vira uma seção vazia na lista de cabeçalhos.
• Confiar em section para reiniciar os níveis. Os leitores de tela não recalculam; cada h1 é anunciado como nível 1.
• h1 e title sobre assuntos diferentes. A pessoa que veio da busca sente que caiu na página errada e volta.

Checklist

• Cada tipo de página tem exatamente um h1, com o assunto dela.
• O logo é link com imagem e texto alternativo, não cabeçalho.
• Nenhum nível é pulado entre um cabeçalho e o seguinte dentro do conteúdo.
• Os tamanhos de título vêm de classes no CSS, não da escolha do elemento.
• Faixas, banners e chamadas promocionais não usam elementos de cabeçalho.
• O h1 e o title de cada página falam do mesmo assunto.
• Alguém já navegou pela página com leitor de tela usando só a tecla H.

Rode o script de cabeçalhos na página mais visitada do seu site: a saída parece o sumário daquela página, ou parece a lista de componentes do seu design system?