Templates para blogger - Como otimizá-los para sites de busca e ganhar mais dinheiro

sexta-feira, 23 de setembro de 2011

Os templates para blogger podem ser otimizados com truques de Seo para posicionar melhor seu blog nos sites de busca, conseguindo o mesmo efeito do wordpress, que é considerado o melhor código de blog em termos de Seo.

Para comseguir isso você precisa tomar alguns cuidados como: ao colocar uma imagem no cabeçalho não excluir o título do blog, inverter a ordem dos títulos das postagens com o do blog nos sites de buscas, inserir meta tags, colocar a Tag h1 no título do post e otimizar os links. Veja neste post como fazer isso de forma bem rápida.

Antes é preciso dizer que melhorar o posicionamento nos sites de busca não depende só do template, mas também deve otimizar o post, ter conteúdo único, links externos entre outras coisas. Os passos abaixo serve apenas para melhorar os templates para blogger. Siga estas 5 etapas:

1. Colocar uma imagem no cabeçalho do blogger sem excluir o título do blog.


Em Layout clicando em editar "Titulo do blog(cabeçalho)" você tem três opções:

- Por trás de título e descrição (inseri imagem, mas título e descrição fica visível)
- Em vez de título e descrição (inseri imagem, título e descrição desaparece)
- Inserir e descrição depois da imagem (inseri imagem e somente o título desaparece)

Se você estiver colocando uma imagem já com o nome do blog e descrição inseridos, você vai escolher a segunda opção o que faz com que o título e a descrição desapareça do template. Para os sites de busca seria como um blog sem nome e com certeza vai indexar mal.

Neste caso o que você deve fazer é escolher a primeira opção, deixando título e descrição visível no template e para não atrapalhar sua imagem, acrescente o código em verde nas seguintes partes do template:

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
display:none;
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
display:none;
}

2. Inverter título do blogger com o título do post nos sites de busca


Os templates para Blogger indexa o tílulo do blog antes do título dos posts o que é um fator negativo de seo. Para resolver isso basta trocar esta parte do código <title><data:blog.pageTitle/></title> que fica logo no início do template por este abaixo:

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>

3. Inserir Meta Tags no blogger


Este é um procedimento comum a qualquer outro template, as Meta Tags serve para indicar melhor aos sites de busca o conteúdo do seu blog. Existe várias delas, mas as necessárias para efeito de Seo são: meta tags 'description e keyword'. Insira elas logo depois de <b:include data="blog" name="all-head-content"> substituindo a parte em verde pelas palavras chaves e descrição do seu blog

<meta content='Descrição do blog' name='description'/>
<meta content='Palavras chave separadas por vírgula' name='keywords'/>

4. Colocando h1 no título dos posts do blogger


O conteúdo de um blog deve ser organizado pelas tags de cabeçalho que são elas h1, h2, h3, h4, h5 e h6, onde o texto mais importante deve ficar na tag h1, o segundo mais importante deve ficar na tag h2 e assim por diante. A tag h1 deve existir apenas uma em cada página para não confundir os moteres de buscas, as demais não há esta exigência.

O que há de mais importante para os motores de buscas em uma página são os títulos das postagens e neles devem ficar a tag h1, mas o Blogger por padrão coloca h3, deixando h1 título para o título do blog. Para resolver isso são três etapas.

4.1 Para o título dos posts: vamos colocar a tag h2 na página inicial e h1 nas páginas indivuduais.
Encontre e apague esta parte do código:

<h3 class='post-title entry-title'>
<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 este:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<h1 class='post-title entry-title'>
<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>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2 class='post-title entry-title'>
<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:if>

4.2 Para o título do blog: vamos colocar h1 na página inicial e h2 nas páginas individuais.
Encontre esta parte do código e apague:

<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>

Substitua por este:

<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<h2 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h2>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</b:if>
</div>

4.3 Caso os títulos fiquem de tamanhos diferente na página inicial e individual, faça esta mudança no CSS. Procure estas partes e acrescente o que está em verde:

.Header h1, .Header h2 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
display:none;
}

.Header h1 a, .Header h2 a {
color: $(header.text.color);
}

Antes era h3.post-title, .comments h4.
Depois:
h1.post-title, h2.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

5. Colocar "Title" na lista de links do Blogger


É importante otimizar os links, colocando textos para que os motores de buscas leiam, para isso existe a tag "Title". Quando for colocar um link na sidebar procure o windget "litas de links" com ele você pode colocar automaticamente a tag Title. Para isso, após iserir os links, procure no código por LINKLIST e um pouco mais abaixo procure por este código e insira a parte em verde.

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' expr:title='data:link.name'><data:link.name/></a></li>
</b:loop>
</ul>

Com estas dicas você já tem um template que indexa melhor, agora invista em conteúdo de qualidade, saiba usar palavras chaves dentro do post e com certeza seu blog ficará bem posicionado.

Este tutorial foi feito utilizando o template para blogger "Simple" para outros templates pode ser que mude alguma coisa, mas o procedimento será muito parecido é só procurar os códigos acima com atenção. Use Ctrl + F para facilitar

9 comentários:

Unknown disse...

Valeu Internauta. Meu código não tem nada relacionado a " h3.post-title, .comments h4. " Mas o resto deu tudo certo, espero que isso não atrapalhe em nada.

Unknown disse...

Por favor preciso que me ajude! Eu segui os seus passos mas os títulos aparecem a dobrar na página inicial. Visite http://anavitri.blogspot.pt/

Fiz qualquer coisa mal mas não sei o que é.No meu template aparece 2 vezes o código
div class='titlewrapper' style='background: transparent'

Obrigado

Unknown disse...

Já consegui colocar tudo direitinho :) Obrigada!Já agora gostava de lhe perguntar como se colocam as palavras-chave nas heading tags h1, h2...
mais precisamente em que sítio do template, entre que códigos??é que vejo muitos a falarem no assunto mas para uma leiga em html como eu, não sei onde e como colocar isso!
Obrigada pela atenção

Pedra90 disse...

Anavitri. Se você seguiu o tutorial acima, a aparte do HTML já está feita.

As palavras chaves deverão ser inseridas ao escrever os posts, elas devem aparecer no título do post e dentro do post algumas vezes.

Vejo que seu blog é de imagens, então você poderia otimizar suas imagens com a tag 'ALT' ela é inserida no link da imagem assim - <img src="Link da imagem" alt="palavra chave" />.

Dessa forma suas imagens podem aparecer na busca de imagens do google, mas você poderia escrever algo sobre as imagens também e colocar lá suas palavras chaves para que seu blog também possa ser bem indexado na busca orgânica do google.

Twjogos disse...

Testado e aprovado :)
muito obrigado só você pode me ajudar, pois meu template estava escrito com outro nome que é este que você me passou então não dava para modificar o h1,h2...

vlw :)

Tw jogos

Twjogos disse...

ola
eu fiz um teste no meu blog sobre as tags e no relatoria diz que foi encontrada as tags, mas não estou utilizando o h1

JoeBengos disse...

pow quase tudo funfa legal exceto uma coisa, tentei colocar o titulo em h2 nas paginas individuais e o código foi praticamente ignorado... será que não tem outro jeito?

Pedra90 disse...

Raphael. Qual o seu tema?

Unknown disse...

Excelente tutorial.

Apliquei essas mudanças e o número de visitantes cresceu bastante..mas meu blog ainda está longe de obter os resultados esperados.

Parabéns pelo seu trabalho, continue neste caminho.

Sucesso

Postar um comentário