Etiquetas de título (H1-H6) e hierarquia

O que são tags de título?

As tags de título, de H1 a H6, são tags HTML que definem a hierarquia de conteúdo e a estrutura de seções de uma página. H1 representa o título de nível mais alto, H2 as seções principais, H3 as subseções e assim por diante. Embora essas tags apareçam visualmente em tamanho maior ou em negrito no navegador, seu objetivo principal não é visual, mas estrutural: assim como o índice de um livro, elas formam a estrutura lógica da página.

Essa hierarquia não é apenas uma organização visível ao olho humano, mas também uma estrutura em árvore que os navegadores e as tecnologias assistivas (como leitores de tela) “compreendem” programaticamente. Um usuário de leitor de tela geralmente navega pela página saltando de um título para outro; portanto, se a hierarquia for prejudicada, a navegação também será prejudicada.

Os níveis de título também tornam o conteúdo extenso de uma página escaneável: em vez de ler a página linha por linha, o usuário localiza a seção que procura ao dar uma olhada nos títulos. Isso pode influenciar positivamente tanto a experiência do usuário quanto o tempo gasto na página.

Por que isso é importante?

Uma hierarquia correta de títulos facilita que os mecanismos de busca compreendam a coesão temática da página e seus subtemas, além de permitir que usuários que utilizam leitores de tela naveguem pela página. O Google deduz, a partir da estrutura dos títulos, qual seção de uma página longa abrange qual subtema; isso pode ajudar na seleção do trecho correto, especialmente em resultados enriquecidos, como o “trecho em destaque” (featured snippet).

Uma hierarquia desorganizada ou incompleta leva à ambiguidade na estrutura do conteúdo e a problemas de acessibilidade. Por exemplo, pular diretamente de H2 para H4 pode confundir o usuário de leitor de tela, que pode se perguntar: “falta um nível intermediário aqui ou a seção acabou?”.

Em um caso extremo, em aplicativos de página única (single page application) ou em sistemas de modelos com múltiplos componentes, diferentes componentes podem renderizar seus próprios H1 de forma independente; isso pode levar, sem que se perceba, à existência de mais de um H1 na página. Nesse tipo de arquitetura técnica, é importante gerenciar os níveis de título a partir de um local centralizado.

Como corrigir isso?

• Deve haver apenas um H1 na página; esse geralmente é o título principal da página e deve resumir claramente o assunto da página.
• Use os títulos em ordem: H1 → H2 → H3, sem pular níveis.
• Use os títulos para definir a estrutura do conteúdo, e não apenas para fins visuais; se quiser texto em negrito ou maior, use CSS, mas não escolha um nível de título incorreto.
• Cada H2/H3 deve ser um título de seção real, não um texto decorativo ou slogan.
• Use as palavras-chave nos títulos de maneira natural; não force a inclusão de palavras-chave em todos os títulos.
• Em páginas longas, escreva os títulos de forma consistente e previsível, de modo a formar um índice (table of contents); isso ajuda tanto o usuário quanto os mecanismos de busca.
• Se você estiver usando um tema ou biblioteca de componentes, documente em um guia de estilo centralizado qual nível de título cada componente (cabeçalho, hero, cartão, rodapé) utiliza.
• Ao alterar o layout da página, verifique periodicamente, usando as ferramentas de desenvolvedor do navegador (árvore DOM), se a hierarquia dos títulos foi alterada.
• Em blogs ou sites de notícias, estabeleça um fluxo de trabalho de gerenciamento de conteúdo que mantenha o título do artigo (H1) separado do título editorial e do título de SEO; não vincule os dois.
• Em sites com vários autores, diferentes editores podem ter hábitos distintos; por isso, formalizar as regras da hierarquia de títulos em um guia de estilo aumenta a consistência.

Exemplo

<h1>Guia de SEO</h1>
<h2>SEO Técnico</h2>
<h3>Velocidade do Site</h3>
<h2>SEO de Conteúdo</h2>
<h3>Pesquisa de Palavras-chave</h3>

Exemplo ruim: usar <h1>Bem-vindo</h1> e, em seguida, pular direto para <h4>Nossos Produtos</h4> — os níveis H2 e H3 foram ignorados, a hierarquia foi quebrada.

Erros comuns

• Usar mais de um H1 na página (por exemplo, tanto na área do logotipo quanto no conteúdo).
• Não usar nenhum H1.
• Usar as tags de título apenas para obter uma fonte maior/em negrito, desconsiderando a hierarquia.
• Pular níveis, passando diretamente de H2 para H4.
• Quando o relatório do Seoraporu.co exibir um aviso de “mais de um H1” ou “falta de H1”, é necessário corrigir isso no nível do modelo/tema, pois geralmente se trata de um problema recorrente em todas as páginas.