novembro 11, 2024
Chicago 12, Melborne City, USA
Blogger SEO

Como corrigir problemas de heading tags no Blogger

Como corrigir heading tags no BloggerVocê sabia que os templates do Blogger normalmente não vem com as heading tags otimizadas?

Isso pode lhe dar desvantagens em termos de SEO se a estrutura de seus concorrentes estiver correta.

Para corrigir isso, é necessário realizar alterações no HTML do seu template, de forma a respeitar a estrutura sugerida pelo Google.

Você verá neste artigo como realizar você mesmo essas correções.

Introdução

As heading tags definem a estrutura de títulos que seu blog e suas postagens têm.

Ela define uma hierarquia de tags que vai desde a h1 (mais importante) até a h6, permitindo mostrar ao Google e aos seus visitantes quais são os tópicos mais importantes em suas páginas.

Se você precisar de mais detalhes sobre o assunto, sugiro a leitura do artigo Uso de heading tags no Blogger.

O problema é que os templates do Blogger normalmente vêm com essas tags desorganizadas, dando destaque a seções que não as merecem (como a data das postagens e o número de comentários, por exemplo).

Como exemplo, mostrarei neste artigo o procedimento passo a passo para otimizar o template “Simples”, que é disponibilizado pelo Blogger, organizando sua estrutura de heading tags.

Você poderá adaptar os procedimentos para seu próprio template.

Como corrigir heading tags no Blogger

Passo 1 – Analisar a estrutura do template

O primeiro passo na análise é executar a verificação da estrutura de heading tags do template.

Você só precisará executar os demais passos caso seja encontrado algo errado.

A forma mais simples – e que já mostrei no artigo Uso de heading tags no Blogger – e utilizar a ferramenta Document Outline, da Mestre SEO.

É interessante você fazer duas análises: uma da página inicial de seu blog e outra de uma postagem sua.

Como exemplo, mostro abaixo o resultado da análise do blog http://gerenciandoblogseo.blogspot.com.br, que utilizarei neste tutorial.

Você pode clicar nos links para visualizar o resultado.

Página Inicial
Como corrigir heading tags no Blogger
Página de Postagem
heading-tags-corrigir-template-blogger-20

Embora não haja falhas de estrutura (tags faltantes) há diversos pontos que merecem atenção, marcados em vermelho.

Em vermelho estão itens que deveriam ter importância menor e em azul o que deveriam ter importância maior.

Passo 2 – Crie um blog de testes e aplique nele o seu template

Este passo é importantíssimo para o procedimento.

Não tente fazer os procedimentos diretamente em seu blog oficial, pois eles são complexos e, feitos de forma errada, podem prejudicá-lo em vez de ajudar.

Caso ainda não tenha um blog de testes, veja no artigo Como criar um blog de testes no Blogger como proceder.

É essencial aplicar nesse blog o mesmo template que você usa em seu blog oficial (o que também é mostrado no artigo).

Por fim, também é importante criar nele algumas postagens ou mesmo copiá-las de seu blog principal.

Para evitar problemas de duplicidade de textos, é importante que esse blog esteja configurado para não ser encontrado pelo Google (mostro também como fazer isso no artigo citado no parágrafo anterior).

Alerto novamente: todos os procedimentos abaixo devem ser feitos inicialmente em seu blog de testes!




Passo 3 – Elimine as heading tags de todos os elementos desnecessários

Como expliquei acima, as “heading tags” só fazem sentido em títulos e subtítulos do seu blog e suas postagens.

Por isso, nas faz sentido deixá-las em elementos como títulos de gadgets, datas e outros.

Para facilitar, copie o HTML do template do seu blog e cole-o em um bom editor de textos (como o Notepad++).

Se você não sabe como fazer isso, veja no artigo Como editar o HTML de seu template no Blogger.

O procedimento dependerá agora de uma análise manual sua:

1. Procure inicialmente pelo termo <h1 no HTML do seu blog. Se estiver utilizando o Notepad++, basta utilizar as teclas CTRL+F para fazer isso.

