Desenvolvimento HTML

Quando usar h1 no HTML (SEO, HTML semântico)

2 de março de 2020

Quando usar h1 no HTML (SEO, HTML semântico)

Neste artigo você vai aprender de uma vez por todas quando usar h1, o heading principal das páginas web!

quando usar h1 capa

Fala programador, beleza? Bora aprender coisa nova!

Bom, então vamos lá: o tema deste artigo é muito teórico, pois há um grande propósito por trás dos headings, além de quando usar o h1

O que não faz diferença

Se você utiliza os headings apenas por causa do tamanho da fonte, saiba que isso não importa na verdade

Você pode fazer a alteração da fonte de qualquer elemento pelo CSS com a propriedade font-size

Dica: Toda e qualquer alteração de estilo nas tags do HTML, devem ser guiadas pelo CSS

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

O que faz a diferença

O Google utiliza os headings para ler e entender a página, então temos a entrada de um termo bem falado no mundo da programação web: SEO e de outro que vem de brinde: HTML semântico

SEO: vem de Search Engine Optimization, ou seja, um ‘score’ que melhora a posição da sua página no Google;

HTML semântico: utilizar as tags de acordo com o propósito que elas foram criadas;

Dito isso, utilizamos a tag h1 para definir o conteúdo principal apresentado da página, como um título principal e uma só vez por página (essa é uma recomendação, não uma regra)

Claro que não há um limite, porém deixar a página simples e organizada pode favorecer uma análise mais precisa dela pelo Google

Consequentemente deixará o seu HTML mais semântico, seguindo as boas práticas de desenvolvimento, ou seja, outros desenvolvedores lerão seu código melhor

E por consequência aumenta o seu SEO, os dois conceitos estão de mãos dadas

Outros headings

Outro detalhe importante é que o ranking de h1 para h6, deve ser mantido

Ou seja, em grau de importância utilize h1 para o assunto mais importante e h6 para o menos relevante para a página

Tente também não pular de headings!

Por exemplo: de h1 para h4

E também não se preocupe em utilizar todos os headings, a maioria das páginas chegam no máximo ao h3

Obs: Isso também não é requirido nem pelo Google e nem  pelo W3C.

Também é importante citar que os headings, a partir do h2, não possuem um ‘limite’ de uso

Por exemplo: utilize h1 para o assunto principal, uma só vez, e vários h2 para os subtópicos/seções (como é feito neste blog 😀 )

A tag title no head e o h1

Faça uso dessa tag, pois é muito importante para o SEO, porém devemos observar a relação dela com o título principal do body (o h1)

Evite repetir a tag title no head igual ao h1 da sua página

Essa repetição pode ser mal vista aos olhos do SEO, pois seria uma ‘tentativa de burlar’ o mecanismo, forçando uma repetição de conteúdo para tentar deixar a sua página com mais evidência

No h1: seja direto ao ponto da página

No title: trabalhe uma pequena frase com o contexto da página/artigo

Por exemplo:

  • <h1>O melhor blog do mundo sobre Star Wars</h1>
  • <title>No melhor blog do mundo sobre Star Wars, você encontra toda a explicação da saga</title>

Conclusão

Neste artigo vimos quando usar o h1 e para o que ele realmente serve e também algumas nuances entre os headings e a tag title

As propriedades de estilo referente aos elementos do HTML devem ser todas alteradas via CSS

E a real importância dos headings é guiar o Google no que apresentamos na nossa página

E por hoje é isso, até o próximo post! 🙂

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x