O que é uma etiqueta H1? Melhores práticas de SEO para 2021

Mas porque é que a eti­que­ta H1 é impor­tante, como adi­cioná-la e quais as práti­cas recomendadas?

Neste guia, apren­derá as respostas para todas estas perguntas:

• Porque é que as eti­que­tas H1 são impor­tantes para o SEO?
• Como adi­ciono uma eti­que­ta H1?
• Quais são as práti­cas recomen­dadas de SEO para eti­que­tas H1?

Aqui estão três razões:

1. As eti­que­tas H1 aju­dam os motores de pesquisa a enten­der a página
2. Eti­que­tas H1 mel­ho­ram a exper­iên­cia do utilizador
3. Eti­que­tas H1 mel­ho­ram a acessibilidade

As etiquetas H1 ajudam os motores de pesquisa a entender a página

John Mueller, do Google, disse que as eti­que­tas H1 aju­dam o Google a enten­der a estru­tu­ra de uma pági­na. Por­tan­to, se estiv­er a uti­lizar H1s para o títu­lo da sua pági­na ou cabeçal­ho de con­teú­do como o Google recomen­da, o seu H1 está efe­ti­va­mente a infor­mar o Google “aqui está o assun­to da min­ha página”.

Etiquetas H1 melhoram a experiência do utilizador

As eti­que­tas H1 mel­ho­ram a exper­iên­cia do uti­lizador no sen­ti­do em que fazem parte da estru­tu­ra hierárquica de uma pági­na da web. O H1 é o títu­lo mais proem­i­nente na pági­na, depois o H2, H3, etc.

Deixan­do de uti­lizar eti­que­tas H1 e out­ros cabeçal­hos cor­re­ta­mente, as pági­nas tor­nam-se mais difí­ceis de ler e digerir.

Etiquetas H1 melhoram a acessibilidade

Mil­hões de pes­soas com defi­ciên­cia visu­al uti­lizam leitores de ecrã para con­vert­er tex­to e ima­gens de pági­nas da web em áudio. De acor­do com este estu­do do webAIM, 60% dos uti­lizadores de leitores de ecrã pref­er­em que ape­nas o títu­lo da pági­na seja uma tag H1.

A maio­r­ia dos CMS facili­ta a adição de uma eti­que­ta H1 à sua pági­na. Vejamos como faz­er isso nal­guns dos mais populares.

Como adicionar uma etiqueta H1 no WordPress

A maio­r­ia dos temas do Word­Press estão cod­i­fi­ca­dos para uti­lizar o títu­lo da pági­na ou post como H1.

Como adicionar uma etiqueta H1 no Wix

A maio­r­ia dos temas do Wix tem uma eti­que­ta H1 em cada pági­na. Se não tiv­er certeza de qual é o tex­to, altere o esti­lo das suas eti­que­tas H1 tem­po­rari­a­mente no edi­tor de tema. Isso deve destacar efe­ti­va­mente o H1 no con­stru­tor de páginas.

Como adicionar uma etiqueta H1 no Squarespace

A maio­r­ia dos temas do Square­space tem uma eti­que­ta H1 em cada pági­na. Se não tiv­er certeza de onde se encon­tra, bas­ta clicar nas caixas de tex­to proem­i­nentes até ver uma com o esti­lo “Títu­lo 1”.

Como adicionar uma etiqueta H1 em HTML

Use uma eti­que­ta H1 de aber­tu­ra (<h1>), insira o títu­lo da pági­na e adi­cione uma eti­que­ta H1 de encer­ra­men­to (</h1>).

Exem­p­lo:

<h1>Este é o H1</h1>

Antes de exam­i­n­ar­mos as práti­cas recomen­dadas, é impor­tante obser­var que é extrema­mente improváv­el que não cumprir com qual­quer uma delas cause estra­gos no SEO do seu web­site. Por­tan­to, não entre em pâni­co se não estiv­er a faz­er algu­mas destas coisas. Cer­ta­mente não levará a nada assus­ta­dor como uma penal­iza­ção do Google.

O tra­bal­ho do Google é enten­der, indexar e posi­cionar o con­teú­do da web. É impos­sív­el faz­er isso sem mecan­is­mos para lidar com cir­cun­stân­cias não ideais, como pági­nas sem eti­que­tas H1.

