Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Otimização Postagens SEO Vanessa S.

Como usar as Heading Tags no Blogger (SEO)

Heading Tags no Blogger ou Tags de Cabeçalho, são tags utilizados para destacar títulos e sub títulos de uma página.
Elas servem ??para diferenciar o título de uma página a partir do resto do conteúdo e tem um impacto tanto no SEO, quanto na usabilidade do seu blog.

As Heading Tags( Tags de cabeçalho) informam aos mecanismos de busca qual é o conteúdo que tem mais importância na página.

A Heading Tag mais importante é a tag h1 e a menos importante é a tag h6.

A importância das Heading Tags

O Google utiliza a busca através das Heading tags para determinar qual é o principal assunto abordado em uma página, o que é mais importante e o que é menos importante.

As páginas devem obedecer uma hierarquia das Heading Tags, e essa hierarquia não pode ser quebrada.
se você pular qualquer um dos números de tags a estrutura do título será quebrado, e isso não é ideal para SEO on-page.

hierarquia das heading tags

Pense no seu blog como um jornal: os títulos são as manchetes do jornal.
A tag H1 seria a manchete, e a tag h2 seria o subtítulo e as demais tags subsequentes são através H6.

Cada página deve conter apenas uma tag H1, e é importante que esteja sempre focando na palavra-chave principal.
Embora a tag h2 não seja a Heading Tag principal, seu uso dentro do texto é de suma importância, são um excelente recurso para incluir palavras-chave complementares.
A Tag h2 pode ser usada quantas vezes quiser dentro do texto, assim como as demais tags h3. h4, h5 e h6, mas sempre obedecendo a hierarquia.
Lembre-se: A ordem de h1 até h6 não pode ser misturada.

Como usar a Heading Tags no Blogger

Na maioria dos templates do Blogger, esta estrutura das Heading Tags estão desorganizadas, por isso é importante que você faça uma estrutura dentro do texto que está escrevendo.
Desta forma você pode indicar um texto como “tag de cabeçalho” e o mecanismo de pesquisa saberá que o texto escolhido representa um resumo do que foi escrito.

Através do próprio painel de postagem do blogger, você pode indicar um texto como sendo o de maior importância, basta destacá-lo no “Editor de postagem“.

heading tags no blogger

Veja abaixo a lista de heading tags que estão diponiveis no editor de postagens (h2,h3 e h4).

formato-titulo

<h2>Título - H2</h2>
<h3>Subtítulo - H3</h3>
<h4>Título secundário - h4</h4>

Lembra que eu citei acima sobre a importância da tag h2?
Use-a para incluir palavras-chave complementares dentro do seu texto.

Para indicar um texto como palavra-chave, no modo “escrever”, basta destacá-lo no “Editor de postagem” e clicar em “Título” <h2>.

Agora você poderá indicar um texto como “Subtítulo” <h3> ou “Título secundário” <h4> na barra de ferramentas.

Se você clicar no “modo HTML” você vai verificar o código HTML adicionado.

Personalizar Heading Tags com CSS

Geralmente, no blogger, a tag h2 refere-se também a data da postagem e ao título dos widgets, portanto, poder ser que ao atribuir a tag h2 como “título” dentro de seu post, a fonte fique com a mesma formatação css referente a data ou aos títulos de seus widgets. Veremos como aplicar estilos somente as heading tags
das postagens, personalizando tamanho, cor e fonte para cada heading tags através de CSS.

heading tags css

Acesse o painel do Blogger e clique no menu “Modelo“, em seguida clique no botão “editar HTML”.
No editor HTML do seu template, clique em qualquer lugar dentro do painel e em seguida use as teclas Ctrl+F e procure pela tag ]]></b:skin>

Dica: Para facilitar sua busca, se ao lado desta tag tiver aparecendo aquela setinha preta, clique nela.

Cole o código CSS a seguir logo ACIMA da tag ]]></b:skin>


