As tags de cabeçalho HTML, de <h1> a <h6>, definem os títulos e subtítulos do seu conteúdo. Elas criam um esboço hierárquico do documento que informa aos navegadores, mecanismos de busca e tecnologias assistivas como sua página está estruturada. Pense nelas como títulos de capítulos e títulos de seções em um livro: o H1 é o título do livro, os H2 são os títulos dos capítulos, os H3 são as seções dentro dos capítulos, e assim por diante.
Entendendo a hierarquia de cabeçalhos
Cada nível de cabeçalho representa uma profundidade diferente na estrutura da página:
<h1>: O cabeçalho principal da página. Descreve do que se trata toda a página. A melhor prática é usar exatamente um H1 por página. Em um post de blog, normalmente é o título do post. Em uma página inicial, pode ser a principal proposta de valor.<h2>: Cabeçalhos de seções principais. Eles dividem seu conteúdo em suas seções primárias. Em um artigo longo, cada H2 introduz um novo tópico ou ponto principal.<h3>: Subseções dentro de uma seção H2. Se a sua seção H2 cobre "Cabeçalhos de Segurança" e você quer dividi-la em partes, cada parte recebe um H3.<h4>a<h6>: Níveis de aninhamento mais profundos. A maioria dos conteúdos raramente precisa de algo além do H4. Usar H5 ou H6 geralmente sinaliza que o conteúdo poderia ser reestruturado em páginas ou seções separadas.
Por que a hierarquia de cabeçalhos importa para o SEO
Os mecanismos de busca utilizam cabeçalhos para entender o tópico e a estrutura do seu conteúdo. O Google confirmou que os cabeçalhos ajudam seus rastreadores a compreenderem do que trata cada seção de uma página. Embora os cabeçalhos sozinhos não sejam um fator massivo de classificação, eles contribuem para o SEO geral da página de várias maneiras:
- Sinais de tópico: Palavras-chave em cabeçalhos têm mais peso do que palavras-chave no corpo do texto. Um H2 que diz "Como proteger seu login do WordPress" diz ao Google que essa seção é especificamente sobre segurança de login.
- Featured snippets: O Google frequentemente extrai conteúdo de seções com cabeçalhos claros para resultados de featured snippets. Uma página bem estruturada, com cabeçalhos descritivos, tem maior chance de aparecer nessas posições de destaque.
- Compreensão da estrutura da página: Uma hierarquia lógica de cabeçalhos ajuda o Google a entender a relação entre as seções. Se o seu H2 é "Otimização de Desempenho" e seus H3 são "Compressão de Imagens" e "Cache", o Google entende que esses são subtópicos de desempenho.
- Classificação de passagens: O Google pode classificar passagens individuais de uma página. Cabeçalhos claros ajudam o Google a identificar onde uma passagem termina e outra começa.
Acessibilidade e navegação por leitores de tela
Para usuários que dependem de leitores de tela (como JAWS, NVDA ou VoiceOver), os cabeçalhos são uma das principais ferramentas de navegação. Usuários de leitores de tela frequentemente pressionam uma tecla de atalho (geralmente "H") para pular de cabeçalho em cabeçalho, percorrendo a estrutura da página da mesma forma que um usuário visual a examina visualmente. Se seus cabeçalhos estiverem ausentes, fora de ordem ou usados para estilização visual em vez de estrutura, os usuários de leitores de tela perdem essa capacidade de navegar com eficiência. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) abordam especificamente a estrutura de cabeçalhos. O Critério de Sucesso 1.3.1 exige que as informações e relações transmitidas pela apresentação sejam programaticamente determináveis. Na prática, isso significa que seus níveis de cabeçalho devem refletir a hierarquia real do conteúdo, não apenas parecer bonitos.
Erros comuns de cabeçalho no WordPress
Sites WordPress são particularmente propensos a problemas de cabeçalho porque a estrutura de cabeçalhos é dividida entre o tema e o editor de conteúdo:
- Várias tags H1: Esse é o problema mais comum. Alguns temas exibem o título do site como H1 no cabeçalho e também envolvem o título da página/post em um H1. Isso dá à página dois cabeçalhos principais concorrentes. Embora o Google tenha dito que vários H1 são "aceitáveis" em termos de não serem uma penalidade, um único H1 que indica claramente o tópico da página ainda é a abordagem mais limpa.
- Pular níveis de cabeçalho: Pular de H2 diretamente para H4, ignorando o H3 por completo. Isso quebra o esboço lógico. Os leitores de tela anunciam os níveis dos cabeçalhos, então um usuário ouvindo "Cabeçalho de nível 2" seguido por "Cabeçalho de nível 4" se perguntará o que aconteceu com o nível 3.
- Usar cabeçalhos para estilização: Escolher um H3 em vez de um H2 porque o tamanho da fonte do H3 fica melhor no tema. Isso é um uso indevido dos cabeçalhos. A abordagem correta é usar o nível de cabeçalho certo para a estrutura e depois ajustar o CSS para obter a aparência visual desejada.
- Nenhum H1: Alguns temas ou layouts de page builders omitem acidentalmente o H1, ou o H1 é definido como o título do site no cabeçalho enquanto o conteúdo real da página começa em H2. Toda página deve ter exatamente um H1 que descreva seu tópico principal.
- Cabeçalhos dentro de widgets e barras laterais: Os widgets do WordPress frequentemente exibem cabeçalhos H2 ou H3 para os títulos dos widgets. Esses cabeçalhos não fazem parte da hierarquia principal do conteúdo e podem confundir o esboço do documento. Alguns temas lidam com isso usando atributos
aria-, mas muitos não. - Tags de cabeçalho vazias: Às vezes, temas ou page builders deixam tags de cabeçalho vazias na marcação (um
<h2>sem texto). Elas são invisíveis para usuários visuais, mas confundem leitores de tela.
Como o WordPress lida com cabeçalhos
Em uma configuração típica do WordPress, a estrutura de cabeçalhos funciona assim: o tema gera o H1, geralmente a partir do título do post ou da página. O conteúdo que você escreve no editor deve começar com cabeçalhos H2 para seções principais e usar H3 e abaixo para subseções. Você quase nunca deve digitar um H1 dentro do editor de conteúdo, porque o tema já exibe um. Se você está usando um page builder ou uma página de destino personalizada onde o tema não exibe um H1, então você precisa adicionar um. Antes de publicar qualquer página, vale a pena verificar se o tema exibe um H1 automaticamente, para evitar duplicatas.
Cabeçalhos no editor de blocos Gutenberg
O Gutenberg facilita a inserção e o gerenciamento de cabeçalhos. O bloco Heading permite escolher o nível (H2 a H6, e H1 se necessário) em um menu suspenso. O Gutenberg também inclui um recurso "Esboço do Documento" na barra lateral do editor, que mostra a estrutura completa de cabeçalhos do seu post de relance. Se você pular um nível de cabeçalho, a visualização do esboço sinalizará com um aviso. Essa é uma ferramenta integrada útil que muitos usuários do WordPress ignoram. Tenha o hábito de verificar o esboço do documento antes de clicar em Publicar.
Ferramentas para verificar e visualizar a estrutura de cabeçalhos
Além do esboço integrado do Gutenberg, há várias maneiras de auditar sua estrutura de cabeçalhos:
- Extensões do navegador: A extensão "HeadingsMap" (disponível para Chrome e Firefox) mostra a hierarquia de cabeçalhos de qualquer página como uma árvore recolhível. A ferramenta de acessibilidade "WAVE" também destaca problemas de cabeçalhos.
- Plugins de SEO: Yoast SEO e Rank Math verificam a estrutura de cabeçalhos como parte de sua análise de conteúdo. Eles avisarão sobre H1 ausentes ou uso inadequado de cabeçalhos.
- Validadores online: O W3C Markup Validation Service verifica seu HTML em busca de problemas estruturais, incluindo problemas de ordem de cabeçalhos.
- InspectWP: O InspectWP varre sua página e lista todos os cabeçalhos em ordem, facilitando a visualização da hierarquia completa de relance.
Melhores práticas para cabeçalhos no WordPress
- Um H1 por página: Deixe que o tema cuide do H1 a partir do título do post/página. Não adicione outro no conteúdo.
- Comece o conteúdo em H2: Seu primeiro cabeçalho dentro do editor deve ser H2, não H1.
- Não pule níveis: Vá H2, depois H3, depois H4. Nunca pule de H2 para H4.
- Use cabeçalhos para estrutura, não para estilo: Se quiser texto menor ou maior, use classes CSS em vez de alterar o nível do cabeçalho.
- Mantenha os cabeçalhos descritivos: "Segurança" é menos útil do que "Melhores práticas de segurança no WordPress" tanto para leitores quanto para mecanismos de busca.
- Verifique o esboço do documento: Use o esboço integrado do Gutenberg ou uma extensão do navegador antes de publicar.
O que o InspectWP verifica
O InspectWP analisa a estrutura de cabeçalhos da sua página WordPress e lista todos os cabeçalhos em ordem, de H1 a H6. Ele detecta tags H1 ausentes, várias tags H1, níveis de cabeçalho pulados e cabeçalhos vazios. Isso oferece uma visão clara do esboço do documento da sua página e ajuda a corrigir problemas estruturais que afetam tanto o SEO quanto a acessibilidade.