O que são heading tags e como usar H1, H2 e H3 nas páginas do seu site

Heading tags são as marcações do HTML que indicam títulos e subtítulos de uma página. Existem seis, de H1 a H6, e o número informa o nível: o H1 é o título principal, o H2 é uma seção dentro dele, o H3 é uma subdivisão do H2, e assim até o H6. Na prática, quase todo site resolve a vida com os três primeiros níveis.

Elas funcionam como o sumário de um livro. Quem bate o olho só nos títulos e subtítulos precisa conseguir dizer do que a página trata e em que ordem os assuntos aparecem. O Google faz essa mesma leitura ao rastrear o site, e o leitor de tela de uma pessoa cega também: ele permite pular de heading em heading para chegar ao trecho que interessa.

Um exemplo de hierarquia

Imagine a página de categoria de uma loja de material de construção que vende pisos. A estrutura de títulos poderia ficar assim:

• H1: Pisos e revestimentos
  • H2: Porcelanato
    • H3: Porcelanato polido
    • H3: Porcelanato acetinado
  • H2: Piso vinílico
    • H3: Vinílico em régua
    • H3: Vinílico em manta
  • H2: Como calcular a quantidade de piso para o seu cômodo

Lendo só essa lista, dá para saber o que a página vende e como ela está dividida. Esse é o teste. Se a lista de títulos de uma página sua não faz sentido sozinha, a hierarquia precisa de ajuste.

Em um post de blog a lógica é igual. O H1 é o título do artigo, cada H2 responde a uma parte da dúvida do leitor e o H3 entra quando uma dessas partes tem itens próprios, como os passos de um tutorial.

O que as heading tags fazem pelo SEO

O texto do H1 e dos H2 é um dos sinais que o Google usa para entender o assunto de uma página, ao lado do título da aba (a tag title), do corpo do texto e dos links que apontam para ela. Por isso faz sentido que a palavra-chave principal apareça no H1 e que os H2 tragam variações e assuntos relacionados. Um artigo sobre como calcular frete, por exemplo, pode ter H2 sobre frete por peso, frete por região e frete grátis.

O efeito tem limite. Heading bem montado não coloca um conteúdo fraco na primeira página, e encher subtítulo de palavra-chave repetida piora a leitura sem trazer ganho. O que a boa hierarquia entrega é clareza: o buscador entende a página com menos esforço, e o visitante que chega com pressa encontra a resposta rolando a tela. Um subtítulo escrito como a pergunta que a pessoa faria, seguido de um parágrafo que a responde, também facilita o aproveitamento do trecho em respostas destacadas da busca.

Como usar cada nível

H1

Use um por página, descrevendo o assunto dela. O Google já declarou que consegue lidar com páginas que têm mais de um H1, então isso não gera punição. Manter um só continua sendo a prática recomendada porque obriga a página a ter um tema definido. O H1 deve ser texto. Quando o H1 é a imagem do logotipo, situação comum em temas prontos, todas as páginas do site acabam com o mesmo título principal, e nenhuma delas diz ao buscador qual é o seu assunto.

H1 e tag title são coisas diferentes. A title aparece na aba do navegador e no resultado da busca; o H1 aparece dentro da página. Podem ter o mesmo texto ou textos parecidos, desde que os dois falem do mesmo assunto.

H2 e H3

Podem se repetir quantas vezes o conteúdo pedir. Cada H2 abre uma seção, e um H3 só existe dentro de um H2. Evite pular níveis, como sair de um H2 direto para um H4. O buscador não se perde com isso, mas quem navega com leitor de tela sim.

H4 a H6

Raramente são necessários. Se um texto chegou ao H5, o mais provável é que ele devesse ser dividido em duas páginas.

Erros que a gente mais encontra

Nas auditorias de sites que fazemos, os problemas de heading se repetem:

• Heading escolhido pelo tamanho da letra. A pessoa quer um texto grande e marca como H2, ou quer um subtítulo pequeno e usa H5. Tamanho e cor se resolvem no CSS. A tag indica o nível do título, e só isso.
• Elementos do layout marcados como heading. Títulos de rodapé, de barra lateral e de formulário ("Assine nossa newsletter", "Categorias") entram na estrutura da página como se fossem parte do conteúdo.
• Página sem H1. Acontece muito em home e em landing page montada em construtor visual, onde o título principal foi inserido como parágrafo em letra grande.
• Subtítulo genérico. "Saiba mais", "Vantagens" e "Dicas" não informam nada a quem lê só os títulos. "Vantagens do piso vinílico em apartamento" informa.

Como conferir as headings de uma página

Abra a página no navegador, clique com o botão direito e escolha a opção de exibir o código-fonte. Procure por <h1 com Ctrl+F: deve haver uma ocorrência, com o título que você espera. Repita para <h2 e <h3 e anote a sequência. Extensões de navegador voltadas a SEO fazem essa listagem de uma vez, e ferramentas de rastreamento mostram as headings do site inteiro em uma planilha.

Em WordPress e na maioria dos gerenciadores de conteúdo, o título do post já vira H1 automaticamente. Dentro do editor, portanto, comece pelos H2. Marcar um subtítulo como "Título 1" no meio do texto cria um segundo H1 sem que você perceba.

Comece a revisão pelas páginas que mais recebem visitas da busca, que você encontra no relatório de desempenho do Google Search Console. Corrigir a hierarquia delas costuma levar poucos minutos por página e, se o tema do site estiver gerando o problema (logotipo como H1, rodapé cheio de H2), um único ajuste no modelo resolve todas de uma vez. Para entender onde as headings se encaixam no conjunto da otimização, veja o nosso artigo sobre o que é SEO e por que aplicar no site.