Como corrigir heading tags no Blogger

2. Verifique todos os pontos em que ele ocorre no seu template.

3. Em cada ponto encontrado, avalie se faz sentido a sua existência. Se não fizer, remova a tag de abertura e fechamento.

4. Repita o mesmo processo para todas as “heading tags” (ou seja, faça depois o mesmo processo com <h2, <h3 até chegar a <h6).

Para ficar mais claro, abaixo está a análise que fiz do modelo “Simples” do Blogger.

– A tag h1 está presente nos trechos abaixo. Em todos eles faz sentido mantê-la, pois a classe “title” é a que mostra o título do seu blog.

Por isso, é importante que essa seja sua tag h1 na página principal. Assim, não é necessário fazer modificações.

Como corrigir heading tags no Blogger

Como corrigir heading tags no Blogger

– Já a tag h2 apresenta claros problemas. Veja onde ela é utilizada:

Na data das postagens (esse trecho está em dois lugares)




Como corrigir heading tags no Blogger

No título dos widgets (ele estará repetido em todos eles) 



Como corrigir heading tags no Blogger 




Como corrigir heading tags no Blogger

A melhor solução para estes casos é remover a tag de abertura e fechamento h2. Os novos códigos ficarão assim:

Neste caso, como a tag h2 não estava sozinha, foi necessário trocá-la por uma div


Como corrigir heading tags no Blogger

Nos widgets, basta remover a tag h2 

Como corrigir heading tags no Blogger 




Como corrigir heading tags no Blogger

– A tag h3 também não oferece problemas iniciais.

Ela só está atribuída aos títulos das postagens e podemos mantê-la por enquanto.

Como corrigir heading tags no Blogger

Como corrigir heading tags no Blogger

– A tag h4 é outra problemática. Ela está em diversos pontos sem sentido, todos relativos aos comentários

Como corrigir heading tags no Blogger

Como corrigir heading tags no Blogger

Como corrigir heading tags no Blogger

A correção segue o mesmo princípio da h2, mostrada acima:

Como corrigir heading tags no Blogger

Como corrigir heading tags no Blogger

Como corrigir heading tags no Blogger

– Não existem no template referências às tags h5 e h6, então não será necessário tomar ação para elas.

Passo 4 – Defina a tag h1 para o título do seu blog e das postagens

A tag h1 – a mais importante e relevante – deve ser reservada para o título mais importante da página que está sendo visitada.

Além disso, o ideal é que haja apenas uma tag h1 em cada página sua.

Por isso, é uma boa ideia 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.

1. Ajustar a tag do título do blog

Vamos começar a fazer o ajuste pelo título. Se você usa um texto em seu título o ajuste é relativamente simples.


O efeito obtido é que o título do seu blog terá a h1 na página inicial, mas não terá nenhuma heading tag nas demais páginas. 

Procure pelo trecho abaixo em seu template:

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

e substitua-o por:

<div class=’titlewrapper’>
  <b:if cond=’data:blog.pageType == &quot;index&quot;’>
    <h1 class=’title’>
      <b:include name=’title’/>
    </h1>
  <b:else/>
    <div class=’title’>
      <b:include name=’title’/>
    </div>
  </b:if>
</div>

2. Ajuste específico se você usar imagem como cabeçalho

Se você utiliza uma imagem como cabeçalho para o seu blog, apenas o ajuste anterior não será suficiente para a correção.

Isso porque não haverá nenhuma tag h1 na página inicial do seu blog.

Resolver isso é simples: localize em seu template o trecho <!–Show the image only—>.

Após esse trecho haverá uma linha <div id=’header-inner’>. Depois dessa linha, adicione o trecho abaixo:

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
  <h1 style=’display:none’><b:include name=’title’/></h1>
</b:if>

3. Ajustar a tag nos título das postagens

Agora, precisamos ajustar o título das postagens. Neste caso, o efeito desejado é que o título das postagens tenha h2 na página inicial e h1 na página da postagem.dois trechos iguais que você precisará alterar em seu template:

