Membuat Breadcrumbs SEO Friendly di Blogspot

Apa itu breadcrumbs? 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.

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. Perhatikan gambar di bawah :

Dari gambar di atas menunjukan bahwa postingan Menghapus Link Hidup pada Komentar Blogger, berada pada label Komentar dan label Link.

Pentingkah Breadcrumbs untuk SEO?

Untuk menjawab pertanyaan di atas, silahkan baca keuntungan menggunakan breadcrumbs dibawah ini, diantaranya:

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 Breadcrumbs SEO Friendly

1. Masuk ke Blogger
2. Klik Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. 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; 
}

5. Cari kode <b:includable id='main' var='top'>, ganti dengan:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<!-- 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 == &quot;archive&quot;'>
<!-- 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 == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<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'/>

6. 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.