Cara Membuat Navigasi Breadcrumb, Pengertian dan manfaatnya bagi SEO Blog

Sebelum membahas tentang manfaat dan cara membuat breadcrum di blog, maka terlebih dahulu saya akan menjelaskan mengenai Apa yang dimaksud dengan Navigasi Breadcrum, serta manfaatnya, untuk itu maka perhatikan illustrasi berikut ini:

Pada saat seseorang melakukan pencarian di Mesin pencari seperti Google Searh Engine dengan cara memasukkan kata kunci tertentu, maka biasanya Google akan menampilkan pada halaman  hasil pencarian (SERP) berupa sederetan link Web/blog yang terindex di database Google sesuai dengan kata kunci yang kita masukkan tadi. Adapun link Website yang ditampilkan tampak seperti pada gambar berikut:

biasanya terdiri dari tiga unsur yang berurutan yaitu:

1. Judul Halaman Posting yang Sesuai dengan kata kunci pencarian (biasanya mengandung kata kunci) (Pada gambar terlihat seperti No. 2)
2. Alamat url halaman posting yang  sesuai dengan kata kunci (Pada Gambar diatas ditunjukkan oleh no 4 ), 
3. Deskripsi dari halaman, atau potongan dari isi halaman posting yang mengandung kata kunci pencarian. (seperti pada Gb.  no.3) 

Namun kadang - kadang kita jumpai pada halaman hasil pencarian (SERP) Google berupa alamat Homepage yang disusul dengan suatu kategori yang mengandung alamat url halaman yang berhubungan dengan kata kunci ( lihat Gambar yang ditunjuk pada No 1, ) penampilan / penulisan alamat url yang seperti:  www.jual-rebanamarawis.com > Tutorial Blogspot   inilah yang disebut dengan "Breadcrumb"

Berdasarkan hasil analisa saya pada  hampir seluruh postingan blog saya (yang sudah dipasang navigasi Breadcrumb)  dengan cara mengetikkan kata kunci yang yang sesuai denga postingan blog, ternyata sebagian besar yang muncul di SERP adalah Breadcrumb (seperti yang ditunjuk pada No 1 pada gambar diatas ) bukan alamat url halaman blog, hal ini yang mendasari saya pada kesimpulan bahwa Google lebih menyukai menampilkan Breadcrumb pada SERP dibandingkan dengan dengan menampilkan url halaman, dan kuat dugaan saya bahwa Breadcrumb mempunyai posisi yang lebih penting menurut SE Google. Mungkin inilah yang menyebabkan para pakar SEO sangat menganjurkan untuk memasang Navigasi Breadcrumb pada Blog agar lebih SEO Friendly.

Suatu blog yang memasang navigasi Breadcrumb, menu navigasi  ini dapat dilihat pada halaman postingan juga pada label arsip, tetapi tidak terlihat pada homepage, navigasi Breadcrumb akan tampak tepat diatas postingan  dengan konfigurasi home > label posting > judul posting, perhatikan gambar berikut:




Kalau kita perhatikan dengan seksama, tentu kita akan merasa bahwa kehadiran menu navigasi ini menyebabkan tampilan halaman yang lebih terkesan indah, disamping fungsi utamanya yaitu untuk memudahkan para pengunjung blog untuk menemukan suatu halaman dengan kategori yang sama, juga untuk menuju ke halaman utama suatu blog.
Adapun Cara Membuat Navigasi Breadcrumbs di Blogspot adalah sebagai berikut:

1. Login ke Blogger Masuk ke "Rancangan" kemudian klik "Edit HTML" Cheklist "Expand Template Widget" di pojok kanan atas kotak edit HTML.
2. Cari Kode ]]></b:skin> (untuk memudahkannya gunakan fasilitas Ctrl + F)
   jika sudah ketemu copy kode dibawah ini, kemudian paste diatas kode ]]></b:skin> :

   .breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

3. Cari kode: <b:includable id='main' var='top'> Hapus kode tersebut, kemudian ganti dengan kode:

   <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'> <b:if cond='data:label.isLast == &quot;true&quot;'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:if> </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'/>

4. Simpan Tamplate

Demikian postingan kali ini yang berjudul Cara Membuat Navigasi Breadcrumb, Pengertian dan manfaatnya bagi SEO Blog, semoga bermanfaat.