Você 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.
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  |
Página de Postagem  |
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.
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.
– Já a tag h2 apresenta claros problemas. Veja onde ela é utilizada:
Na data das postagens (esse trecho está em dois lugares)
No título dos widgets (ele estará repetido em todos eles)
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
Nos widgets, basta remover a tag h2
– 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.
– A tag h4 é outra problemática. Ela está em diversos pontos sem sentido, todos relativos aos comentários
A correção segue o mesmo princípio da h2, mostrada acima:
– 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 == "index"’>
<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 == "index"’>
<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. Há 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 == "index"’>
<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  |
Página de Postagem 
|
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