Procure por:

<h3 class=’post-title entry-title’ itemprop=’name’>
  <b:if cond=’data:post.link’>
    <a expr:href=’data:post.link’><data:post.title/></a>
  <b:else/>
    <b:if cond=’data:post.url’>
      <b:if cond=’data:blog.url != data:post.url’>
        <a expr:href=’data:post.url’><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    <b:else/>
      <data:post.title/>
    </b:if>
  </b:if>
</h3>

e substitua por:

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
  <h2 class=’post-title entry-title’ itemprop=’name’>
  <b:if cond=’data:post.link’>
    <a expr:href=’data:post.link’><data:post.title/></a>
  <b:else/>
    <b:if cond=’data:post.url’>
      <b:if cond=’data:blog.url != data:post.url’>
        <a expr:href=’data:post.url’><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    <b:else/>
      <data:post.title/>
    </b:if>
  </b:if>
  </h2>
<b:else/>
  <h1 class=’post-title entry-title’ itemprop=’name’>
  <b:if cond=’data:post.link’>
    <a expr:href=’data:post.link’><data:post.title/></a>
  <b:else/>
    <b:if cond=’data:post.url’>
      <b:if cond=’data:blog.url != data:post.url’>
        <a expr:href=’data:post.url’><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    <b:else/>
      <data:post.title/>
    </b:if>
  </b:if>
  </h1>
</b:if>

Neste ponto, a estrutura já estará correta. Eu apliquei essas alterações em outro blog de testes: http://gerenciandoblogseootim.blogspot.com.br.

Note a diferença na análise abaixo, onde se vê que agora somente os títulos receberam as heading tags:

Página Inicial
Como corrigir heading tags no Blogger
Página de Postagem
heading-tags-corrigir-template-blogger-22

Passo 5 – Ajuste seu CSS para formatar os títulos como antes

Esta pode ser a parte mais chata dos ajustes. Um problema que você notará ao aplicar essas mudanças é que poderão ser perdidas as formatações do seu cabeçalho e dos títulos das postagens.

Isso ocorre porque o template vem preparado para formatar o estilo nas heading tags que estavam definidas antes.

Para deixar as formatações como eram antes, você precisará adaptar o seu CSS para ter novamente as formatações desejadas.

Uma forma prática para você fazer isso é procurar em seu template (dentro da área b:skin) pelas referências às heading tags antigas e substituí-las pelas novas.

Continuando a tomar como exemplo o modelo “Simples”, são necessárias as mudanças.


Note que, em seu template, esses trechos podem não existir ou ser diferentes, sendo necessário fazer a análise das alterações que serão necessárias.

1. Substitui:

<Group description=”Blog Title” selector=”.header h1″>

por:

<Group description=”Blog Title” selector=”.header, .header h1″>

2. Substituir:

.Header h1 {

por:

.Header, .Header h1 {

3. Substituir:

<Group description=”Post Title” selector=”h3.post-title, .comments h4″>

por:

<Group description=”Post Title” selector=”h1.post-title, h2.post-title, .comments”>

4. Substituir:

h3.post-title, .comments h4 {

por:

h1.post-title, h2.post-title, .comments {

Tenha em mente que, dependendo do seu template, outros ajustes similares precisarão ser feitos para corrigir todas as formatações.

Conclusão

Espero ter conseguido lhes dar uma noção de como é o processo para correção das heading tags no Blogger.

Não é um processo simples e pode exigir algumas horas de seu trabalho, com paciência e cuidado para deixar todos os pontos exatamente da forma que você precisa.

Muito melhor seria que os templates já viessem desenvolvidos com a estrutura correta de heading tags, evitando este trabalho.

Em minhas buscas, não encontrei nenhum que já estivesse com isso correto.

Se alguém conhecer algum template assim, avise-me nos comentários e o colocarei como exemplo neste artigo.

E você, o que acho do processo?

Quer compartilhar sua experiência?

Deixe um comentário!

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video
X