Cara Memasang Breadcrumb Pada Blog

Banyak para master SEO yang merekomendasikan pemasangan breadcrumb pada blog untuk meningkatkan SEO. Breadcrumb ini berfungsi untuk membuat blog semakin mudah dalam hal navigasi. Navigasi seperti inilah yang disukai oleh Google ketika melakukan proses pencarian. Boleh dibilang, blog yang menerapkan navigasi, akan terlihat lebih rapi dibanding dengan blog yang tanpa ada fitur navigasi.

Berikut beberapa alasan master SEO merekomendasikan pemasangan breadcrumb pada sebuah blog/website :

1. Breadcrumbs menunjukkan kepada pembaca dimana lokasi topik tulisan relatif terhadap topik yang lebih tinggi atau topik yang lebih luas. Semisal ada kategori makanan, kemudian menjurus ke makanan berkuah, kemudian menjurus lagi ke bakso. Kalau diilustrasikan menjadi : makanan --> makanan berkuah --> bakso. Dengan cara ini, pembaca dapat memahami peta blog dengan baik.

2. Breadcrumbs memudahkan pengunjung untuk melakukan satu klik akses ke peta topik yang lebih tinggi. Pada blog standart, hal seperti ini tidak akan ditemui.

3. Jejak breadcrumb itu mudah dipahami bahkan oleh orang yang awam terhadap internet sekalipun.

4. Breadcrumbs mengambil ruang yang sangat sedikit pada halaman.

Baiklah kawan, setelah kita sedikit mengetahui alasan-alasan mengapa breadcrumb sangat dibutuhkan dalam hal peningkatan SEO suatu blog, maka hal berikutnya adalah bagaimana cara memasang breadcrumb pada blog.

1. Masuk/sign in ke dalam dashboard blog kita.

2. Pilih bagian 'template/rancangan', kemudian edit bagian html dan klik bagian process

3. Jangan lupa centang bagian 'Expand Widget Templates' untuk memperlihatkan code html lebih detail. Bagi yang masih belum terbiasa dengan kode html lebih baik simpan dulu kode-nya sebelum diubah.

4. Kemudian cari kode berikut ini :

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

kemudian letakkan kode berikut ini diatasnya persis.

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>

          Browse:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>

        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

5. Setelah itu, cari kembali kode seperti di bawah ini :
<b:if cond='data:post.dateHeader'>

Letakkan kode berikut ini diatasnya :
<b:include data='post' name='breadcrumbs'/>

6. Langkah terakhir adalah cari kode ]]></b:skin> , kemudian copy kode berikut tepat diatasnya :

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

7. Simpan dan silahkan lihat hasilnya. Jika breadcrumb tidak muncul berarti ada yang salah dalam peletakan kode-kode diatas. Selamat mencoba.