Como usar tags de cabeçalho HTML corretamente
Publicados: 2020-06-25Cada site é seu monstro único, com desenvolvedores e designers colocando suas próprias vozes no código. Mas um elemento que todo site tem em comum são as tags de cabeçalho HTML. Esses títulos não apenas dividem o seu conteúdo em seções mais legíveis, mas também criam o esboço semântico do seu site para que os mecanismos de pesquisa e o software de acessibilidade possam dizer exatamente o conteúdo que compõe o site. Ocasionalmente, há alguma confusão quanto ao uso e função adequados das tags de cabeçalho HTML, portanto, queremos passar por todas as 6 camadas e discutir como e quando usá-las corretamente.
Inscreva-se no nosso canal no Youtube
Por que usar tags de cabeçalho HTML?
Como dissemos acima, essas tags criam o esqueleto do seu site. Sem eles, não apenas o título e o propósito do seu site são menos que claros, mas o conteúdo parece para os usuários e os bots como se fosse uma parede gigante de texto - mesmo que você o divida usando parágrafos.
Além disso, leitores de tela e software de acessibilidade os utilizam para navegar em seu conteúdo (às vezes literalmente). Portanto, se você não incluir tags de cabeçalho HTML, seu site se tornará inacessível para muitas pessoas porque elas simplesmente não podem se mover pela página e pelo conteúdo.
Além disso, os mecanismos de pesquisa e outros rastreadores da web que chegam ao seu site também navegam pelos cabeçalhos. Recentemente, o Google tem considerado a semântica do código em seus rankings, o que significa que a intenção de busca é muito pesada. Suas tags de cabeçalho HTML são uma parte importante disso, informando ao Google e aos visitantes onde encontrar informações específicas na página, organizadas por importância hierárquica.
E cada tag em sua página ajuda a tudo isso de sua própria maneira.
A hierarquia de tags é importante
A hierarquia da tag de cabeçalho HTML é importante. A ordem em que você usa essas tags pode fazer ou quebrar o SEO do seu site. Embora você possa estilizá-los usando CSS e tornar uma tag H6 maior, mais ousada e mais brilhante do que H2, você ainda deve tentar mantê-los em ordem para não confundir os rastreadores (e leitores).
Pense nas tags em ordem crescente como se fossem os títulos do esboço de sua postagem. Você deve apenas (em geral), colocar um número maior sob seu predecessor imediato. Você pode aninhá-los com a profundidade que desejar, mas certifique-se de colocar apenas o próximo em sequência a cada vez.
Aqui está um exemplo:
<h1>Title</h1>
<h2>Main Point Number 1</h2>
<h3>Subtopic</h3>
<h4>Very specific point</h4>
<h3>Main Point Number 2</h3>
<h4>Subtopic</h4>
<h5>Example or important chart</h5>
<h4>Specific point</h4>
<h5>Example or important chart</h5>
<h6>Highly specific example explaining this point</h6>
Pode haver casos específicos em que você tem um único H6 acima de um H4, mas na maioria das vezes, o Google e outros mecanismos de pesquisa determinam a prioridade do tópico e medem a eficácia do conteúdo para a intenção de pesquisa usando títulos para navegar em seu conteúdo.
Tags H1
A tag H1 pode ser a mais simples das tags de cabeçalho HTML, ao mesmo tempo que é uma das mais incompreendidas. Na maioria dos casos, você verá o cabeçalho H1 como o título de uma página ou postagem específica. É o que os mecanismos de pesquisa (provavelmente) exibirão nos resultados. Seu navegador provavelmente também mostrará isso na barra de título, embora muitos plug-ins de SEO e aplicativos semelhantes permitam que você os altere. Por isso, embora seja importante ter sua frase-chave de destino na tag H1, ela não é 100% necessária. Escreva suas manchetes e títulos semanticamente para cobrir a intenção de pesquisa dos visitantes, em vez de preencher as tags de cabeçalho HTML com palavras-chave.
A imagem acima mostra uma tag H1 usada como título de entrada para um artigo no blog Elegant Themes. É a única tag H1 na página também. Isso indica que é o tópico do conteúdo da página.
Durante anos, a prática padrão era ter uma (e apenas uma) tag H1 por página. Para a maior parte, este ainda é um bom conselho. O Google e outros mecanismos de pesquisa rastreiam sua página e procuram a tag H1. Eles então o usam para determinar o tópico, o título e a estrutura.
No entanto, o Google disse explicitamente que ter várias tags de cabeçalho H1 HTML em seu site não incorre em nenhuma penalidade de SEO. Isso não significa enlouquecer ao usá-los em todos os lugares do site, mas significa que você pode usar mais de um por página quando necessário.
Quando usar vários títulos H1
O único propósito de um H1 é indicar uma seção completa em um único tópico. Isso significa que, se você tiver uma única página com mais de um tópico, poderá usar um H1 para cada novo tópico dessa página. Isso diria ao Google que sua página não trata apenas do tópico do título. Mas também pode haver uma seção sobre um tópico completamente diferente (mas relacionado) mais abaixo.
Em sites de uma única página, isso também é importante porque você pode ter uma seção Sobre, Preços, Contato e Portfólio nessa página. Então, como você informa ao Google que o conteúdo contido em cada seção é sua própria unidade autônoma?
Tags H1, é assim. Você trata cada seção como se fosse sua própria minipágina da web, usando a hierarquia que discutimos acima em cada uma. Dessa forma, o Google vê os títulos à medida que navega pela página e pode determinar de qual dessas seções extrair trechos em destaque (e assim por diante) para responder às perguntas dos usuários.
Você também pode optar por usar uma tag H1 cada vez que usar uma tag de seção em seu site, mas sugerimos fazer isso apenas quando for uma seção de importância paralela ao título da página, em vez de uma subordinada.
Tags H2
As tags H2, agora, provavelmente serão as tags de cabeçalho HTML mais usadas em suas páginas. E por um bom motivo. A maioria das postagens e páginas na Internet consiste em um único tópico com apenas alguns subtítulos. Recomendamos que cada parte do conteúdo que você criar contenha pelo menos uma tag H2. Yoast e outros plug-ins de SEO sugerem um título a cada 300 palavras. Dependendo do seu conteúdo, é para isso que servem as tags H2.
Eles separam subtópicos (ou etapas) para facilitar a leitura. Por exemplo, a maioria de nossas postagens consiste principalmente em títulos H2 (com H3 quando aplicável). Isso porque nossos artigos tratam de um único tópico, onde estamos tentando resolver um único problema. Teremos o título Como usar OBS Studio para livestream como H1, mas os subtítulos como “Como começar a usar OBS Studio” estarão em H2.
A tag H2 representa etapas individuais que pertencem diretamente ao tópico H1. Nessa postagem específica, usamos a seguinte estrutura:
<h1>How to Use OBS Studio to Livestream</h1>
<h2>What is OBS Studio?</h2>
<h3>What about SLOBS?</h3>
<h2>How to Get Started with OBS Studio</h2>
<h2>OBS Studio Setup</h2>
<h3>Setting Up a Scene in OBS Studio</h3>
<h3>Adding Sources in OBS Studio</h3>
<h2>Adjusting Sources Onscreen</h2>
<h3>RMTP Keys and OBS Studio</h3>
<h2>Wrapping Up</h2>
As tags de cabeçalho H2 nesta postagem abordam as idéias principais, como começar e baixá-lo, configurar o software real e, em seguida, ajustar como sua tela aparece para os visualizadores. Embora também haja etapas abaixo daquelas em H3, os títulos H2 indicam a imagem em grande escala do artigo. Eles são uma visão de alto nível que os rastreadores e leitores poderão examinar para ver se o artigo contém as informações que procuram.
Em geral, você terá várias tags H2 por artigo, embora não haja subtítulos aninhados nelas. Se a sua página ou postagem estiver em um único tópico que não esteja dividido em seções com subseções como o exemplo acima, seria melhor ter várias tags H2 do que H2 -> H3 -> H4 aninhadas porque elas indicam aos rastreadores que você ' re mergulhar mais fundo em um suptópico do que expandir o assunto principal do post.
Tags H3
As tags H3, por outro lado, são onde seus artigos podem realmente se aprofundar nos detalhes de seu tópico. Você nunca deve usar essas tags H3 diretamente em um H1. Os motores de busca e Googlebots os veem absolutamente como subtítulos. Considerando que H2 é aceito como sendo um cabeçalho principal para seções dentro de um único artigo (com o H1 declarando o tópico principal como título, lembre-se).
Se você olhar atentamente para a imagem acima, verá que o estilo e o tamanho reais entre nossas tags H2 e H3 não são terrivelmente diferentes. A razão é, não queremos que você assuma, ao fazer a varredura, que qualquer ponto que fizermos em um H3 é menos importante do que um H2. Porque não é.
É apenas menor em tamanho para indicar que é um ponto subordinado ao H2, ao invés de um vínculo direto com o tópico geral, o que é mais importante do ponto de vista estrutural em relação ao SEO para seu artigo. Para leitores humanos, em vez de robôs, a distinção visual simplesmente ajuda a movê-los para baixo na página e dividir as informações para analisá-las com mais facilidade.
Tags H4, H5, H6
Nós os juntamos por um motivo. Em geral, você terá dificuldade em encontrar sites que façam uso completo da faixa de H1 a H6 de tags de cabeçalho HTML. De longe, a estrutura mais popular é de H1 a H3. Assim como você raramente vê um esboço de conteúdo além do segundo nível aninhado.
I. Idea
A. Subpoint
1. Detail
II. Idea
A. Subpoint
1. Detail
III. Idea
H4
Na maior parte, a tag H4 terá a mesma finalidade que H3. Você os usará para entrar em detalhes para etapas e exemplos, mas sempre aninhados abaixo de seus títulos principais. Os designers geralmente os estilizam com CSS menor que H3. Eles tendem a ver o uso limitado na criação de conteúdo comum. Um tópico tende a ser muito aprofundado se as idéias precisam ser divididas para que uma tag de título H4 seja necessária.
H5 e H6
Você pode usar os cabeçalhos H5 e H6, de duas maneiras diferentes.
A primeira maneira
(Apenas para dar um exemplo, dividimos esta seção específica em várias partes por meio do título, e agora estamos em H4 porque é um sub-subtópico do artigo principal.)
Esses cabeçalhos são freqüentemente usados em índices e listas semelhantes, embora sua função principal seja tecnicamente a mesma que as outras, delineando tópicos de importância decrescente ao longo da página. Será muito raro encontrar um documento com uma gama completa de cabeçalhos até H6.
O segundo caminho
Algumas pessoas usam tags H5 e H6 como cabeçalhos de formatação de “especialidade”. Eles aplicarão CSS especial a essas duas tags de cabeçalho HTML que são completamente diferentes de H1 a H4. Você pode então usá-los para chamar a atenção para tópicos e ideias que, de outra forma, poderiam passar despercebidos.
Esta não é uma prática tecnicamente recomendada, pois os títulos são hierárquicos. No entanto, se o seu site estiver bem estruturado de modo geral e você usar o H5 e o H6 com moderação como estilos especiais em certas páginas ou postagens individuais, é quase certo que não será atingido pelo SEO.
Lembre-se de que, mesmo ao usá-los para formatação especial, você não sai da hierarquia. Mantenha-os em ordem. Portanto, se você usar H6 para definir o estilo de um subtítulo, certifique-se de que o próximo usado seja um H1 ou H2 para mostrar que você voltou para a estrutura padrão.
O que não fazer com tags de cabeçalho HTML
Não estruture uma única página com toda a hierarquia de títulos até o fim. Você está melhor com um H1 para um título e todos os H2s, em vez de cada título sucessivo sendo aninhado.
Sim:
<h1>Title</h1>
<h2>Main Point Number 1</h2>
<h2>Main Point Number 2</h2>
<h2>Main Point Number 3</h2>
<h2>Main Point Number 4</h2>
Não:
<h1>Title</h1>
<h2>Point Number 2</h2>
<h3>Point Number 3</h3>
<h4>Point Number 4</h4>
<h5>Point Number 5</h5>
<h6>Point Number 6</h6>
Além disso, você não deseja usar os títulos aleatoriamente. Use-os apenas em ordem. Caso contrário, os rastreadores não terão ideia de como navegar em sua página, nem o software de acessibilidade.
Não:
<h1>Title</h1>
<h3>Point Number 2</h3>
<h2>Point Number 3</h2>
<h6>Point Number 4</h6>
<h5>Point Number 5</h5>
<h4>Point Number 6</h4>
Em geral, você pode presumir que um rastreador saberá que você saiu de uma subseção quando encontrar o próximo H1 ou H2. No trecho de código acima, os rastreadores e bots teriam dificuldade em analisar a estrutura das informações.
Concluindo com tags de cabeçalho HTML
E veja? Estamos de volta a um rumo H2 para encerrar as coisas. As tags de título são um elemento importante de cada site que existe. Usá-los corretamente pode aumentar suas classificações no mecanismo de pesquisa, bem como o UX do seu site, uma vez que os visitantes poderão encontrar mais facilmente as informações que procuram em seu conteúdo. Lembre-se de não usar muitas palavras-chave em seus títulos. Embora seja uma boa ideia incluir as palavras-chave ou frases que você está discutindo para garantir que suas ideias sejam claras, o Googlebots e outros são muito inteligentes e podem dizer quando você trocou de assunto ou está no mesmo. No geral, usar tags de cabeçalho HTML é extremamente importante, mas se você mantiver apenas algumas coisas em mente, seus sites brilharão em um piscar de olhos.
Você tem usado as tags de cabeçalho HTML corretamente?
Imagem de destaque do artigo por VectorV / shutterstock.com