Como usar h1, h2, h3, h4, h5 ou h6 nos títulos do site

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Se você tem um site e se preocupa com SEO, acessibilidade e experiência do usuário, a criação de bons títulos é fundamental. E como esses títulos são colocados no HTML da página é fator importante para o sucesso com buscadores e usuários reais.

As tags HTML que usamos para criar títulos em páginas web são: h1, h2, h3, h4, h5 e h6. O significado dessas tags é o mesmo, que é definir títulos, mas o nível de importância é diferente para cada uma, onde h1 tem o nível mais alto e h6 o mais baixo.

▶ Se preferir, acesse "Como usar h1, h2, h3, h4, h5 ou h6 nos títulos do site" no YouTube.

O código HTML a seguir representa um título h1 de importância mais alta:

<h1>Título da página</h1>

Para verificar quais tags HTML estão sendo usadas no seu site para criar títulos, clique com o botão direito sobre o texto, depois em "Inspecionar". Será aberto o DevTools do navegador com a estrutura de elementos.

Como colocar as tags de título corretamente

A montagem HTML dos títulos afeta diretamente o SEO da página web e acessibilidade. Por exemplo, o Google utiliza a tag h1 para detectar o título principal. Já os leitores de tela, utilizados por pessoas com necessidades especiais, segue a importância de cada elemento e sequência.

Siga as dicas a seguir para colocar o HTML dos títulos pensando em SEO e acessibilidade:

• Use apenas uma tag h1 por página, mesmo sendo permitido mais de um.
• Não pule os níveis de títulos. Use h1 depois h2
• Não use tags de título para palavras sem essa importância
• Em tags section utilize título h2 ou menor

E por fim, depois da utilização correta das tags h1 até h6 seguindo seus significados, você pode testar a acessibilidade do seu site com alguma das diversas ferramentas online ou extensões para navegador. O WAVE é uma opção que oferece diversas ferramentas para esse objetivo.