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.
(11) 3889-2333
Onde exatamente existe essa opção de validar as tags heading no plugin Web Developers?
[ Responder este comentário ]
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 este comentário ]
@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 este comentário ]
Mas estranho, pois segundo a W3C isso não é uma regra.
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
Posso usar mais de um h2 na mesma seção ?
[ Responder este comentário ]
Se faz sentido usar, então sim! =)
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
Tem como passar um tutorial de como otimizar as ‘tags heading’ para wordpress?
Muito bom o texto… Vlw!
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
Olá,
eu coloquei assim
titulo do post em H1
conteudo do post h2
[ Responder este comentário ]
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 este comentário ]
E quanto ao HTML 5, agora é permitido mais de 1 H1.
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
até concordo mas que o google processa bem caso estejam fora de ordem isto ele consegue. mas por questão de organização e por vias das dúvidas mantenha uma sequencia lógia.
de um aolhada neste video http://www.youtube.com/watch?v=7RdiisprhXk&feature=player_embedded
att rovere
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
Outra coisa que esqueci de perguntar, o h1 pode ser o logotipo?
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
se o texto tiver mais de 7 subtitulos??
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
Sim, sem dúvidas.
[ Responder este comentário ]
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 este comentário ]
Olá Rafael. No mérito dos títulos, este artigo deve te ajudar melhor: SEO na TItle Tag. Vale a pena conferir.
[ Responder este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
Olá, gostaria de saber se essas tags ainda são consideradas com muita importancia pelo buscador?
Obrigado
[ Responder este comentário ]