Tags Heading e Sua Importância no SEO

As tags heading (h1 – h6) foram criadas com o intuito de marcar pontos em destaque no seu conteúdo, mas nem sempre elas são usadas de forma adequada para fornecer ao usuário uma boa experiência na leitura.

Os mecanismos de busca definiram que as tags heading possuem um grau de importância no rankeamento, obedecendo a mesma filosofia que nós usamos, na leitura dos subtítulos de um texto por exemplo. Com este “peso” dado as tags heading, um profissional de SEO precisa saber como utilizá-las de forma clara e efetiva.

Como Usar

  1. A tag <h1> deve um resumo do que o usuário vai encontrar no texto;
  2. A tag <h2> deve abordar um conteúdo sub-seqüente do conteúdo da página;
  3. As demais tags obedecem a mesma filosofia.

É importante fixar que cada página deve conter um, e apenas um <h1> e também temos que lembrar que o Webmaster não pode de maneira alguma quebrar a hierarquia de “heading tags”, ou seja, depois de um <h1> implementa-se um <h2> e assim por diante, como no exemplo abaixo:

H1

  • H2
  • H2
    • H3
      • H4
      • H4
    • H3
  • H2

Exemplo Prático

Suponha que você deseja fazer um site de vendas de carros chamado de carros.com.

<H1>A maior lista de carros novos, semi-novos e usados da internet </H1>

Observe no exemplo de H1 acima que foram utilizados algumas possíveis keywords do site e o texto está escrito de forma que o usuário consiga entender.

<H2>Venda de Carros da Marca FIAT</H2>

Já no texto do H2 temos algo mais especifico, ou seja é uma subseção do H1, e novamente colocamos algumas keywords do site no H2, isso ajuda e muito os motores de busca e o usuário a acharem o que eles precisam no site

<H3> Venda de Carros Fiat Punto </H3>

Assim como no H2, o H3 tem que ser um complemento do H# superior. E essa regra deve ser seguida até a tag H6.

O Poder das “Headling Tags”

O que acontece normalmente é que os Webmasters focam tanto importância ao H1 que se esquecem do poder que as tags H2, H3… H6 possuem. Vários testes recentes mostram que as tags H2 estão ganhando força no Google e assim vários websites estão perderndo uma grande oportunidade de atrair mais visitantes.

Ferramentas

Existem várias ferramentas na internet que auxiliam o Webmaster para validar se as tags heading estão corretas, mas a que destaco é o plugin Web Developer para o Firefox.

WebDeveloper para Firefox

Com ele podemos verificar quais heading estão faltando, se eles estão preenchidos corretamente e outros dados.

Bem simples não? Espero que tenham gostado desta dica.

Até a próxima!

Divulgue este artigo