/*----estilos para heading tag h2-------*/
.post-body h2 { 
color:#f01a1a; /* edite cor da fonte */
font-size: 26px;  /* edite tamanho da fonte */
}

/*----estilos para heading tag h3-------*/
.post-body h3 {  
color: #25991C; /* edite cor da fonte */
font-size: 20px;  /* edite tamanho da fonte */
}

/*----estilos para heading tag h4-------*/
.post-body h4 {   
color:#0080ff; /* edite cor da fonte */
font-size: 16px;   /* edite tamanho da fonte */
}

 

Conclusão

Existem várias técnicas para ajudar a melhorar otimização para mecanismos de pesquisa. Já publicamos aqui um artigo com dicas simples para melhorar o SEO do seu blog e também a Ferramenta SEO Blog. Recomendo que confiram o artigo, escrito pelo Gustavo Freitas e experimentem a Ferramenta SEO criada por ele.
Espero que este tutorial ajude a melhorar os seus artigos no Blogger, no quesito SEO.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

9 Comentários

  1. Vanessa gostei muito do artigo. Mas gostaria de saber uma coisa que procuro muito na net esses dias. Tem como personalizar com css para que a tag fique abaixo da postagem, como fica o nome do autor, data e comentários?

  2. Bailon Pinto disse:

    Obrigado pela dica, por enquanto uso o Blogger, mas em breve irei pra plataforma do WORDPRESS.

    Creio que não tenha estes problemas e seja mais fácil o seu uso.

    Forte abraço!

  3. Fabiano Souza disse:

    Excelente artigo, porém não consigo separar os posts da página inicial das páginas de posts. Ambos utilizam o mesmo trecho de código. Portanto ou ficam os dois com H1 ou ficam os dois com H2. Estou deixando com H1, mas gostaria de deixar os títulos da página inicial em H2 e deixar a página mais otimizada.

    Como fazer?

    Obrigado.

  4. Paula Mello disse:

    Eu já mexi várias vezes nessa bendita H1 dentro do código do meu blog. No momento ela está direcionada para o título dos posts, como foi comentado, os templates nativos do blog não trazem essa definição. Minha pergunta é: isso basta ou eu tenho que colocar a h1 manualmente no título de cada postagem que eu faço? A formatação ensinada aí em cima para as tags h2, h3 etc tb serve para a h1?

  5. Vamos falar sobre um dos pontos que facilitam a leitura tanto das pessoas quanto dos robôs: a tag heading ou os títulos e subtítulos do conteúdo de uma página.

  6. schreiyarai ? disse:

    Ótimo post, como sempre. As Heading Tags são importantes não só para SEO, mas também como para a própria organização visual do conteúdo dos posts. Eu mesma, às vezes costumo tratar de dois ou três assuntos no mesmo post, e a adição de heading tags na última manutenção que fiz me deu uma mão na roda!
    A respeito dessa questão de o Blogger usar h2 para cabeçalhos de data e títulos dos widgets, o ideal seria “reformar” o template inteiro, fazendo com que esses dois usassem h5 e h6, já que a data e os títulos dos widgets pouco acrescentam às páginas em si.
    Outra coisa que se comenta bastante é o uso da tag h1, que por padrão o Blogger coloca ~no título do blog~, quando o ideal seria que esta fosse utilizada no título dos posts.

    Vanessa, eu te mandaria um Guest Post com um tutorial ensinando a fazer essa “reforma”, mas acho que seria mais interessante um projeto maior. Há uma forma de eu entrar em contato contigo diretamente para eu te dar a sugestão que tenho em mente?
    Obrigada!

  7. Como sempre, mais uma excelente dica no Mundo Blogger! Quando criei o meu blog,mal sabia o que fazer, visando otimizações e várias outras dicas sobre SEO e HTML, pesquisando na internet, achei o Mundo Blogger, com várias dicas, era tudo que eu precisava! O blog para quem tem blog, e tem o desejo de torna – lo um sucesso! Abraço e sucessos a todos!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.