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
- A tag <h1> deve um resumo do que o usuário vai encontrar no texto;
- A tag <h2> deve abordar um conteúdo sub-seqüente do conteúdo da página;
- 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
- 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.
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!
Leandro Riolino
Natural de Itajubá – MG, em 2003 ingressou no curso de Ciência da Computação na UNIFEI. No começo de 2007 até o fim do mesmo ano fez estágio na Biblioteca da UNIFEI, onde trabalhou com HTML e CSS. Ainda no meio de 2007 até meados de 2008, estagiou na EAD – UNIFEI aonde pode trabalhar com PHP, Mysql, POO, HTML e CSS, deu manutenção nos computadores e servidores deste instituto, alem de ter obtido um conhecimento básico de LINUX. Desde meados de 2008 integra a equipe de desenvolvimento web de e SEO do MestreSEO.
25 de novembro de 2008 às 3:35 pm
Onde exatamente existe essa opção de validar as tags heading no plugin Web Developers?
[Responder]
25 de novembro de 2008 às 7:30 pm
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]
25 de novembro de 2008 às 7:39 pm
@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]
26 de novembro de 2008 às 11:32 am
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]
26 de novembro de 2008 às 1:51 pm
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]
28 de novembro de 2008 às 12:39 pm
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]
28 de novembro de 2008 às 12:46 pm
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]
01 de dezembro de 2008 às 7:55 am
Aparentemente as Tags Heading são usadas pelo robot como um sumário, e como um sumário você tem varias possibilidades de exposição da hierarquia, mas quanto mais próximo do padrão comum melhor será o entendimento.
Durval – http://www.hotmastersound.com.br
[Responder]
01 de dezembro de 2008 às 12:48 pm
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]
03 de dezembro de 2008 às 6:40 pm
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]
01 de fevereiro de 2009 às 11:53 pm
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]
02 de fevereiro de 2009 às 8:08 am
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]
02 de fevereiro de 2009 às 8:40 am
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]
02 de fevereiro de 2009 às 10:41 am
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]
02 de fevereiro de 2009 às 11:53 am
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]
02 de fevereiro de 2009 às 11:56 am
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]
17 de março de 2009 às 8:50 pm
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]
08 de junho de 2009 às 9:24 am
Posso usar mais de um h2 na mesma seção ?
[Responder]
Frank Marcel disse,
agosto 17th, 2009 às 10:55 am
Se faz sentido usar, então sim! =)
[Responder]
23 de julho de 2009 às 2:48 am
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 disse,
agosto 17th, 2009 às 10:59 am
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]
15 de agosto de 2009 às 7:42 pm
Matt Cutts afirma que podemos quebrar a Hierarquia da Tags. H1 depois H2 depois novamente H1. Não há problema, desque que seja feito de acordo com a lógica da escrita. Precisa de uma H1 aqui? Então pode usar.
http://www.youtube.com/watch?v=2iLG34tgEDY&feature=channel_page
Apenas não pode abusar.
Google usa muito a lógica das coisas.
[Responder]
Frank Marcel disse,
agosto 17th, 2009 às 11:07 am
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]
16 de setembro de 2009 às 10:58 am
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]
06 de novembro de 2009 às 11:46 am
Tem como passar um tutorial de como otimizar as ‘tags heading’ para wordpress?
Muito bom o texto… Vlw!
[Responder]
07 de novembro de 2009 às 9:17 am
Mestre SEO,
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 de novembro de 2009 às 10:07 pm
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 disse,
novembro 23rd, 2009 às 12:29 pm
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]
25 de novembro de 2009 às 12:54 pm
Olá,
eu coloquei assim
titulo do post em H1
conteudo do post h2
[Responder]
Frank Marcel disse,
fevereiro 11th, 2010 às 9:54 am
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]
06 de fevereiro de 2010 às 5:05 pm
E quanto ao HTML 5, agora é permitido mais de 1 H1.
[Responder]
Frank Marcel disse,
fevereiro 11th, 2010 às 9:56 am
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]
13 de abril de 2010 às 11:05 am
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 disse,
abril 13th, 2010 às 1:48 pm
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]
03 de maio de 2010 às 5:38 pm
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]
03 de julho de 2010 às 10:06 am
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]