Documentação

Outros Heading Tags

Suggest Edits

Objetivo do Documento

Este documento orienta as agências implementadoras a utilizarem heading tags (<h1> até <h6>) de forma semântica e estruturada em projetos desenvolvidos na plataforma Wake.

O objetivo é assegurar que o conteúdo das páginas seja corretamente interpretado por mecanismos de busca, resultando em melhor ranqueamento, redução de ruído semântico e acessibilidade aprimorada para usuários de tecnologias assistivas.

Boas Práticas no Uso de Headings

As headings devem ser usadas exclusivamente para estruturar títulos e subtítulos que organizam o conteúdo de forma hierárquica e lógica

  • <h1> - Representa o título principal da página (único por página).
  • <h2> - Utilizado apenas para subtítulos diretos do <h1>, representando seções principais.
  • <h3> até <h6> - Devem ser usados para subseções, sempre respeitando a hierarquia.

🚧

Importante:

Elementos funcionais ou decorativos, como menus, preços, botões ou rótulos auxiliares, não devem utilizar headings. Esses elementos devem ser representados com outras tags adequadas (<p>, <span>, <nav>, etc.), aplicando estilos via CSS para preservar a aparência visual.


Recomendações de Implementação

Exemplo para preço de produto:

<p class="product-price">{{ product.price }}</p>

Exemplo para menu institucional:

<nav class="institutional-menu">
  <span class="menu-title">Menu Institucionais</span>
</nav>

Checklist de Implementação

  • Garantir que todos os <h2> sejam realmente subtítulos diretos do <h1>.
  • Evitar múltiplos <h1> na mesma página.
  • Utilizar headings apenas quando houver função de título de conteúdo.
  • Validar a hierarquia com ferramentas como Google Lighthouse, axe DevTools ou inspeção manual.

Benefícios

  • Estrutura semântica clara e coerente para buscadores e usuários.
  • Melhor interpretação de relevância das headings pelo Google.
  • Redução de ruídos que podem afetar o ranqueamento.
  • Maior acessibilidade para leitores de tela e tecnologias assistivas.

Fontes de Referência

Google Developer Documentation Style Guide – Headings

Updated 2 months ago