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:
- 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
]]> 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
, ganti dengan:
<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> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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
