Como corrigir os erros das heading tags do Blogger? - * Blog Elaine Gaspareto * Como corrigir os erros das heading tags do Blogger? - * Blog Elaine Gaspareto *

Como corrigir os erros das heading tags do Blogger?

Publicado em 08/01/2018

Como corrigir os erros das heading tags do Blogger?

No tutorial que publiquei mostrando como colocar no blog um cabeçalho que ocupe a largura total da página eu mencionei que, no Blogger, há um erro nos templates nativos (e em quase todos os que já vi baixados da internet) no que se refere às heading tags do cabeçalho.
Não, querido leitor, não estou falando grego rsrsr
Vou explicar o que são as heading tags e porque é importante corrigir os erros para que os robots dos mecanismos de busca consigam ler seu conteúdo e posicionar bem seu blog nos resultados de pesquisa.
Vem comigo!

O que são as heading tags e qual a importância delas?


As heading tags de título, ou de cabeçalho se preferir, são um fator extremamente importante no ranqueamento de um blog ou site junto aos mecanismos de pesquisa como o Google e Bing, por exemplo.
Os robots de busca Google e similares entendem seis níveis de “heading tags” para ler a estrutura de um texto.
Essas heading tags vão de H1 (a mais importante) até H6.

Heading tag H1

A tag H1 se refere ao título do post e ao título do blog. E só deve haver uma tag H1 por página.
E é aí que a coisa complica pois o título do blog se repete nas páginas dos posts, criando assim um erro de haver 2 tags H1 por página. Vamos falar disso abaixo e mostrar como corrigir.

O ideal (é o que vamos fazer daqui a pouco) é ter a seguinte estrutura:
✔ Nas páginas de postagens, ela deve ser utilizada para o título da postagem.
✔ Na página principal do seu blog, reserve-a para o título do seu blog.
Neste caso, os títulos das postagens receberão a tag h2.

A tag h1 – a mais importante e relevante – deve ser reservada para o título mais importante da página que está sendo visitada; na home ela é reservada ao título do blog e nas páginas internas (do post) ela é reservada ao título do post.

Heading tag H2

A tag H2 diz respeito ao título do post na home do blog. Ela pode se repetir sem problemas (cada post tem seu título, claro), sendo que o Google a interpreta como a segunda mais importante da página, abaixo apenas da H1.
Por isso os títulos dos posts são tão importantes e precisam ser bem pensados para entregar o conteúdo do post.

Heading tag H3

A tag H3 diz respeito aos subtítulos.
Deixe h3 para os subtítulos de seus posts, esses sim são importantes.
Um exemplo de subtítulo? O que escrevi acima:
O que são as heading tags e qual a importância delas?
Além de organizar visualmente o meu artigo o intertítulo (é a mesma coisa que subtítulo) a tag H3 diz aos robots de busca a hierarquia do post, facilitando sua indexação e ranqueamento.

Heading tag H4 e demais

O ideal é que elas sejam usadas nos títulos da sidebar e na data dos posts pois esses ítens não possuem nenhuma relevância para o Seo do blog.

Entendeu o que são heading tags e quais suas funções e importância?
Agora veja os erros que elas apresentam nos templates do Blogger!


Erros nas Heading tags do Blogger


No Blogger, por padrão, a tag H1 é aplicada ao cabeçalho, desde que não seja usada imagem ao invés de título.
Mas todo mundo, praticamente, usa imagem ao invés do nome do blog, os logos como costumamos chamar.
E aí a tag H1, tão importante, desaparece.

Quando a gente coloca uma imagem no cabeçalho do blog e configura essa imagem para ser exibida ao invés do nome do blog estamos, automaticamente, eliminado o cabeçalho do ponto de vista do SEO.
Isso é fatal para o blog em termos de SEO pois a estrutura correta do blog passa pelas heading tags, ou tags de cabeçalho: H1, H2, H3, H4, etc...
Complicou, né?
Sim, mas nem tanto.
Vou te ensinar como corrigir esse erro nas tags de cabeçalho e deixar seu blog certinho nesse aspecto, melhorando assim o SEO de seu blog.

