Breadcrumb Snippet pada Blogger

Kebetulan malam ini saya lagi melakukan optimasi pada navigasi blog saya ini, dan saya melakukan penambahan breadcrumb untuk masing-masing postingan guna mempermudah navigasi bagi para pengunjung untuk menelusuri blog saya ini. 

Seperti yang sudah teman-teman ketahui, untuk memasang sebuah breadcrumb pada platform blogger cukup mudah, apalagi saat ini sudah banyak situs-situs tutorial modify blogger yang mengulasnya dan kebetulan saya sudah pernah ikutan cobain juga cara pembuatannya, akan tetapi ada beberapa kejanggalan dengan breadcrumb yang pernah saya coba tersebut, salah satunya yaitu tidak terbaca pada mesin pencari google. Padahal seperti yang sudah kita ketahui bahwa yang namanya breadcumb berfungsi untuk mempermudah navigasi pada halaman web kita, tapi timbul sebuah pertanyaan apakah navigasi tersebut bisa terbaca pada search engine apa tidak? Karena hal ini merupakan salah satu faktor penting terutama bagi teman-teman yang sedang mengajukan permohonan layanan periklanan di google adsense.

Kebetulan beberapa waktu lalu saya mencoba meng-upgrade salah satu account google adsense saya yang masih dalam tipe hosted account (hanya diperbolehkan pada hostingan google seperti blogger, youtube, hubpages dll) akan tetapi setelah di review akhirnya request upgrade saya ditolak dengan alasan navigasi saya tidak ada atau tidak terbaca di google padahal pada web yang saya ajukan sudah terdapat breadcrumb, search box dan menu-menu pagelist dan label. Akhirnya saya mencoba melakukan beberapa testing dan ternyata memang benar sistem navigasi saya bermasalah mulai dari menu pages yang jika ditambahkan halaman baru maka otomatis hilang, search box yang bukan standard google dan breadcrumb yang saya buat tidak terbaca di search engine, kebetulan untuk template web yang saya ajukan dulu masih menggunakan template gratisan, jadi akhirnya saya coba untuk membuat template sendiri yang lebih SEO friendly dimata google ketimbang menggunakan template yang tampilannya bagus tapi ternyata banyak yang tidak terbaca di google, tapi memang kesalahannya saya juga sih soalnya asal comot template tapi gak tau kekurangannya apa saja pada template tersebut.

Kembali ke topik mengenai breadcrumb ini, setelah beberapa minggu mencoba memahami www.schema.org untuk markup snippet dan sampai sekarang masih dalam kondisi gagal paham (baru paham dikit doank) akhirnya hasil modify kanan-kiri pada breadcrumb yang SEO freindly membuahkan hasil. Kira-kira setelah dipasang pada blog ini tampilannya menjadi seperti ini (pada web/blog dan pada testing tools snippet google):

Tampilan breadcrumb pada postingan blog ini

Tampilan Breadcrumb pada testing tools snippet google webmaster tools

Cukup lega juga setelah lihat hasilnya bisa nongol di snippet, tapi jangan khawatir karena saya tidak akan pelit dalam membagikan ilmu saya, karena dengan berbagi, ilmu saya tidak akan berkurang LOL. Langsung saja kita mulai tutorial pemasangannya:

Seperti biasa, untuk edit template langsung masuk dashboard blogger kemudian klik Template >> Edit html kemudian tekan ctrl+F pada box code template dan cari kode berikut ini:

 

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

Bagi yang tidak menemukannya saya mohon jangan tanya saya karena kode tersebut ada pada semua default template blogger, jadi bagi teman-teman yang menggunakan free template dari tempat lain dan tidak menemukan penggalan kode tersebut silahkan tanya pada pembuat templatenya. Ok, jika sudah ketemu kemudian letakkan kode berikut tepat dibagian atas kode tadi:

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

Sehingga tampilannya jika sudah ditambahkan menjadi seperti ini (warna biru adalah kode yang ditambahkan sedangkan warna hijau adalah kode yang dicari tadi)

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

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

Selanjutnya masih pada edit html template, cari penggalan kode berikut:

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

 Kalau sudah ketemu, silahkan pasang kode snippet berikut ini untuk breadcrumb tepat diatas kode tersebut:

<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"'>
<!-- 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' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
 » <span typeof="v:Breadcrumb">

<a expr:href='data:label.url' rel="v:url" property="v:title">

<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"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<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>

Jika sudah terpasang silahkan save template teman-teman, kemudian silahkan dilihat pada postingan web/blognya apakah breadcrumbnya sudah nongol apa belum, dan silahkan copy salah satu link postingan yang dipasangi breadcrumb tadi untuk di testing di Structured Data Testing Tools untuk melihat snippetnya sudah muncul apa belum. Selamat mencoba.

Update Info:
Breadcrumb ini menggunakan label sebagai pengelompokan artikel postingan, jadi pastikan teman-teman menggunakan label dalam setiap artikel untuk mengelompokan postingan.