Como Usar o Breadcrumb no Blogger

Importante técnica de SEO que ajuda os leitores do blog a saberem o "caminho" das postagens visitadas.

Você se lembra da história de João e Maria que marcavam o caminho de volta pra casa com migalhas de pão? Pois é, infelizmente aconteceu um imprevisto e os pássaros acabaram comendo deixando-os perdidos. A partir desse conto se baseou o termo “Breadcrumb” (migalhas de pão). Na história, deu errado a tática utilizada, porém em seu blog essa técnica não falhará e identificará corretamente para o visitante em que local ele se encontra.

Para sermos mais claros, a ação do “Breadcrumb” é exibir uma estrutura que destaca a postagem a partir da página inicial, passando pela categoria em que foi publicada e chegando até a mesma. Como exemplo, destacamos a imagem a seguir, que é do “Breadcrumb” após instalado em um blog de testes, veja como é exibido: Início >> Testando >> Postagem de Testes, isso mostra ao visitante que ele está visitando a “Postagem de Testes” que fica na categoria “Testando”, categoria essa que pode ser acessada a partir dessa própria estrutura a um simples clique.

Breadcrumb após instalado no blog

Com relação a SEO (Search Engine Optimization), os "breadcrumbs" indicam a hierarquia das palavras-chave em seu site. Com a aplicação correta do código, nas buscas do Google é também exibida uma estrutura semelhante, que ajudará a identificação postagem/categoria pelo mecanismo de busca e também possibilitando que o visitante possa acessar aquela categoria diretamente a partir da pesquisa.

 Observação: O "Breadcrumb" aparecerá somente nas páginas das postagens.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Como colocar o Breadcrumb no Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione as teclas "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

/* Post Breadcrumb
----------------------------------------------- */
.breadcrumb {
background:#F7F7F7;
border:1px solid #ddd;
width:100%;
margin:10px;
font-size:10px;
text-transform:uppercase;
overflow:hidden;
position:relative;
bottom:10px;
margin-left:0
}
.breadcrumb a,.breadcrumb a:visited {
color:#222;
font-family:Arial,sans-serif
}
.breadcrumb .boardTitle {
display:none
}
.breadcrumb .crust {
display:block;
float:left;
position:relative
}
.breadcrumb .crust a.crumb {
background-color:#f1f1f1;
display:block;
height:24px;
line-height:24px;
margin-bottom:0;
outline:0 none;
padding:0 10px 0 18px;
text-decoration:none
}
.breadcrumb .crust:first-child a.crumb {
padding-left:10px
}
.breadcrumb .crust:last-child a.crumb {
background-color:#e7e7e7;
font-weight:bold
}
.breadcrumb .crust:last-child .arrow span {
border-left-color:#e7e7e7!important
}
.breadcrumb .crust .arrow {
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
border-color:transparent black transparent #BBBBBB;
border-image:none;
border-style:solid none solid solid;
border-width:12px 1px 12px 12px;
display:block;
height:0;
position:absolute;
right:-12px;
top:0;
width:0;
z-index:5
}
.breadcrumb .crust .arrow span {
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
border-color:transparent black transparent #f1f1f1;
border-image:none;
border-style:solid none solid solid;
border-width:12px 1px 12px 12px;
display:block;
height:0;
left:-13px;
overflow:hidden;
position:absolute;
text-indent:9999px;
top:-12px;
#ffffff-space:nowrap;
width:0;
z-index:6
}
.breadcrumb .crust:hover a.crumb {
background-color:#e7e7e7;
color:#222
}
.breadcrumb .crust:hover .arrow span {
border-left-color:#e7e7e7
}

>> Pesquise agora por <a expr:name='data:post.id'/>
* Você poderá encontrar dois trechos iguais, caso encontre opte pelo segundo.

>> Logo ABAIXO do trecho encontrado, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Início</span></a>
<span class='arrow'><span>&gt;</span></span>
</span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/><span itemprop='title'/></a>
<span class='arrow'><span>&gt;</span></span>
</span>
</b:if>
</b:loop>
<b:else/>
Sem categoria
</b:if>
</b:loop>
<span class='crust'>
<a class='crumb' expr:href='data:post.url'><span><data:post.title/></span></a>
<span class='arrow'><span/></span>
</span>
</span>
</div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Início</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Arquivos de <data:blog.pageName/></span></a>
<span class='arrow'><span/></span></span>
</span></div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Início</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
        <a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Post com a tag <data:blog.pageName/></span></a><span class='arrow'><span/></span></span>
</span>
       </div>
     </b:if>
</b:if></b:if></b:if>

>> Clique em "Salvar Modelo".


Como Saber se Funcionou?

Primeiramente você poderá acessar uma de suas postagens e verificar logo acima do título se aparece a estrutura do "Breadcrumb".

Em seguida, para verificar se o Google está entendendo o código aplicado e exibindo nas pesquisas, acesse a página http://www.google.com/webmasters/tools/richsnippets, na barra coloque o link de sua postagem, clique em "Visualizar", se estiver funcionando aparecerá o "Breadcrumb" logo abaixo do título da postagem.

Atenção: Esse processo é apenas uma página de teste na qual mostra que o código está correto e em funcionamento, porém, pode demorar dias para que sejam exibidos os resultados dessa maneira nas pesquisas do Google.


Concluindo

Ser encontrado por seu público-alvo é uma das principais metas de todo blogueiro, e, nada melhor do que se atualizar com as principais táticas de SEO. Por isso, a aplicação do "Breadcrumb" pode ser um ponto culminante na organização de um blog fazendo com que seu conteúdo seja encontrado pelo visitante.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.