Também acontece, no Blogger, dos títulos da sidebar usaram a tag H2, que é a segunda mais importante do blog.
Isso é errado e ruim, pois essa tag deve ser usada apenas nos títulos dos posts.
Vamos corrigir isso também!
Também vou mostrar como corrigir as heading tags dos títulos da sidebar.
Vamos trabalhar?


Como saber se minhas heading tags estão corretas?




Quer checar se suas heading tags estão corretas? Acesse:


Na página que abrir coloque o endereço de seu blog, marque a caixinha Não sou um robô e clique em Perfome check.
E veja o resultado!
O meu está certinho, cada heading tag exatamente onde deveria estar.
Faça o teste, primeiro com meu endereço, depois com o de outro blog qualquer e veja a diferença.
Aí aplique em seu blog as correções que ensino a seguir e refaça o teste.
Você verá que suas heading tags foram corrigidas.


Como corrigir problemas de heading tags no Blogger


Para começar sugiro que você crie um blog de testes, aplique nele seu template "oficial" e faça ao menos 2 posts bem feitos, com marcadores, título, imagem, etc.
Nunca faça os procedimentos que vou ensinar diretamente em seu blog real, tá?
Precaução tomada?
Abra a página com os códigos do tutorial:


Copiar os códigos


Corrigir as heading tags do cabeçalho (nome do blog, tag mais importante da home)


Então vá até o painel do blog onde vamos trabalhar e clique em Tema.
A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Digite <div class='titlewrapper'> e tecle Enter para localizar.
Aparecerá um código assim:

<div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>

Substitua-o pelo CÓDIGO 1.
Salve.

Caso você use imagem no lugar do cabeçalho só esse passo não basta, precisamos realizar mais um.
Localize esse código (está pertinho de onde acabamos de editar):

<!–Show the image only—>

Após esse trecho haverá uma linha <div id=’header-inner’>.
Abaixo dessa linha abra um espaço e cole o CÓDIGO 2.
Salve.
Acabamos a primeira parte e corrigimos os erros da heading tag H1.

Corrigir as heading tags dos títulos dos posts (segunda tag mais importante do blog)


Agora vamos corrigir a heading tag dos títulos dos posts.
Na barra de busca do template digite <h3 class='post-title entry-title' itemprop='name'> e localize.
Será um trecho assim:

<h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>

Ele se repetirá 2 vezes, precisamos alterar ambas, ok?
Localizou?
Substitua pelo CÓDIGO 3.
Faça isso em ambas as ocorrências, tá?
Salve.

E agora é aquele momento do desespero pois você verá que a formatação dos títulos dos posts está toda bagunçada...
Mas calma, vamos arrumar!

Corrigir a personalização dos títulos do post


