Friday, July 13, 2012

Cara Membuat Breadcrumb untuk SEO


Breadcrumb. Apa itu breadcrumb? Diterjemahan bahasa Inggris ke Indonesia, breadcrumb berarti serpihan roti. Istilah ini memang janggal, lalu apa hubungan serpihan roti dengan SEO? Kawan jangan bingung, karena itu hanya berupa istilah. Breadcrumb adalah suatu fasilitas yang diberikan kepada kita untuk membuat suatu kategori khusus dalam blog. Jadi gampangnya, konten blog kita dibuat berdasarkan kategori tertentu, sehingga memudahkan pembaca untuk memilah-milah artikel yang tepat sesuai dengan kebutuhan mereka. Masih bingung? Jadi, breadcrumd seharusnya tidak mengganggu SEO kita, melainkan membantunya untuk menaikkan artikel kita di SERP. Bagaimana cara kerjanya?

Di sini akan membahas cara membuat breadcrumb yang SEO friendly. Jadi sebia mungkin kita buat breadcrumb artikel yang bisa terindex oleh google. Tentu saja menu breadcrumb akan lebih terlihat indah ketika dapat terindex oleh goole. Lihatlah model screenshot bredcrumb blog ini yang alhamdulillaah sudah terindex oleh google.


Apa bedanya breadcrumb dengan yang biasa?
Yang tidak diberi breadcrumb akan terlihat URLnya. Misal win-007.blogspot.com/2012/06/khasiat-dan-manfaat-ikan-tongkol.html
Yang dengan breadcrumb, akan muncul  win-007.blogspot.com > Kategori

Yang kuberi stabilo kuning tersebut adalah breadcrumb. Jadi disana terlihat bahawa artikel manfaat ikan tongkol terindex di kategori serba-serbi.

Menarik bukan? Untuk membuatnya, ikuti langkah berikut ini.
1. Untuk menghindari risiko, download dulu full template kawan yang ada di menu Template > Backup / Restore > Download Full Template
2.Kawan cari kode berikut di menu edit template. Jangan lupa centang "expand widget template". Carinya pakai Ctrl+F aja ya biar cepat.
<b:includable id='main' var='top'>

2. GANTILAH kode tersebut dengan kode berikut ini:
 
<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'/>
 3. Simpan template. Selesai. Tunggulah breadcrumb bekerja.
Saya memakai kode tersebut untuk membuat breadcrumb blog ini dan berhasil.
Semoga membantu.

Ditulis Oleh : Mas Win // 7:00 AM
Kategori:

6 Komentar:

  1. wah menarik juga nich sob, sangat bermanfaat sekali nich,,,...
    salam juga sob :)

    ReplyDelete
  2. Kalau saya pakai WP enak pake plugin yoast breadcrumb mas lebih simple hehehe

    Salam kenal

    ReplyDelete
  3. ane belum pake breadcrumb soalnya beberapa trik yang ane coba belum berhasil, mungkin yang ini bisa. ane coba dulu daah

    ReplyDelete
  4. Artikel tentang SEO ya.. saya suka topik seperti ini... Bisa menambah traffik ke blog baru saya.. Saya juga baru belajar tentang breadcrumb... Makasih ya

    ReplyDelete
  5. absen disini gan,

    silahkan untuk berpartisipasi untuk mendapatkan domain Gratis. kunjungi http://www.sundaboy.com/2012/07/kontes-ramadhan.html

    terimakasih

    ReplyDelete
  6. ana coba dulu , moga berhasil.....thank's udah berbagi pebgetahuannya

    ReplyDelete

Komentar bonus nasi bungkus