Heading tags, h1, h2, h3 – estrutura ideal para SEO

Heading Tags para SEOVamos conversar aqui sobre qual é a importância de um bom CSS relacionado com um HTML bem feito.

Hoje em dia sabemos que, o que importa na web é ser encontrado pelos mecanismos de pesquisas, até ai convenhamos que um grande bloco de texto consegue isso muito melhor do que qualquer layout. Falando pelo ponto de vista do robô de qualquer motor de busca.

Agora quando se tem um belo design, tudo alinhado, que o cliente ou até mesmo você, gosta de como foi feito, temos que chegar a um meio termo de como fazer para que os dois pontos sejam atingidos, a beleza que vocês querem e o desempenho para o texto ser encontrado.

Então vamos ao ponto número 1 que é uma regra de jornalismo, que por incrível que pareça é muito aplicada erradamente, ou até mesmo sem saber como se fazer.

Título de uma página principal, qual heading tag devemos utilizar? h1? h2? h3?

Como decidir qual delas é o melhor caminho?

h1 é um título em sua página que tem peso único, essa heading tag não pode ser repetida e ela é prioritária, ela tem tanto peso que pode e deve ser utilizada como texto para ficar na chamada da url! Então tenhamos em mente não utilizar mais de um h1 por página.

Lembremos que, não se deve, nunca em tempo algum, colocar o h1 como nome da empresa ou logo. Aliás, o Google recomenda usar uma marcação semântica do schema.org para logos.

h2 é normalmente utilizado nas chamadas das páginas, subsequentes relacionadas ao h1, ou seja, poderia ser considerado o headline do h1 se assim você quiser, pois ele tem um peso forte e a parte descritiva de um título, muitos desenvolvedores, costumam utilizar no headline o h4, que ao meu ver para a leitura correta de um motor de busca, não será feita da mesma maneira, pois o h2 tem muito mais peso que um h4.

Vimos que h1 deve ser o título e h2, o subtítulo (headline). E para que serve as heading tags h3, h4 e h5 então?

h3 esse sim, pode e deve se repetir para todos os links de chamadas internas dentro de seu site se assim for interessante para você.

Por exemplo: Tenho um blog no qual a pessoa clica em uma categoria e aparecem 10 notícias sobre a categoria, essas 10 notícias devem ter seu principal titulo como h3 e o h4 como seu subtítulo (headline), fazendo assim o mesmo papel que o h1 e h2 para temas principais. O h5 existe, mas quase não é utilizado em um geral, deve-se utilizar ele para sublinks prioritários, se você quiser dar prioridade em algum link interno onde todos as outras heading tags já estejam identificadas.

E claro, que tudo que é texto, ou vai ser utilizado de texto, deve sempre vir demarcado com uma tag p, nada de colocar solto dentro de uma tag div ou span sempre colocar ele dentro de uma tag p para que assim ele tenha sua indexação e leitura de uma forma melhor.

Agora tendo em vista tudo isso que eu já passei, agora é fazer o seu CSS para ficar da maneira mais bela possível, lembrando sempre que as Heading Tags têm margens pré definidas assim como o tamanho de letra, que é muito importante na parte impressa, não necessariamente significa alguma coisa para a web, leitores de busca, não verificam se você tem uma letra em 1em 2em ou 3em, o que importa para eles é a marcação. Mas como manda o figurino e o bom design, favor nunca fazer o h3 ser maior que o h1, mas ele pode sim ser maior que o h2.

Então em uma página simples como devo proceder?

Se você for utilizar um sistema de postagem, estilo WordPress, ou outro, faça sempre que o título do post seja h1 e o subtítulo h2. E ai dentro do post aquelas chamas que você faz, ou listagem de assuntos que você vai falar utilize um h3.

E por aqui fico com essa dica para você.

Até a próxima!

  • Marcelo Azeredo

    Boa tarde, obrigado por compartilhar o conteúdo.
    Quanto ao H3, por que não pode ser maior que H1? Já vi situações onde h1 é titulo, h2 é subtitulo e h3 é o post. Isso está incorreto?