O “breadcrumb” é um recurso importante de usabilidade e SEO, que permite que seus visitantes se localizem facilmente em seu blog.
Aprenda neste artigo como configurá-lo em seu blog do Blogger.
Introdução
Literalmente, “breadcrumb” significa “migalhas de pão”.
O termo vem da história de João e Maria: quando ambos estavam andando pela floresta, jogavam migalhas de pão pelo chão, para poderem encontrar o caminho de volta.
Mesmo a estratégia não tendo funcionado (pássaros comeram as migalhas e tudo terminou em tragédia), o termo “breadcrumb” é utilizado hoje para mostrar ao visitante onde ele está em determinado site.
Veja o exemplo do Gerenciando Blog:
A ideia é que os visitantes saibam, ao ver essa estrutura, que estão lendo um artigo dentro da “categoria” chamada “Google”.
Se eles clicaram nessa palavra, verão todos os artigos dessa mesma “categoria”.
Quando o conceito do “breadcrumb” é utilizado de maneira correto, o resultado da busca por esse artigo no Google também será mostrado de forma diferente.
Veja o exemplo abaixo:
A vantagem de uso é que isso dá destaque aos seus resultados e também permite que o usuário do Google possa ir direto a essa “categoria” de artigos em seu blog.
Nos próximos passos, você verá como implementar esse conceito em seu blog do Blogger.
Há categorias no Blogger?
No Blogger, não existe exatamente o conceito de categoria, por isso estou sempre usando essa palavra entre aspas.
Por esse motivo, também não existe o conceito de “breadcrumb” pronto nele.
Mas, isso pode ser facilmente contornado e simulado com o uso de Marcadores.
É bem possível que você já os conheça e use muito bem em seu blog.
Mas, vale a pena dar uma lida (ou relida) no artigo Utilizando corretamente Marcadores no Blogger.
Para todos os efeitos, um Marcador (quando bem utilizado, claro) representa uma Categoria em seu blog.
Por isso, se você utiliza 20 Marcadores em cada postagem que faz, e a maioria dos Marcadores está associada a apenas um artigo, sinto lhe dizer: você está fazendo uso errado deles.
Um bom Marcador é aquele que permite que seu visitante encontre outros artigos sobre o mesmo assunto.
Se isso não é possível, ele é inútil.
Mas, vamos assumir que você já os usa corretamente (ou sairá deste artigo com o compromisso de ajustá-los). Após fazer isso, você poderá prosseguir com este tutorial tranquilamente.
Como mostrar o “breadcrumb” no Blogger?
Fazendo um pesquisa rápida, encontrei diversos tutoriais ensinando como exibir em seu blog o “breadcrumb”.
No entanto, muitos fazem apenas sua exibição aos leitores, não tendo os códigos necessários para que o Google os entenda corretamente.
Este tutorial resolverá os dois problemas.
Para fazer com que o “breadcrumb” funcione, é necessária uma pequena alteração no HTML do seu template. Os passos abaixo mostram como fazer isso:
1. Antes de iniciar, faça um backup de seu template, para o caso de precisar voltá-lo. Veja como fazer isso no artigo Como Fazer Backup de seu Blog.
2. Localize em seu template a linha abaixo. Normalmente, você a encontrará em dois pontos do seu template. O trecho correto é o segundo que você encontrar.
<a expr:name=’data:post.id’/>
3. Abaixo desse trecho é necessário colocar um código adicional. Você pode escolher entre as duas opções abaixo:
a) Se você quiser que seja mostrado apenas um item de breadcrumb quando houver mais de um Marcador, use este código.
<b:if cond=’data:blog.pageType == "item"’>
<div id=’breadcrumb’>
<span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>
<a expr:href=’data:blog.homepageUrl’ itemprop=’url’><span itemprop=’title’>Início</span></a>
</span>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast == "true"’>
>
<span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>
<a expr:href=’data:label.url’ itemprop=’url’><span itemprop=’title’><data:label.name/></span></a>
</span>
</b:if>
</b:loop>
</div>
</b:if>
b) Se você quiser que sejam mostrados todos os itens de breadcrumb quando houver mais de um marcador, use este. Note que, se você tiver muitos Marcadores em um mesmo artigo, o resultado final pode ficar estranho.
<b:if cond=’data:blog.pageType == "item"’>
<div id=’breadcrumb’>
<span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>
<a expr:href=’data:blog.homepageUrl’ itemprop=’url’><span itemprop=’title’>Início</span></a>
</span>
<b:loop values=’data:post.labels’ var=’label’>
>
<span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>
<a expr:href=’data:label.url’ itemprop=’url’><span itemprop=’title’><data:label.name/></span></a>
</span>
</b:loop>
</div>
</b:if>
Como confirmar se tudo ficou correto?
O primeiro ponto que você deve confirmar é se o breadcrumb apareceu logo acima do título das postagens.
Note que ele só aparecerá na própria página da postagem, e não na inicial.
Veja um exemplo no artigo SEO, WordPress e Blogger:
O segundo ponto que você deve confirmar é se o Google está entendendo corretamente o seu breadcrumb.
Para isso, acesse a página http://www.google.com/webmasters/tools/richsnippets, digite o endereço de uma postagem do seu blog (que contenha um Marcador) e clique em “Visualizar”.
O breadcrumb deve aparecer abaixo do título de sua postagem.
IMPORTANTE: Pode demorará algum tempo (dias ou semanas) para que haja mudança nos resultados do Google para seu blog. Isso é normal. O importante é que o breadcrumb seja exibido corretamente nesta página de teste.
Conclusão
Esta é uma pequena alteração que pode lhe trazer bons resultados de SEO, por atrair mais cliques dos usuários do Google.
Além disso, ela pode ser útil para seus visitantes saberem onde estão em seu blog – o que também é bastante positivo para você.
E você, já conhecia o conceito do “breadcrumb”? Já o utiliza em seu blog? Compartilhe sua opinião ou dúvida em um comentário!
Imagem de João e Maria via Shutterstock
Related Post
Leave feedback about this