Dito isto, cada pequeno detal­he aju­da no SEO — por­tan­to, é útil seguir as práti­cas recomen­dadas sem­pre que possível.

Aqui estão 9 práti­cas recomen­dadas para eti­que­tas H1:

1. Uti­lize eti­que­tas H1 para títu­los de página
2. Uti­lize maius­culiza­ção do títu­lo para H1s
3. Cor­re­spon­der H1s a eti­que­tas de título
4. Uti­lize uma eti­que­ta H1 em todas as pági­nas importantes
5. Uti­lize ape­nas um H1 por página
6. Man­ten­ha as eti­que­tas H1 curtas
7. Esti­los de títu­lo por hierarquia
8. Inclua a sua palavra-chave alvo
9. Torne as eti­que­tas H1 atraentes

Utilize etiquetas H1 para títulos de página

O Google diz para “colo­car o títu­lo do seu arti­go num local de destaque aci­ma do cor­po do arti­go, como numa eti­que­ta <h1>.”

Emb­o­ra muitas platafor­mas de web­sites e CMS façam isto por pre­definição, isto pode ser sub­sti­tuí­do por deter­mi­na­dos temas.

Se está curioso em saber como o seu tema lida com isto, a for­ma mais fácil de ver­i­ficar é clicar com o botão dire­ito do rato no títu­lo no seu nave­g­ador e sele­cionar “Inspe­cionar”. Se a parte desta­ca­da incluir <h1>, então está envolvi­da numa eti­que­ta H1.

Se não estiv­er famil­iar­iza­do com HTML, instale a Bar­ra de Fer­ra­men­tas de SEO da Ahrefs e ver­i­fique o relatório gra­tu­ito “na pági­na” para ver as suas etiquetas‑H, incluin­do o seu H1.

Se preferir ver­i­ficar as suas eti­que­tas H1 em massa:

1. Inscre­va-se para obter uma con­ta gra­tui­ta das Fer­ra­men­tas para Web­mas­ters da Ahrefs
2. Ras­treie o seu web­site com a Audi­to­ria de Websites
3. Vá ao relatório na página
4. Desça até ao grá­fi­co “Con­fig­u­ração H1”
5. Clique na parte verde do grá­fi­co circular

Utilize maiusculização do título para H1s

A cap­i­tal­iza­ção do títu­lo é onde colo­ca as ini­ci­ais em maiús­cu­la de todas as palavras con­tendo qua­tro ou mais letras.

Se o seu CMS uti­liza títu­los de pági­na para eti­que­tas H1 e eti­que­tas de títu­lo, usar maiús­cu­las e minús­cu­las para títu­los de pági­na aju­da a man­ter a aparên­cia cor­re­ta nos resul­ta­dos da pesquisa. Nor­mal­mente, são ape­nas pub­li­cações de fóruns que uti­lizam letras minús­cu­las ou maiúsculas.

Corresponder H1s a etiquetas de título

O Google diz para com­bi­nar a sua eti­que­ta de títu­lo com o seu H1.

A maio­r­ia dos CMS, como o Word­Press, fazem isto auto­mati­ca­mente, mas é pos­sív­el definir a eti­que­ta de títu­lo como algo difer­ente do H1 com um plu­g­in de SEO como o Yoast.

A razão mais comum para faz­er isto é quan­do o títu­lo da pági­na é per­feita­mente ade­qua­do para um H1, mas muito lon­go para a eti­que­ta de título.

Por exem­p­lo, o nos­so títu­lo e H1 são ligeira­mente difer­entes para esta pub­li­cação:

Se o seu títu­lo e H1 forem ligeira­mente difer­entes, mas feitos da mes­ma for­ma, como é o caso aci­ma, tudo bem. Se o seu títu­lo for dras­ti­ca­mente difer­ente do H1, provavel­mente vale a pena trazê-los de vol­ta ao alinhamento.

Porquê? Os uti­lizadores com­pram, em parte, pela sua eti­que­ta de títu­lo nas SERPs. Se forem rece­bidos na pági­na com um títu­lo com­ple­ta­mente difer­ente e não rela­ciona­do (H1), eles sen­tir-se-ão enganados.

