O que é Breadcrumb e como ele pode ajudar na indexação do seu blog


Você conhece o conto de fadas João e Maria?


Lembra que na história os irmãos deixam para trás migalhas de pão para conseguirem achar o caminho de volta depois que o pai deles os abandona na floresta?
Então, o termo breadcrumbs vem daí e significa, literalmente, migalhas de pão, algo que serve para indicar o caminho.

No mundo dos blogs o termo breadcrumbs designa o caminho que o leitor e os robots de busca e indexação do Google e similares fazem para chegar ao seu conteúdo.
Breadcrumbs são uma ferramenta importante no trabalho de otimização do blog e faz parte do conjunto de ações que chamamos técnicas de SEO.

Eles ajudam na indicação aos robots de busca , indicando para eles o caminho a seguir para indexar o conteúdo do blog.
E para o leitor também é útil, além de ser visualmente bonito e organizado um blog com Breadcrumbs ativos e bem definidos.
Vamos aprender o modo simples e fácil de instalar em seu blog os Breadcrumbs?
Vem comigo!
Para começar clique na aba Modelo de seu blog.
A seguir clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que abrir cole isso:

 <b:includable id='main' var='top'>

Dê Enter para localizar.
Quando encontrar substitua o trecho por este código:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Sem breadcrumb na página inicial -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb para a página do post -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>&#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == &quot;true&quot;'/>
</b:loop>
<b:else/>
&#187;Sem Marcador
</b:if>
&#187;<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb para o arquivo e página de buscas.. -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arquivos de <data:blog.pageName/>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
Você está em: <b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Todos os Posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts da Categoria <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</b:if>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Salve a alteração.
Agora cole esse trecho dentro da barra de busca:

 <b:include data='top' name='status-message'/>


Novamente dê Enter para localizar.

Você vai encontrar essa ocorrência uma ou duas vezes. Substitua ambas as ocorrências por esse código:

<b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/>

Salve a alteração. 


Está prontinho.

O resultado aparece apenas nas páginas internas, e você pode conferir aqui mesmo em meu blog.

Veja como fica clicando no título do post se você estiver na home do blog ou simplesmente olhando acima do título do post caso esteja na página interna dele.


Gostou?


Então curta ou compartilhe o post para que mais pessoas possam ser beneficiadas com o trabalho realizado no blog!



Sem comentários

Com tecnologia do Blogger.