Estrutura de cabeçalhos HTML H1–H6: guia completo para SEO

O HTML oferece seis níveis de cabeçalho — de <h1> a <h6>. A maioria dos autores sabe que o H1 importa para o SEO. Mas poucos entendem o papel do H2, do H3 e dos níveis mais profundos, como eles interagem com os rastreadores de busca e por que uma hierarquia quebrada prejudica tanto o SEO quanto o usuário.

Para o rastreador do Google, as tags de cabeçalho funcionam como o sumário do documento. O robô as usa para identificar o tema da página, reconhecer os subtemas e decidir o quanto o documento é relevante para uma consulta. Um nível que falta, um H1 extra ou um cabeçalho usado só por estética destroem esse mapa.

zoom_in

O que são as tags de cabeçalho H1–H6

H1–H6 são elementos HTML semânticos que marcam cabeçalhos em seis níveis de importância. O H1 é o cabeçalho principal da página; o H6 é o subtítulo mais profundo. Cada nível envia ao rastreador um sinal: “o conteúdo dentro desta seção trata deste tema”.

Ao contrário da formatação visual (<b>, <big>, classes CSS), as tags de cabeçalho carregam significado. Os navegadores exibem o H1 em negrito e em tamanho grande por padrão, mas o tamanho é só um efeito colateral. Dá para deixar o H6 visualmente maior que o H1 com CSS, mas isso não muda a semântica: para buscadores e leitores de tela, o H1 continua sendo o cabeçalho principal.

Hierarquia: H1, H2, H3 e níveis mais profundos

Uma hierarquia correta de cabeçalhos funciona como o sumário de um livro: um título (H1), vários capítulos (H2), seções dentro dos capítulos (H3) e os detalhes abaixo delas (H4 em diante). Quebrar essa estrutura é como arrancar capítulos de um livro e embaralhar as páginas.

zoom_in

<!-- Correct hierarchy -->
<h1>Guide to Welders' Protective Clothing</h1>

  <h2>Types of protective clothing</h2>
    <h3>Fire-resistant suits</h3>
    <h3>Protective masks</h3>

  <h2>Regulatory standards</h2>
    <h3>EN ISO 11612</h3>
    <h3>ANSI/ISEA standards</h3>

  <h2>How to choose</h2>

<!-- Wrong hierarchy (skipped levels) -->
<h1>Guide to protective clothing</h1>
  <h3>Fire-resistant suits</h3>  <!-- H2 skipped! -->
    <h5>Standards</h5>           <!-- H4 skipped! -->

Quando H4–H6 são necessários

H4, H5 e H6 são usados raramente — só em documentos técnicos extensos que exigem um quarto nível de aninhamento ou mais. Exemplos: contratos jurídicos, documentação de API, protocolos médicos. Para artigos de blog e landing pages, três níveis (H1–H3) dão conta de tudo.

Como os cabeçalhos afetam o SEO

Cada tag de cabeçalho é um sinal de relevância. Quanto maior o nível, mais forte o sinal: o H1 pesa mais que o H2, e o H2 pesa mais que o H3. Mas todos participam da avaliação de quão bem o documento combina com uma consulta de busca.

O Google usa cabeçalhos para gerar featured snippets. Quando o usuário faz uma pergunta, o algoritmo procura páginas em que um H2 ou H3 corresponde de perto à consulta e o bloco seguinte dá uma resposta direta. H2 bem escritos são candidatos gratuitos à posição zero.

Os cabeçalhos também alimentam a linkagem interna: um texto âncora igual ao H2 da página de destino reforça a relevância. E os sitemaps: alguns CMSs adicionam automaticamente atributos id aos cabeçalhos, criando URLs âncora que podem ser referenciadas diretamente nos sitemaps XML para seções profundas da página.

Acessibilidade e leitores de tela

Leitores de tela — softwares assistivos para usuários com deficiência visual — usam as tags de cabeçalho como principal mecanismo de navegação na página. O usuário pressiona H para pular entre os cabeçalhos e ouve o sumário da página. Uma hierarquia quebrada torna essa navegação inútil.

Pela norma WCAG 2.1 (critério 1.3.1 “Informação e relações”), os cabeçalhos devem ser implementados com tags HTML semânticas, e não com estilos. Um botão com font-size: 24px; font-weight: bold não é um cabeçalho para o leitor de tela. <h2> é. A diferença é enorme.

