Memasang Breadcrumbs di Blogger atau Blogspot dengan Mudah

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. 

HOME >> Blogger >> .................. >>

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:

Mempermudah visitor untuk mengetahui kategori postingan

Hanya satu klik untuk menuju menu Home

Memperkecil Bounce Rate

Menambah  keyword dalam postingan

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.

Sumber : http://www.bloggertut.com/

Browse More Articles

Tweet

Written by Unknown

Blogger Pemula, dan ingin memberikan kemudahan dalam mencari informasi melalui dunia Internet. Saya sangat berharap untuk dukungan terhadap perbaikan bterhadap blog ini.