Como usar o h1 do HTML corretamente nos títulos do seu site
Aprenda como usar a tag de título HTML H1 da forma certa para otimizar o código do seu site para os buscadores (SEO), acessibilidade e validação
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
A tag HTML H1 serve para definir o título principal visível de uma página do seu site e deve ser usada corretamente para garantir uma boa otimização para os buscadores. Estamos falando do título que aparece para o usuário na página e não o da aba do navegador, mas ambos são importantes.
Um bom trabalho de SEO (otimização para os buscadores) é composto por várias ações e uma delas é otimizar os títulos
das páginas com as palavras-chave desejadas. Temos o título que aparece na aba do navegador definido com o código HTML
<title> e o título visível na página definido com <h1>.
Você pode acessar o código-fonte de uma página através do comando CTRL + U e procurar por esses elementos. O código apresentado é formado basicamente por HTML, linguagem usada para definir estrutura, imagens, parágrafos e nossos títulos.
É neste ponto que devemos validar a utilização do título principal <h1> seguindo algumas regras
que ajudam na classificação do seu site nos resultados de pesquisa.
Quando digo título principal significa que temos títulos de menor importância, como subtítulos. Esses podem ser definidos
em até 5 níveis (<h2> até <h6>). Vamos focar neste post no título principal <h1>,
mas algumas regras são relacionadas com os subtítulos. Vamos ver isso em detalhes.
Formatação e ordem dos títulos
Por padrão o navegador formata os elementos com base em sua importância (negrito e tamanho da letra), mas claro, você pode mudar isso com CSS.
Além disso, a ordem desses elementos deve ser hierárquica, ou seja, nunca coloque <h3>, <h2> e <h1>, mas sim <h1>, <h2> e <h3>.
No exemplo anterior temos um título principal <h1> seguido de um subtítulo <h2>. Depois
temos um parágrafo seguido por um subtítulo <h3> e um parágrafo. Depois temos novamente um <h2>
seguido por parágrafo, <h3> e parágrafo.
Essa hierarquia é importante para a leitura correta dos títulos e suas importâncias, e isso vale para os buscadores e também para leitores de tela, por exemplo, garantindo maior acessibilidade web.
A página web apresentada pode ser interpretada da seguinte forma:
1. The Tax Book
1.1 Earning money
1.1.1 Getting a job
1.2 Spending money
1.2.1 Cheap thingsO título H1 é obrigatório
O título <h1> é obrigatório em cada página do seu site. Aproveite esse elemento para colocar o quanto
antes no código HTML dentro do corpo e com as palavras-chave que representam o conteúdo.
O código a seguir é um exemplo de aplicação correta para SEO:
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
</section>
</body>Vários títulos H1 na mesma página
Você pode colocar vários elementos <h1> na mesma página, mas não é uma prática comum.
Imagine um capítulo de um livro. Esse capítulo recebe um título principal e apenas um, depois disso temos subtítulos
no decorrer das páginas.
Existem situações para aplicar vários títulos principais em uma mesma página e nada melhor que um exemplo. Imagine uma página com nomes de frutas, então podemos ter o título da aba no navegador com "Alphabetic Fruit" e depois, visíveis na página, todas as frutas com mesma importância.
...
<head>
<title>Alphabetic Fruit</title>
</head>
<body>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>
</body>
...Títulos duplicados
Uma boa prática de SEO é evitar títulos iguais nas páginas do seu site, e isso vale para os que aparecem na aba
do navegador, definidos com <title>, e também os visíveis definidos com <h1>.
O motivo é que os buscadores usam esses títulos para os resultados de pesquisa e não é interessante exibir textos iguais, mesmo em páginas com conteúdo diferentes.
Importante destacar que os buscadores estão cada vez mais inteligentes e "montando" títulos dinâmicos somente para exibição nos resultados com base no conteúdo da página, mas mesmo assim ainda é uma boa prática evitar títulos duplicados em páginas diferentes.
Já o título da aba e o título <h1> de uma mesma página podem ser iguais, mas é uma boa prática
deixar os dois levemente diferentes, com alguma variação de palavra-chave desejada.
Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!