Pode ver­i­ficar se há H1s e eti­que­tas de títu­lo incom­patíveis gra­tuita­mente nas Fer­ra­men­tas para Web­mas­ters da Ahrefs.

1. Inscre­va-se nas Fer­ra­men­tas para Web­mas­ters da Ahrefs
2. Ras­treie o seu web­site na Audi­to­ria de Websites
3. Vá para o relatório Na pági­na
4. Desça até ao grá­fi­co “Con­fig­u­ração H1”
5. Clique na área verde do grá­fi­co circular
6. Pro­cure por eti­que­tas de títu­lo e H1s total­mente incompatíveis

Aqui está um títu­lo e H1 incom­patíveis para o nos­so guia de tex­to ânco­ra:

A eti­que­ta de títu­lo é ori­en­ta­da a uma definição, enquan­to o H1 é ori­en­ta­do a um estu­do. É pos­sív­el que os uti­lizadores se sin­tam um pouco engana­dos ou con­fu­sos depois de cli­carem nes­ta pági­na, então provavel­mente faria sen­ti­do man­ter uma ori­en­tação consistente.

DICA PROFISSIONAL

Se o seu web­site tiv­er muitas pági­nas, orga­nize o relatório na Audi­to­ria de Web­sites da Ahrefs por tráfego orgâni­co para pri­or­i­ti­zar as alter­ações. Não adi­anta pre­ocu­par-se com os títu­los e H1s incom­patíveis se a sua pági­na não rece­ber nen­hum tráfego orgânico.

Utilize uma etiqueta H1 em todas as páginas importantes

Dado que o títu­lo da sua pági­na deve ser envolvi­do por uma eti­que­ta H1, nem é pre­ciso diz­er que deve usar um H1 em todas as pági­nas impor­tantes. Afi­nal, todas as pági­nas têm um título.

Se quis­er encon­trar pági­nas com H1s ausentes ou vazios:

1. Inscre­va-se nas Fer­ra­men­tas para Web­mas­ters da Ahrefs
2. Ras­treie o seu web­site na Audi­to­ria de Websites
3. Vá para o relatório Na pági­na
4. Desça até ao grá­fi­co “Con­fig­u­ração H1”
5. Clique na área ver­mel­ha do grá­fi­co circular

Pode ver aci­ma que algu­mas das nos­sas pági­nas têm H1s em falta.

Esta é a mel­hor práti­ca? Nem por isso. Mas tam­bém é improváv­el que seja um grande prob­le­ma porque estas pági­nas não são par­tic­u­lar­mente impor­tantes do pon­to de vista do SEO. Estas são ape­nas pági­nas ini­ci­ais de blog e pági­nas de arqui­vo que provavel­mente só atrairão tráfego de marca.

Por­tan­to, emb­o­ra os nos­sos desen­volve­dores pos­sam “arran­jar” isto em min­u­tos, provavel­mente não vale a pena perder tem­po, pois as pági­nas pare­cem per­feita­mente boas para os vis­i­tantes — e isso é tudo o que impor­ta neste caso.

Utilize apenas um H1 por página

John Mueller, do Google, diz que usar vários H1s por pági­na é aceitável.

Se estiv­er a uti­lizar HTML5, isto é estri­ta­mente ver­dadeiro. Não há nada tec­ni­ca­mente erra­do em uti­lizar várias eti­que­tas H1 em difer­entes seções.

Por exem­p­lo, esta pági­na HTML5 tem qua­tro eti­que­tas H1 e é tec­ni­ca­mente adequada.

<body>
   <h1>Maçãs</h1>
   <p>Maçãs são frutas.</p>
   <section>
      <h1>Gosto</h1>
      <p>Elas têm um gosto adorável.</p>
      <section>
         <h1>Doçura</h1>
         <p>Maçãs vermelhas são mais doces do que as verdes.</p>
      </section>
   </section>
   <section>
      <h1>Cor</h1>
      <p>As maçãs são de várias cores.</p>
   </section>
</body>

Quase todos os nave­g­adores mod­er­nos ren­derizarão isto cor­re­ta­mente e exibirão as eti­que­tas H1 em ele­men­tos <sec­tion> encaix­a­dos de acor­do com seu nív­el de encaixe. Isso sig­nifi­ca que H1s na primeira <sec­tion> serão pare­ci­dos com H2s, H1s encaix­a­dos noutra <sec­tion> serão pare­ci­dos com H3s, etc.