Regras para usar cabeçalhos

Cinco regras que cobrem 95% das situações reais.

Erros comuns na estrutura de cabeçalhos

Esses erros aparecem em auditorias da maioria dos sites — de blogs pequenos a grandes plataformas corporativas.

• Vários H1 na página. Quase sempre causados por construtores visuais que envolvem qualquer bloco grande em H1. Encontre com Screaming Frog → H1 → Multiple. Correção: mantenha um H1 e troque os demais por H2 ou por <div> com estilo.
• Cabeçalhos usados para estilo, não para semântica. Um designer escolheu H4 porque “fica no tamanho certo”, pulando H2 e H3. O rastreador vê H1 → H4 → H1 → H4 — caos em vez de estrutura.
• H1 ausente. Depois de um redesign ou de uma migração de CMS, o H1 some do template. Uma página sem H1 perde seu principal sinal de relevância on-page.
• H1 = nome do site em todas as páginas. Um template de CMS insere o nome da empresa no H1 em todo o site. Todas as páginas recebem o mesmo H1 — duplicações no site inteiro, zero relevância.
• Níveis pulados ao aninhar. H1 → H3 (H2 ausente), H2 → H4 (H3 ausente). O leitor de tela reporta um erro; o rastreador perde o contexto da subseção.
• Uso de <p> ou <div> no lugar de tags de cabeçalho. O texto parece um cabeçalho visualmente, mas não é reconhecido como tal pelos buscadores nem pelos leitores de tela. Comum em templates antigos.
• Cabeçalhos longos demais. Um H2 com três frases não é um cabeçalho — é um parágrafo. O cabeçalho deve ser lido de uma vez: o ideal são de 4 a 12 palavras.

<!-- BAD: typical template with errors -->
<div class="title">Workwear catalogue</div>    <!-- not H1! -->
<h1>Acme Workwear Ltd</h1>                     <!-- H1 = company name -->
<h1>Winter workwear</h1>                       <!-- second H1 -->
<h3>Fire-resistant suits</h3>                  <!-- H2 skipped -->

<!-- GOOD: correct structure -->
<h1>Winter welders' workwear catalogue</h1>
  <h2>Fire-resistant suits</h2>
    <h3>Suits to EN ISO 11612</h3>
    <h3>Suits to ANSI Z49.1</h3>
  <h2>Protective masks and shields</h2>

Ferramentas para auditar a estrutura de cabeçalhos

// Quick heading hierarchy check in the browser console
const headings = $$('h1,h2,h3,h4,h5,h6');
const report = headings.map(h => ({
  tag: h.tagName,
  text: h.textContent.trim().slice(0, 60)
}));
console.table(report);

// How many H1s are on the page?
const h1Count = $$('h1').length;
console.log(`H1 count: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ERROR');

Checklist da estrutura de cabeçalhos

H1

• Exatamente um H1 em cada página do site
• O H1 contém a consulta principal da página
• O H1 combina em significado com a tag title (a redação pode ser diferente)
• O H1 é único no site inteiro — não duplicado pelo template
• O H1 não está vazio, não contém apenas uma imagem e não está oculto por CSS

H2

• O H2 vem logo depois do H1, sem pular níveis
• Cada H2 descreve uma seção grande e distinta da página
• Os H2 contêm consultas secundárias e termos LSI (de forma natural, sem excesso)
• A redação do H2 pode servir de âncora para um featured snippet
• Nenhum H2 existe só por efeito visual — apenas onde começa uma nova seção temática

H3–H6

• O H3 fica dentro do H2, e o H4 dentro do H3 (sem pular níveis para baixo)
• H4–H6 são usados apenas quando um aninhamento profundo é realmente necessário
• Nenhuma tag H3–H6 é usada no lugar de um H2 só por causa do tamanho visual
• A estrutura geral se lê como um sumário lógico ao escanear a página

Acessibilidade

• A ordem dos cabeçalhos foi verificada com a extensão HeadingsMap ou WAVE
• Todos os cabeçalhos estão implementados com tags HTML semânticas, não com divs estilizadas
• Não há cabeçalhos ocultos (display: none, visibility: hidden)
• Cada cabeçalho tem conteúdo com sentido — nenhum vazio ou de espaço reservado

FAQ

Respostas para as dúvidas mais comuns sobre estrutura de cabeçalhos que surgem em auditorias e em workshops com equipes de conteúdo.