Memasang Breadcrumbs yang SEO Friendly

Pernah dengar yang namanya "Breadcrumbs"? Kalau dalam bahasa Indonesia berarti "Remah roti", yang berguna untuk memberi petunjuk jalan mana saja yang pernah kita lalui agar kita tidak tersesat dan tahu posisi dimana kita sedang berada sekarang. Remah roti atau remah apapun itu sering digunakan orang zaman dulu untuk menandai jalan yang telah dia lewati agar tidak tersesat di kemudian waktu.

SEO Friendly Breadcrumbs

Nah, fungsi dari breadcrumbs yang satu ini juga sama, agar para visitor yang nyasar di blog anda tidak kebingungan dalam menjelajahi blog anda. Jika ingin fungsi lainnya, agar si pengunjung mudah untuk memilih dan membaca artikel yang ada di label atau kategori tertentu. Konsep breadcrumbs ini tidak hanya digunakan dalam dunia Blogging, bahkan jika anda menyadari, di tampilan Windows Explorer pun terdapat breadcrumbs, lihat gambar dibawah ini!

Windows Explorer's Breadcrumbs

Nah, kurang lebihnya seperti itulah breadcrumbs yang akan kita pasang di blog. Namun, breadcrumbs yang akan diinstall bukan merupakan breadcrumbs sembarangan. Mitosnya, breadcrumbs ini dapat menambah nilai SEO kita dan mempermudah indexing blog oleh mesin pencari seperti Google. Sekedar memberitahu, Google suka dengan blog yang memiliki breadcrumbs, karena memudahkan suatu mesin pencari merayapi blog dan menemukan artikel-artikel baru yang terdapat pada blog tersebut. Proses itulah yang dinamakan indexing blog, yang juga mempengaruhi nilai SEO dihadapan mesin pencari.

Langsung saja kita praktekkan cara memasangnya, simak baik-baik agar tidak terjadi error pada blog anda nantinya.
1. Masuk ke dashboard blog anda, klik pada "Template" dan ambil "Edit HTML"
2. Cari kode HTML yang bertuliskan "]]></b:skin>" (tanpa tanda petik dua)
3. Agar proses pencarian lebih cepat pada kotak HTML ketik Ctrl+F (menu find/cari)
4. Pastekan kode berikut diatas kode ]]></b:skin>

• .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

5. Setelah selesai, cari kode "<b:includable id='main' var='top'>" (tanpa tanda petik dua)
6. Hapus dan ganti dengan kode yang ada dibawah 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'>
  &#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'/>

7. Save template anda, lalu coba lihat lagi tampilan homa blog anda, ada yang berbeda?

Demikian artikel saya tentang breadcrumbs untuk Blogspot kali ini, bagi anda pengguna wordpress bisa baca Memasang Breadcrumbs Khusus bagi Pengguna Wordpress.

Sekian, kurang lebihnya mohon maaf.
Assalamualaikum Wr. Wb.