No entan­to, mes­mo com HTML5, o W3C recomen­da que se uti­lizem “títu­los da posição apro­pri­a­da para o nív­el de encaixe da seção”.

Por exem­p­lo:

<body>
   <h1>Maçãs</h1>
   <p>Maçãs são frutas.</p>
   <section>
      <h2>Gosto</h2>
      <p>Elas têm um gosto adorável.</p>
      <section>
         <h3>Doçura</h3>
         <p>Maçãs vermelhas são mais doces do que as verdes.</p>
      </section>
   </section>
   <section>
       <h2>Cor</h2>
       <p>As maçãs são de várias cores.</p>
   </section>
</body>

Isto ocorre porque alguns nave­g­adores lega­dos terão prob­le­mas para ren­derizar as coisas cor­re­ta­mente sem regras CSS explícitas.

Mas e se o seu web­site não uti­lizar HTML5?

John Mueller diz que várias eti­que­tas H1 con­tin­ua a ser aceitável:

Inde­pen­den­te­mente de uti­lizar HTML5 ou não, é aceitáv­el ter vários ele­men­tos H1 numa página.

Dado que esta não é a mel­hor práti­ca para os padrões W3C, porquê este con­sel­ho do Google?

Respos­ta: Porque eles desen­volver­am mecan­is­mos para lidar com o prob­le­ma comum de vários H1s numa pági­na da web.

Por­tan­to, emb­o­ra provavel­mente não importe muito para o SEO se uti­liza uma ou várias eti­que­tas H1, ain­da achamos que é a mel­hor práti­ca para a maio­r­ia dos websites.

Pode ver­i­ficar se há pági­nas com várias eti­que­tas H1 no seu web­site gra­tuita­mente nas Fer­ra­men­tas para Web­mas­ter da Ahrefs.

1. Inscre­va-se nas Fer­ra­men­tas para Web­mas­ters da Ahrefs
2. Ras­treie o seu web­site na Audi­to­ria de Websites
3. Vá para o relatório Na pági­na
4. Desça até ao grá­fi­co “Con­fig­u­ração H1”
5. Clique na área amarela do grá­fi­co circular

Mantenha as etiquetas H1 curtas

Muitos CMS uti­lizam o mes­mo tex­to para o seu H1 e para a eti­que­ta de títu­lo. Se for esse o seu caso, a menos que planeie escr­ev­er uma eti­que­ta de títu­lo exclu­si­va para cada pági­na e pub­li­cação, vale a pena man­ter os títu­los das pági­nas curtos.

Quão cur­to? A regra ger­al é de 70 car­ac­teres ou menos.

Aqui está uma pági­na que que­bra esta regra:

O H1 nes­ta pági­na tem 80 car­ac­teres que pare­cem per­feita­mente bem na própria pági­na. Mas, como o Word­Press usa esse mes­mo tex­to para a eti­que­ta de títu­lo, ele elim­i­na nos resul­ta­dos da pesquisa.

Poderíamos resolver este prob­le­ma con­fig­u­ran­do a eti­que­ta de títu­lo para uma ver­são mais cur­ta da eti­que­ta H1. Mas se tivésse­mos feito um esforço para cri­ar um títu­lo mais cur­to em primeiro lugar, não teríamos este problema.

Estilos de título por hierarquia

Os títu­los são uti­liza­dos ​​para cri­ar hier­ar­quia em uma pági­na da web. Como a eti­que­ta H1 geral­mente é o títu­lo mais impor­tante da pági­na, o esti­lo CSS deve refle­tir isso.

Por out­ras palavras, o H1 deve ser a eti­que­ta mais proem­i­nente na página.

Isto pode pare­cer óbvio, mas exis­tem muitos web­sites com pou­ca dis­tinção visív­el entre H1s e H2s.

Inclua a sua palavra-chave alvo

John Mueller, do Google, disse em 2020:

E quan­do se tra­ta de tex­to numa pági­na, um títu­lo é um sinal muito forte, dizen­do que esta parte da pági­na é sobre este tópico.

