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.
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
}
* 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 == "item"'>
<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>></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 == "true"'>
<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>></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 == "archive"'>
<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>></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 == "index"'>
<b:if cond='data:blog.pageName == ""'>
<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>></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.
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.
Comentários