65 Comentários para “Tags Heading e Sua Importância no SEO”

  1. ricardo

    Onde exatamente existe essa opção de validar as tags heading no plugin Web Developers?

    Responder
  2. Bruno

    Li o post, achei superválido, mas acho que há uma pequena confusão no ponto das hierarquias. Não é obrigatório utilizar sempre depois de um h1 , um h2, considerando a posição no código (mais próximo do body ou não). É importante, isso sim, independente da posição no código, que não sejam utilizados h2 sem haver na página um h1, um h3, sem haver h1 e h2, e assim por diante. Embora haja algumas teorias dizendo que quando mais próximo do body seu texto estiver, mas relevância ele ganha dentro do conteúdo da página, justificando por exemplo utilizar um h1 sempre próximo ao elemento body do html, isso não quer dizer que seja uma obrigação.

    A forma como o post mostra essa hierarquização induz a pensar que dentro de h1 tem h2, e dentro de h2 tem h3, conforme abaixo:

    *H1
    * H2

    o H3
    + H4
    + H4
    o H3
    * H2
    * H1

    No entanto, entendo ser isso possível e aceitável:

    + H4
    + H4

    * H2
    * H2
    o H3

    o H3
    * H2

    H1

    /H1

    O que não é possível é :

    + H4
    + H4

    * H2
    * H2

    H1

    /H1

    pois eu teria no meu html um heading h4 sem ter no html nenhum h3, em nenhum lugar do código.

    Bom era isso,

    Belo post!

    Abs!

    Responder
  3. Fábio Ricotta

    @ricardo: Vá em Information > Document Outline

    @bruno: eu acho que você está meio confuso. A idéia das hierarquias do HTML é esta mesma. Uma tag h1 é seguida de uma tag h2. Já a h2 pode ser seguida de outro h2 ou uma sub-seção com um h3. Entendeu?

    Mas você não pode começar com um h4 como você disse aí no seu comentário. Seu código estará semanticamente errado.

    Um abraço!

    Responder
  4. rodrigo sampaio

    Leandro, tudo bem ?

    Dúvida básica….supondo que eu possua numa mesma página vários blocos de conteúdo diferentes (separados por /div e com CSS diferentes) , o correto seria usar apenas um H1 semanticamente falando ?

    abraços

    Responder
  5. Bruno

    Questão polêmica, mas ainda sim acredito que estou certo… No manual W3C eles não fazem menção a posição no código, mas sim ao skip, ou seja, não posso usar um h4 em um código em que não haja em nehum lugar deste html um h3, h2 e h1.

    Se eu colocar no código nessa ordem , por exemplo, um h4 /h2/h3 /h1, todos devem estar em algum local da página para que eu possa, por exemplo, ter o h4. Mas reconheço que a hierarquia ajuda, mas afirmo que não é obrigatória a hierarquia de posição, mas sim de existência (um h2 só existe porque em algum lugar da página existe um h1, que pode aparecer no código antes ou depois deste h1).

    Link W3
    http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

    Numbered sections and references

    “Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped. ”

    Enfim, vc é o especialista!

    Abs!

    Responder
  6. Rebson Mendes

    Leandro! Parabéns! Sempre que o pessoal comenta sobre otimização, acaba sempre frizando e acaba esquecendo de comentar sobre as tags descritas no seu post! Muito bom!

    Responder
  7. Joaquim Oliveira

    Concordo com o colega Bruno, acho que é semântico utilizar uma ordem qualquer sem ser necessário seguir a sequencia exata, h1, h2, h3, h4, h5.
    O CSS serve justamente para isso, para podermos posicionar nossos elementos na pagina independente da ordem deles no codigo, assim um site onde o design faz com que a palavra chave fique situada na sua parte inferior possa mesmo assim ter seu peso H1 para os buscadores.
    Como ele disse, o que não pode existir é um pulo entre as heading tags, como um H4 onde não existe H3.

    Abraços

    Responder
  8. Flávio Raimundo

    Pra variar discordo de todo mundo…. daqui a pouco vão me chamar de Cardoso II…

    Tecnicamente não há necessidade na seqüencia das tags para os olhos do buscador, mas pela lógica de um texto há sim.

    Algumas correções se fazem necessário:

    No exemplo citado o texto do H1 dever ser H2 e vice versa, e seria +/- assim:

    H1 = Venda de carros da marca Fiat
    H2 = A maior lista da Internet de carros novos, semi-novos e usados da marca Fiat

    Ou seja o H1, juntamente com o title, o ALT e o link amigável, formariam a semântica de primeiro nível da página.
    E o H2 juntamente com o texto formariam a semântica de segundo nível e o inicio da exploração long tail do termo principal.
    O H2 serve também para iniciar a exploração do long tail e que terá sua abrangência maior no texto.
    Lembrando que H2 é aconselhável ser o sub-titulo ou “linha fina” de um texto.
    Já o H3 seria usado em trechos denominados “Olho”, ou pequenas chamadas de esclarecimento no meio do texto.

    Abraços a todos

    Flávio Raimundo

    Responder
  9. Frank Marcel

    E aí galera! É bom ver discussoes assim! Vou dar o meu pitaco:

    * Rodrigo: cada página deve conter um (1), e somente um (1), h1, independe de qualquer outro fator.

    * Bruno e Joaquim: Estamos falando aqui em SEO e nao em validacao W3C, tá mais para o W3SEO! ;)
    O W3C validar heading tags “de qualquer jeito” nao implica em que elas possam ser usadas de qualquer jeito do ponto de vista do SEO. Sob o ponto de vista da W3C, eu estou com vocês, sob o ponto de vista do SEO, eu estou com o Leandro e o Fabio.

    * Flávio: Perceba que o seu H2 ficou diferente do H1 citado no texto, entao a comparaçao nao é justa, você adicionou a palavra “Fiat” no fim do seu H2, palavra que nao está presente no H1 do texto, entao nao faz sentido. O H1 do texto “vai rankear bem pra qualquer marca de carro” e o seu, “somente para a Fiat”.
    Mas a sua observaçao de utilizar variaçoes do tema do H1 nos outros H’s e texto procede!

    Mais alguém se pronuncia?
    Abraços!

    Responder
  10. Crab

    Mas Frank… mas se eu quiser na página inicial do meu site exibir chamadas pelo título de todas as matéria de meu site digamos que eu exiva 10 títulos referentes às notícias de meu site na página inicial… não devo usar mais de um também??
    Antes eu não tinha essa dúvida, mas como falou com tanta propriedade a dúvida surgiu agora hehehehee

    Responder
  11. Frank Marcel

    Crab, mantenho a parte do “somente um H1″. É somente um H1 mesmo. Veja bem, o H1 é o título maior do assunto da página, os outros H’s é que entram nos subtítulos e temas associados. Acho que você deveria usar o H1 com o nome ou a marca do site e outros H’s para as notícias, já que você quer usar H’s nas notícias.
    Mais alguma dúvida? =)

    Responder
  12. Flávio Raimundo

    Frank, vou cortar seu cabelo e sua força vai acabar….kkkk. Tudo bem que não sou nenhuma Dalila né…?rs

    Um aspecto interessante na sua resposta é uma sutileza que geralmente passa despercebido pelos profissionais de SEO, a página inicial é apenas uma página e deve ser tratada, em alguns momentos, como tal, ou seja deve ter um foco para ser trabalhado em uma ou duas palavras chave e a energia deve ser concentrada nesse objetivo.

    abração
    Flávio Raimundo

    Responder
  13. Crab

    Valeu Frank pela resposta… eu geralmente uso h1 para titulos das matérias em sites que faço onde o carro chefe são artigos e tal. Obviamente quando faço uma lista de links das matérias do site eu uso ‘listas’ claro… mas quando, por exemplo, exibo na página inicial as 3 últimas matérias em destaque, com imagem e uma breve descrição de cada uma dela, ssempre usei h1 nos títulos destas 3 principais chamadas na index e só depois uma ‘lista’ de apenas os links das anteriores… normal, padrão e nada de extraordinário.
    Nas páginas internas, sim, eu uso apenas um h1…
    Bom… vou procurar estruturar melhor meu xhtml … deixando de lado alguns vícios
    Obrigado pela sua resposta Frank.
    Abraço

    Responder
  14. Frank Marcel

    E aí Flávio! Deixa meu cabelo aqui, senão acaba meu SEO hehehhe

    Pois é.. e são bem as sutilezas q fazem a diferença… mas tanto para página inicial, como qualquer outra página, é importante manter o foco, e não sair atirando pra tudo que é lado.

    Abraços! Valeu pelo comment!

    Responder
  15. Frank Marcel

    Crab, o comentário do Flávio logo após o seu, e mesmo a minha resposta para o Flávio, deve te ajudar a estruturar direitinho o site. Mãos a obra!

    Responder
  16. João Netto

    Boa noite caros amigos, SEO não é muito simples, agora suponha que daqui 3 anos todos os site siga a melhores tecnicas de SEO e os sites estajam construidos todos corretamentes, porque pelo que tenho percebido algumas tecnicas de SEO é nada mais nada menos doque trabalhar de uma forma correta. O que vai ser inventado para tomar mais nosso tempo?

    Mas concordo com vocês o SEO HOJE é muito importante.

    Abração e t+

    Responder
  17. Robson Pratti

    Boa noite a todos.
    Fiquei com uma dúvida e se na minha página eu tenho diversos titulos sendo que um não tem nada haver com o outro pelo que vi vocês aconselham a não usar mais do que um H1 o que fazer neste caso?

    []s

    Responder
    • Frank Marcel

      Depende de como é esta página, Robson. Por que uma mesma página tem tanto assunto não relacionado? Talvez seja melhor separar cada assunto em uma página diferente, ou usar um H1 mais genérico em relação aos assuntos e utilizar H2 para especificar cada assunto não relacionado.

      Ajuda? Abraços!

      Responder
    • Frank Marcel

      Fato, basta manter a coerência e não abusar.

      Aproveitando a deixa sobre o Matt Cutts, entre outros, ele também já afirmou “usem o nofollow de modo X” e depois “não usem o nofollow para nada, não se preocupem”, mas tanto em seu blog pessoal quanto ao longo dos domínios do Google, você vê o nofollow sendo usado.

      Quanto aos Hx, eu prefiro usar da maneira proposta neste artigo.

      Responder
  18. jogandoonline

    Nossa esse artigo me ajudou muito hj meu page hank e 1 gracas a esse artigo , parabenizo o autor de coração…

    jogosparacelulares.net

    Responder
  19. Lucas

    Tem como passar um tutorial de como otimizar as ‘tags heading’ para wordpress?

    Muito bom o texto… Vlw!

    Responder
  20. Iúri

    Agência Mestre,

    Acabei de instalar o complemento, e já verifiquei o funcionamento em alguns posts do meu blog. Realmente fantástico!

    Ótima dica!
    Abraços.

    Responder
  21. Fernando

    Olá,
    coloquei headings tags em meu blog,mas coloquei sendo:
    TITULO DO POST
    POSTE INTEIRO

    gostaria de saber se isso é MUITO errado!

    desde já obrigado

    Responder
    • Frank Marcel

      Olá Fernando, não entendi o que você fez, mas a sugestão deste artigo é que a página de um artigo fique organizada assim:

      h1: Título do post
      conteúdo: post inteiro

      Abraços!

      Responder
    • Frank Marcel

      Como assim?
      Não faça isso. A tag h2 é para marcar subtítulo, não para texto e mais texto.

      Para isso você usa os parágrafos.

      Responder
    • Frank Marcel

      Não é que no HTML4 fosse “proibido” mais de um h1. Acontece que usar apenas um h1 por página é uma prática recomendada pois ajuda a definir o assunto da página.

      HTML 4 ou 5, a recomendação é a mesma: somente 1 h1 por página.

      Responder
  22. Diego Massarotte

    Fala Frank;

    Eu vi um vídeo do próprio Matt Cuts falando que não havia problemas em usar “algumas” tags H1. Porém, eu acredito que utilizando apenas 1 a força da tag fica bem maior, até mesmo para dar foco ao assunto tratado.

    Responder
    • Frank Marcel

      Fato, em dos vídeos de ajuda a webmasters, o Matt Cutts comenta que não há problema em usar mais de 1 h1 em uma página **desde que faça sentido para segmentar o conteúdo**

      Acho mais interessante/importante utilizar 1 h1 e, se for necessário segmentar o conteúdo, usar h2, h3.

      Responder
  23. Raphael

    Opinião de leigo!

    Acho que as duas teorias devem ser adotadas em conjunto.
    Pelo lado da programação, as H1, H2,…H6, podem ser utilizadas fora de ordem, desde que faça sentido, seguindo a regra de que uma H3 não pode ser utilizada sem uma H2.
    Pelo lado semântico, considerando uma apresentação de texto básico (tipo redação de colégio), ninguém coloca o título no final do texto, nem o final do texto antes da introdução. E com certeza não é muito confortável ler um texto (no caso, um site) elaborado dessa forma.
    Se não a comunicação com o visitante fica falha

    Responder
  24. Douglas

    Boas dicas, Leandro.

    Pensava que pudesse usar essas tags aleatoriamente.

    A hierarquia delas deve ser observada e d conteúdo relacionado.

    Muito obrigado pela aula gratuita.

    Responder
  25. Lucas

    Incrivel, mas mudei esta parte de hierarquia em um site que estava começando a trabalhar, além de é claro melhorar os títulos e descriptions e já deu um ótimo resultado nas buscas.

    Responder
  26. Ana Paula

    Olá,
    eu não entendi muito bem se pode repetir os “h2″, e se depois de colocar um h3 pode voltar a colocar um h2 na mesma página?
    Por exemplo na index de uma página, qual seria a melhor maneira de colocar e ajudar nas buscas?

    Responder
  27. Mauricio

    Geralmente, em todos os temas WordPress na página header.php existe uma tag com o título principal do site e em todos os artigos (página single-post.php) existe um ou para os títulos.

    Como a página single-post.php faz um “include” da página header.php nós teremos no código de todas as página de artigos o seguinte:

    Título principal do site
    Título do artigo

    Eai, o que devemos fazer? O Google ignora o H1 do título principal do site e da ênfase ao segundo h1?
    Acho que não né T_T

    Responder
  28. jhon

    No caso, eu posso utilizar css, normarmente nessas tags… EX: tenho uma imagem no blog, e escrevi o nome do blog nela, e num que ria escrever com h1 por causa da customização, entaum eu posso utilizar css para deixar o com font “0″ ??? … seria indexado esse h1 normalmente???

    Athe +++…

    Responder
    • Mauricio Petry

      Creio que deixar com fonte 0 será considerado “black hat seo” e os buscadores poderão punir as suas páginas…

      Caso você queira utilizar H1, H2, etc… e definir tamanhos diferentes do padrão dos browsers é aceitável… (16px, 18px, 24px, etc…) e fará bastante sentido aos usuário do site.

      Responder
  29. André Buzzo

    Boa tarde pessoal!

    Uma dúvida…seria “passível de punição”, se dentro do meu texto, eu utilizar um H1 para o título, normalmente, e no css, estilizar a tag h2 com uma classe, para que fique na mesma proporção do conteúdo, e marcar diversas palavras que entendo como “chaves” para exibição?

    Responder
  30. Leandro Freitas

    Muito bom o post!
    Bom tenho uma duvida:

    Logotipo – h1

    depois eu coloco o ‘nome de cada pagina’, por exemplo, se a pessoa entrou em contato abaixo do menu vai ter la o nome ‘Contato’ em seguida o ‘titúlo da página ou conteudo’…
    a pergunta é na maioria das vezes o titúlo da pagina é mais ‘importante’ que o ‘nome da página’, ai eu uso h3 no ‘nome da pagina’ e h2 no ‘titulo da página ou conteudo’ ou ao contrario?

    Responder
  31. julianoeb

    No conteúdo aqui apresentado é falado: “É importante fixar que cada página deve conter um, e apenas um “. Por tanto me surgiu a seguinte dúvida: É permitido usar mais de uma tag H1 em um site? Fui procurar no youtube e Matt Cutts respondeu minha pergunta: http://www.youtube.com/watch?v=GIn5qJKU8VM . Por tanto como fica a situação então, Em que casos mais exemplificados eu poderia usar MAIS de uma vez a tag H1?

    Responder
  32. Jardel Xavier

    Olá ótmo debate sobre os h’s eu costumo utlizar somente 1 H1 para cada página, faço isso colocando-o no logo ou no nome da página, apartir daí construo a hierarquia seguindo a ordem de h2, h3…h6. Obrigado pelas dicas.

    Responder
  33. Willian Marinho

    Olá pessoal. Gostei do artigo, é bem informativo, mas ainda fiquei com uma dúvida que está me confundindo bastante: o uso das heading tags é válido apenas nas descrições das páginas, ou eles são usados em posts também (no caso de blogs)? Se sim, como os uso? Pelo que eu pude entender, o uso das tags difere do uso das meta tags como title e content, por exemplo.

    Responder
  34. Samuel

    Uma dúvida de quem não programa nada. Trabalho com conteúdo de sites: é possível fazer um gerenciador e eu inserir essas tags por ele? Por exemplo: no gerenciador eu coloco a tag e ela vai para o HTML?
    Obrigado!

    Responder
  35. Rafael

    Bom dia, estou com uma dúvida e gostaria de saber uma coisa:

    Posso colocar o titulo assim?
    Minha Empresa. Titulo com palavras chave

    Ou o ideal é colocar assim?
    Titulo com palavras chave

    Tem alguma diferença (prejudicial) entre os dois para o google?

    Responder
      • Rafael

        Na verdade, falei “titulo” mas quis me referir ao H1. O H1 deve possuir o asunto da página, certo? Colocar pequenas informações como o exemplo que citei: “Minha empresa. Titulo com palavras chave”, prejudica de alguma forma?

        Obrigado!

        Responder
  36. Antonio Carlos

    como iserir a tag h2 sem auterar o tamanho da fonte?

    pois o uso destas tags deixa as letras muito grande como eu faço para diminuir a fonte da tag h2 no momento que estiver escrevendo um post.

    quero deixar a fonte da h2 do tamanho da h3 isso é possível?

    Responder
  37. João Gabriel

    Olá pessoal.

    Sobre a tag H1, continuo durante dias com uma dúvida. Colocar a tag H1 dentro de um breadcrumbs é uma boa?

    Por exemplo:

    Tem uma página de um produto e nesta página usei a H1 no nome do produto, depois tenho sub-páginas dentro dela, então a sub-página passa a ter uma importância maior:

    Celulares > iPhone 5 (“colocaria meu H1 no iPhone 5 dentro do Breadcrumbs?”), ou continuo usando meu H1 no título da página, repetindo para as demais?

    Obrigado! :D

    Responder
  38. Cascel

    Bom dia, uma dúvida, se tiver uma loja a H1 vai no logo H2 talves nos links do topo, algo assim:
    -h1-logo da empresa-/h1-
    -h2-link1-/h2–h2-link2-/h2–h2-link3-/h2-

    gostaria de saber se -h3- e -h4- poderiam se misturar por ficarem nos produtos exibidos abaixo:
    ex:
    -h3-produto 1-/h3-
    -div-foto1-/div-
    -h4-informativo-/h4-
    =======================
    -h3-produto 2-/h3-
    -div-foto2-/div-
    -h4-informativo-/h4-
    é uma dúvida que não consegui resolver ainda, obrigado.

    Responder
  39. Antonio

    Olá, gostaria de saber se essas tags ainda são consideradas com muita importancia pelo buscador?

    Obrigado

    Responder
  40. Robson Luís

    Olá, Joaquim.

    Criei um site a pouco tempo e estou enrolado em relação as tags H1. Fiz uma busca através do Webmaster do Bing e foram encontradas H1 duplicadas em quase todas as páginas. Li seu artigo mas, confesso que não entendi muito e não entendo muito de SEO. O problema é que eu não sei como resolver o problema. Como encontrar essa duplicação?
    Por favor me ajude.

    Responder
  41. Rafael Fagionato

    Vi algumas pessoas assim como o Cascel querendo inserir o logo da empresa no h1, porém este não é o lugar correto. Pense no caso de uma papelaria virtual e na página de TESOURAS ESCOLARES, deverá usar o h1 como sua melhor chance de ser encontrado pelo buscador e o h2 sua segunda melhor chance e sucessivamente, assim como o conjunto de h’s a sua melhor chance de todas. Supondo que os termos abaixo seriam os melhores após uma pesquisa.

    (h1) Tesouras de Criança (/h1)

    (h2) Tesouras com Ponta Redonda (/h2)
    (p) As tesouras com ponta redo…. (faça um texto “seu”) (/p)

    (h2)Tesouras com Zig-Zag(/h2)
    (p) Tesouras com corte em Zig-Zag para… (faça um texto “seu”) (/p)

    Veja que o objetivo além de se ter um texto coerente é que quando alguém busque por “tesoura de ponta redonda para criança”, seu site seja encontrado, caso você coloque no h1 o logo da sua empresa e no h2 um link ou algo que não faça sentido para quando alguém vá fazer uma busca, terá perdido sua chance e quem fez algo próximo disso terá o fluxo de visitantes que todos aqui buscam.

    Responder
  42. Rafael Franke

    Boa tarde. Quantos H2 podemos inserir em casa página? Algo semelhante ao H1, que é apenas h2 por página? Obrigaod.

    Responder

Deixar um comentário

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>