Dado que o H1 geral­mente envolve o títu­lo da pági­na, é indisc­u­tivel­mente o cabeçal­ho mais impor­tante da pági­na. Por­tan­to, geral­mente faz sen­ti­do incluir a sua palavra-chave prin­ci­pal para tornar o tópi­co da pági­na dupla­mente claro para o Google e os utilizadores. 

Isto é algo que faze­mos para prati­ca­mente todas as pub­li­cações do nos­so blog.

Faz sen­ti­do faz­er sem­pre isso? Claro que não.

Às vezes, é mel­hor usar uma vari­ante próx­i­ma da sua palavra-chave de des­ti­no para facil­i­tar a leitura.

Por exem­p­lo, a palavra-chave prin­ci­pal para esta pub­li­cação é “como obter mais visu­al­iza­ções no youtube”. Mas como escreve­mos uma lis­ti­cle, não fazia sen­ti­do usar isto no H1. Então, em vez dis­so, usamos uma vari­ação aproximada.

Tam­bém não deve ter medo de usar con­junções e palavras de inter­rupção para man­ter as coisas com uma sonori­dade natural.

Torne as etiquetas H1 atraentes

As eti­que­tas H1 pre­cisam de ser des­criti­vas. É óbvio. Mas se estiv­er a escr­ev­er títu­los para pub­li­cações de blog, estes tam­bém pre­cisam de ser atraentes o sufi­ciente para atrair cliques.

Como cri­ar um títu­lo de pub­li­cação atraente?

Antes de pen­sar em usar um destes ger­adores de títu­lo de pub­li­cação de blog, con­sidere o propósi­to da sua pub­li­cação. Se o títu­lo existe para atrair tráfego orgâni­co de motores de pesquisa e o seu CMS uti­liza títu­los de pági­na para H1s e eti­que­tas de títu­lo, o títu­lo da pub­li­cação pre­cisa de ser escrito para uti­lizadores de mecan­is­mos de pesquisa.

Como sabe o que eles querem?

Inspire-se nos resul­ta­dos mais bem posi­ciona­dos para sua palavra-chave alvo.

Por exem­p­lo, se olhar­mos para as pági­nas prin­ci­pais em pesquisa de “téc­ni­cas de SEO”, fica claro que os uti­lizadores dese­jam téc­ni­cas de SEO acionáveis ​​e efi­cazes que aju­dem a mel­ho­rar o tráfego de pesquisa.

Podemos uti­lizar estas infor­mações para cri­ar um títu­lo de pági­na atraente (H1) para a nos­sa publicação.

No mun­do do SEO, isto é con­heci­do como otimiza­ção para a intenção de pesquisa.

FAQs

Vamos ter­mi­nar por respon­der a algu­mas per­gun­tas comuns sobre eti­que­tas H1.

Qual deve ser o comprimento de uma etiqueta H1?

As eti­que­tas H1 podem ser tão lon­gas quan­to quis­er, mas como a maio­r­ia dos CMSs uti­liza o títu­lo da pági­na tan­to para a eti­que­ta H1 quan­to para a eti­que­ta de títu­lo, é mel­hor man­ter os títu­los de pági­na cur­tos (<70 car­ac­teres) para evi­tar o corte da eti­que­ta de título.

Posso ter mais de uma etiqueta h1 numa página?

Se estiv­er a uti­lizar HTML5, sim. Se não estiv­er a uti­lizar HTML5, rara­mente é a mel­hor práti­ca, mas é improváv­el que seja um grande prob­le­ma de qual­quer maneira.

Posso usar uma imagem numa etiqueta H1?

Sim. De fac­to, o W3C fá-lo. 

Pensamentos finais

As eti­que­tas H1 são indisc­u­tivel­mente menos impor­tantes do que cos­tu­mavam ser. O Google pos­sui mecan­is­mos para enten­der bem o seu con­teú­do, mes­mo que o uso de eti­que­tas H1 não seja o ideal.

Dito isto, seguir as práti­cas recomen­dadas não é difí­cil, então é algo que tam­bém pode faz­er. No mín­i­mo, mel­ho­ra a exper­iên­cia do utilizador.

Tem questões? Diga-me no Twit­ter.