Memasang Breadcrumbs SEO Friendly di Blogger

Breadcrumbs adalah navigasi di atas postingan yang berbentuk hirarki. Arti sebenarnya dari breadcrumbs adalah bubuk roti, namun hal ini digunakan dalam istilah website menjadi navigasi postingan yang menunjukan dimana adanya postingan tersebut.
breadcrumbs

Pada blog berbasis WordPress akan lebih tersusun secara hirarki karena bisa membuat child category, memudahkan visitor mengetahui letak artikel tersebut. Pada blog berbasis Blogspot / Blogger, breadcrumbs tidak bisa tampil seperti itu. Namun hanya menampilan label dimana berada postingan tersebut. Apabila terdapat 2 label atau lebih, maka semua label akan di tampilkan.

Keuntungan Memakai Breadcrumbs

1. Mempermudah visitor untuk mengetahui kategori postingan
2. Hanya satu klik untuk menuju menu Home
3. Memperkecil  Bounce Rate
4. Menambah  keyword dalam postingan
5. Memberikan informasi yang dibutuhkan Search Engine, seperti Google dalam memahami struktur / skema sebuah Web/Blog.

Cara membuat Breadcrums SEO Friendly

• Masuk ke Blogger
• Klik Template > Edit HTML > Lanjutkan
• Centang Expand Template Widget
• Cari kode ]]></b:skin> dan simpan kode ini diatasnya:

.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}

• Cari Kode ini <b:includable id='main' var='top'>  kemudian ganti dengan kode di bawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;  <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

•  Simpan Template
• Untuk mengeceknya silahkan kunjungi :

http://www.google.com/webmasters/tools/richsnippets

Untuk mencoba apakah tampil beberapa label, copy postingan Anda yang mempunya label lebih dari 1. dan klik Pratinjau. Kalau sudah berhasil berarti breadcrumbs terpasang dengan baik. terima kasih pada Bloggertuts