Os cabeçalhos dão ao conteúdo da sua página uma estrutura clara e lógica. Eles não são apenas elementos visuais para deixar o texto maior. Os leitores de tela os usam para permitir que os usuários naveguem pelas seções, e os mecanismos de busca os utilizam para entender a hierarquia de tópicos do seu conteúdo. Uma estrutura de cabeçalhos quebrada confunde tanto humanos quanto máquinas, então acertar a hierarquia compensa em acessibilidade, SEO e legibilidade geral.
Como é uma hierarquia de cabeçalhos correta
Pense em seus cabeçalhos como um esboço ou sumário. Cada nível representa uma profundidade de aninhamento, e você nunca deve pular um nível ao descer. Veja como uma estrutura adequada se parece:
H1: Título da Página (apenas um por página)
H2: Primeira Seção Principal
H3: Subseção da Primeira Seção Principal
H3: Outra Subseção
H4: Detalhe dentro da Subseção
H2: Segunda Seção Principal
H3: Subseção da Segunda Seção Principal
H2: Terceira Seção PrincipalObserve como cada nível de cabeçalho está contido dentro do nível acima. Você não pularia de H2 diretamente para H4, assim como não criaria uma sub-subseção sem antes ter uma subseção. Voltar para cima é aceitável: depois de um H4, você pode voltar a um H2 para uma nova seção principal.
Erros comuns de cabeçalho no WordPress
A maioria dos problemas de hierarquia de cabeçalhos no WordPress vem de alguns padrões recorrentes:
- O tema usa tags erradas para o título da página: Alguns temas exibem o título do post ou da página como H2 em vez de H1, ou usam o nome do site como H1 em todas as páginas. Isso significa que o título real do conteúdo é rebaixado, e muitas páginas podem não ter um H1 adequado.
- Várias tags H1 em uma única página: Isso geralmente acontece quando o tema exibe o título do site como H1 no cabeçalho, e o título da página também é um H1. Toda página deve ter exatamente um H1. Em páginas internas, o nome do site deve ser um
<p>,<span>ou um<div>estilizado, não um H1. - Pular níveis de cabeçalho: Pular de H2 para H4 ou de H1 para H3 acontece quando os autores escolhem níveis de cabeçalho com base na aparência visual em vez do significado lógico. Se o H3 parece ter o tamanho certo, eles escolhem H3, mesmo que nenhum H2 exista acima.
- Usar cabeçalhos para estilo visual: Os autores às vezes usam um H2 ou H3 apenas porque querem texto em negrito e grande para uma chamada para ação ou um título de widget na barra lateral. Esses não são cabeçalhos reais de conteúdo e devem ser estilizados com classes CSS.
- Cabeçalhos de page builder e widgets: Page builders como Elementor e áreas de widget frequentemente inserem cabeçalhos em níveis inesperados. Um widget de barra lateral pode usar um H3 enquanto a área de conteúdo não tem H2, criando um nível pulado na hierarquia geral da página.
Como verificar sua hierarquia de cabeçalhos
Antes de corrigir qualquer coisa, você precisa ver como sua estrutura atual de cabeçalhos está. Aqui estão várias maneiras de fazer isso:
- InspectWP: Execute uma varredura e olhe a seção de conteúdo. O InspectWP exibe a hierarquia completa de cabeçalhos da sua página, facilitando a identificação de tags H1 ausentes, H1 duplicados, níveis pulados e outros problemas.
- Extensão de navegador HeadingsMap: Disponível para Chrome e Firefox, esta extensão mostra uma visualização em árvore de todos os cabeçalhos da página atual. Ela destaca erros estruturais como níveis pulados com ícones de aviso.
- Ferramenta de acessibilidade WAVE: A extensão de navegador WAVE (wave.webaim.org) avalia sua página em busca de problemas de acessibilidade, incluindo problemas de estrutura de cabeçalhos. Ela sobrepõe ícones diretamente na página onde os problemas são encontrados.
- Inspeção manual: Clique com o botão direito na página, selecione "Visualizar código-fonte da página" (Ctrl+U) e pesquise por
<h1,<h2,<h3e assim por diante. Isso mostra as tags de cabeçalho cruas no HTML.
Corrigindo cabeçalhos no editor de blocos Gutenberg
Se você usa o editor de blocos do WordPress (Gutenberg), corrigir os níveis de cabeçalho é direto:
- Clique em qualquer bloco Heading em seu conteúdo.
- Na barra de ferramentas do bloco no topo, você verá o nível atual do cabeçalho (por exemplo, "H3"). Clique nele para abrir um menu suspenso.
- Selecione o nível correto do cabeçalho no menu suspenso. Lembre-se: as seções do seu conteúdo devem começar com H2 (já que o H1 é reservado para o título da página), e as subseções devem usar H3.
- O editor de blocos agora inclui um recurso "Esboço do Documento". Clique no ícone de informação (círculo com "i") na barra de ferramentas superior para ver a estrutura de cabeçalhos do post inteiro. Ele avisa sobre níveis pulados.
Se você está usando o Editor Clássico, mude para a aba "Texto" para ver o HTML cru e alterar manualmente as tags de cabeçalho.
Corrigindo cabeçalhos em modelos de tema
Se seus problemas de cabeçalho vêm do tema, e não do conteúdo, você precisa editar os arquivos de modelo do tema. Sempre use um tema filho para que suas alterações sobrevivam às atualizações do tema.
Correções comuns incluem alterar a tag do título do site em páginas internas:
// No header.php do seu tema filho
<?php if (is_front_page()) : ?>
<h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>E garantindo que o título do post use H1 nos modelos single post/page:
// Em single.php ou content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>Em páginas de arquivo (categoria, tag, arquivos por data), o título do arquivo deve normalmente ser o H1, e os títulos individuais dos posts dentro do loop devem ser H2.
Estilizando cabeçalhos sem quebrar a hierarquia
Se você quer que um texto pareça um cabeçalho visualmente, mas não é um cabeçalho estrutural (por exemplo, um banner promocional ou um título de widget), use uma classe CSS em vez de uma tag de cabeçalho:
.heading-style {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem;
}Aplique essa classe a um elemento <p> ou <div>. Inversamente, se você quer que um cabeçalho real pareça menor ou diferente do padrão, estilize-o com CSS em vez de escolher um nível de cabeçalho menor pela aparência.
Impacto da hierarquia de cabeçalhos na acessibilidade (WCAG 1.3.1)
O Critério de Sucesso 1.3.1 das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) exige que informações, estrutura e relações transmitidas pela apresentação sejam programaticamente determináveis. Os cabeçalhos são uma forma primária de os usuários de leitores de tela navegarem em páginas web. De acordo com a pesquisa de usuários de leitores de tela do WebAIM, mais de 67% dos usuários de leitores de tela usam cabeçalhos como seu método principal para encontrar conteúdo em uma página. Quando você pula níveis de cabeçalho ou usa cabeçalhos para estilização visual, os usuários de leitores de tela não conseguem navegar de forma confiável pelo seu conteúdo. Corrigir sua hierarquia de cabeçalhos é uma das melhorias de acessibilidade mais simples e impactantes que você pode fazer.
Impacto da estrutura de cabeçalhos adequada no SEO
O Google confirmou que utiliza cabeçalhos para entender o conteúdo e a estrutura de uma página. Embora os cabeçalhos por si só não façam ou desfaçam suas classificações, eles fornecem sinais de contexto importantes. Um H2 que diz "Guia de Instalação" diz ao Google que a seção a seguir aborda a instalação. Cabeçalhos devidamente aninhados também ajudam o Google a gerar featured snippets e sitelinks. Pular níveis ou usar cabeçalhos de forma inconsistente envia sinais conflitantes sobre sua estrutura de conteúdo e pode impedir que os mecanismos de busca interpretem com precisão os tópicos da sua página.
Verifique a hierarquia de cabeçalhos com o InspectWP
Após fazer correções, execute uma nova varredura no InspectWP. A seção de conteúdo exibe cada cabeçalho da sua página em ordem, junto com seu nível. Você deve ver um único H1, seguido por H2 para seções principais, H3 para subseções, e nenhum nível pulado. Se identificar problemas restantes, volte ao editor ou ao modelo do tema e ajuste conforme necessário.