Localize em seu template a área responsável pelo título das postagens.
Em geral começa assim:
h3.post-title {

Aí é só trocar o h3 por h2, em todas as ocorrências dele na área do título do post e salvar.
Importante:
Depois de trocar h3 por h2 copie o primeiro bloco de código, que será mais ou menos assim (depende do seu template e da personalização de seus posts):

h2.post-title {
font: $(post.title.font);
color: $(post.title.text.color);
}

Copiou?
Cole acima do primeiro bloco de código  e troque h2 por h1. Salve.
Isso vai fazer com que a formatação do título do post seja aplicada também as páginas internas, então não esqueça!

Corrigir as heading tags da sidebar (terceira tag em nível de importância)


Estamos quase no fim!
Vamos ajustar agora as heading tags da sidebar, para que a tag H2 só seja usada no post e não nos títulos da lateral.
Vamos lá?

Localize em seu template a área que comanda os títulos da sidebar.
Será algo mais ou menos assim:

 h2 {
font:$(widget.title.font);
color: $(widget.title.text.color);
}

Como já definimos que a tag H2 será usada apenas nos títulos dos posts na home do blog precisamos dar aos títulos da sidebar outra tag, que pode ser H3 ou H4, não faz diferença já que em termos de SEO esses títulos não tem nenhuma relevância.
Sim, para SEO não vale nada os títulos da sidebar!
Então vamos usar h4, ok? E deixar h3 para os subtítulos dos posts.

Troque h2 por h4 e salve. Repita isso em todas as ocorrências de h2 que forem relacionadas à sidebar.
Exemplo: encontrou .sidebar .widget h2? Troque o h2 por h4 e assim por diante.

Simples, né?
Mas não é só isso, tem a parte chata!
No alto do código-fonte de seu template tem uma setinha escrito Ir para um widget.
Clique nela e vá de widget em widget, e localize o comando do título de cada um.
Estará assim, normalmente:

<h2 class='title'><data:title/></h2>

Troque o h2 por h4 em todos os elementos de pagina, deixando assim:

<h4 class='title'><data:title/></h4>

E não esqueça: sempre que adicionar algumgadget novo tem que ir ao código-fonte e fazer esse ajuste, ok?


Dica extra: não se desespere!


Sim, é isso mesmo! Sem desespero e sem ficar com medo!
Não se desespere.
O tutorial é grande porque eu sou detalhista, mas é basicamente localizar e substituir.
Leia com atenção, faça antes em um blog de testes e tenha confiança em mim e no que eu digo: com paciência e atenção você vai conseguir!
E se tiver alguma dúvida diga nos comentários e eu ajudo no que for possível.
Falou, pessoa linda?


Leitura recomendada muito, muito importante:





E finalmente acabamos!
Sim, um baita tutorial, em todos os sentidos.
Levei uma vida pra conseguir entender, testar em diversos modelos, ajustar os erros do código, elaborar esse post e revisar tudo.
Então, nada de preguiça na hora de fazer em seu blog, tá?
Dá trabalho, mas se você quer um blog otimizado e completinho tem que fazer.
Assim o Google vai amar seu blog e mostra-lo para as pessoas.
Não é demais?





19 comentários via Blogger
comentários via Facebook

19 comentários:

  1. Elaine, não sei porquê no meu computador a mardita tecla de busca do termo não funciona. Imagina uma pessoa cegueta tendo que ler mais de 3 mil linhas de código? rsrs

    A teimosia é o que me guia, portanto, consegui fazer uma boa parte do tutorial no blog de testes. Minha pergunta é: "related posts", ou seja, os posts relacionados... é um widget também, certo? Então preciso trocar o h2 por h4 nele também. Ou não?? rsrs

    Também perdi a data do post, não na home, mas na página interna do próprio post. Estou procurando a bendita. Ai ai... rsrs

    Bora lá que falta pouco.

    beijossssss

    ResponderExcluir
    Respostas
    1. Paula, como assim a busca não funciona?
      Pare o mouse dentro da caixa de código e aí tecle Ctrl+F
      Vai aparecer a barra de busca, num é possível isso rsrrssr

      Sim, precisa trocar. Ele não é bem um widget, mas se tem h2 precisa trocar.
      A data do seu blog é como a minha, ou seja, ela vai reaparecer rsrsrsr assim que concluir tudo...
      Qualquer coisa me grita!

      Excluir
  2. Oi Elaine!!! Obrigada por compartilhar! Ainda continuo na saga de trocar os h2 por h4!!! Tô quase no final, mas começo a ter visão poá (cheia de bolinhas pretas!) A míope aqui tá nestes ajustes deste sábado!!! kkkk mas tá saindo!

    ResponderExcluir
    Respostas
    1. rsrsrs sim, essa é a parte trabalhosa, e sempre que incluir novo gadget tem que trocar a tag h2 pela h4
      beijossss

      Excluir
  3. Voltei!!! Prontinho!!! Consegui!!! \0/ \0/ Tudo no seu devido lugar!!! Valeram as dicas! Beijinhos!

    ResponderExcluir
  4. Elaine isso vale pra quando formos escrever posts? tem que colocar a heading tag correspondente no html???

    ResponderExcluir
    Respostas
    1. Não, não tem pois essas heading tags são definidas no código fonte do template.
      Para os posts há outras otimizações que podemos fazer, dá uma olhada em posts aqui do blog; tem uma chamado Técnicas de SEO- como otimizar os posts do blog
      beijosss

      Excluir
  5. Oi Elaine, eu consegui editar todos no template Clarisse, menos o seguidores do blog. Fiz o mesmo procedimento, mas não deu certo.
    Você pode me ajudar?
    Beijos

    ResponderExcluir
    Respostas
    1. Aline, não tem jeito. Os seguidores não aceitam a alteração, o ideal é deixa-los sem título na sidebar...

      Excluir
  6. Olá tudo bem? Eu fiz em um blog de teste e deu certinho. Porem no que eu uso que são desses modelos novos do blogger não achei os trechos que vc citou pra trocar. POrque aconteceu isso... No blog de etstes fiz com o backup do template que uso... obrigado

    ResponderExcluir
    Respostas
    1. Adhil, nos novos templates não funciona, eles não aceitam personalização via código fonte....

      Excluir
  7. Elaine, querida! Só você pra explicar tudo tão detalhadamente e de forma tão didática. Deu trabalho porque era muita coisa, mas consegui. Muito obrigada :)

    ResponderExcluir
  8. Oi Elaine! Tudo bem?

    O único gadget que não consigo mudar para h4 é o Seguidores pois mesmo alterando no HTML ele continua aparecendo como h2, tem algo que possa fazer para o gadget de Seguidores mudar para o h4?

    Obrigada pela ajuda Elaine. :)

    ResponderExcluir
    Respostas
    1. Sammysam, o gadget Seguidores não aceita personalização.
      A minha dica é fazer como eu fiz e deixar sem título pra não destoar dos demais...

      Excluir
  9. Oiii.. muito obrigado... me ajudou muito..... QUe Deus te abençoe

    ResponderExcluir
  10. Olá!
    Antes de qualquer coisa, obrigado pelas dicas.

    Consegui melhorar 97% (rss) as tags heading no meu blog.

    Só não deu certo ficar a mesma cor no título do post na página do post e na home. Coloquei o código css (h1.post-title) no local que você mostrou, mas não deu certo. Teve um ou dois widgets que continuou com a tag H4, mas o resto deu certo.

    Muito obrigado mesmo!

    ResponderExcluir
  11. Prestes a terminar de personalizar o template, quase faço a besteira de divulgar o blog com alguns erros das headings tags kkkk. Então essas dicas vieram em boa hora, muito obrigada!

    Só quero tirar uma pequena dúvida: Tem algum problema se eu usar alguma heading tag em ordem diferente? Por exemplo, a função que eu coloquei pro h5 (categoria) é realmente menos relevante que h3 (subtítulo), daí posso começar o post já usando com h5, e depois uso h3, quando eu precisar? Ou teria que trocar?

    É que eu gostaria de distinguir a posição da categoria e das tags dentro do post, como é possível no Wordpress, MAS não no Blogger. Aí eu teria que fazer manualmente, né? Espero que tenha entendido o que tô querendo fazer rs

    Desde já, obrigada!
    Naryana

    ResponderExcluir
    Respostas
    1. Nos posts, em geral, não colocamos categorias. Elas são inseridas via Marcadores. Se adicionar palavras ao texto com a intenção que seja tags ou marcadores elas não será reconhecidas assim, serão lidas pelos robots como parte do texto, independe de qual heading tag usar...
      De todo modo, sim, pode alterar a ordem, mas sabendo que as palavras não será lidas como tags e sim como parte do texto.

      Excluir
    2. Entendi. O blog é de estudo, então seria bacana diferenciar categorias e tags no post. E eu não vou largar o Blogger tão cedo rs. Então, vou fazer isso de modo que não me atrapalhe nas trocas de template futuramente.

      De qualquer forma, obrigada!

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…