Bagaimana Cara Membuat Breadcrumb yang SEO Friendly? - Cemonggaul.COm

Bagaimana cara membuat breadcrumb yang SEO Friendly? - Kali ini Cemonggaul.Com mau melanjutkan tutorial cara membuat template blogger yang kemarin sudah selesai dan mulai memodifikasi agar template yang telah dibuat lebih SEO friendly. Kalau kemarin kita sudah memodifikasi heading menjadi dynamic heading, saat ini kita akan berlanjut untuk membuat breadcrumb SEO friendly.

Pengertian Breadcrumb

Menurut wikipedia bahasa Inggris setelah diterjemahkan ke bahasa Indonesia menggunakan bantuan google translator, breadcrumb adalah bantuan untuk navigasi yang digunakan dalam user interface. Sehingga hal ini akan memungkinkan para pengguna untuk melacak lokasi mereka dalam program atau dokumen. Istilah breadcrumb ini berasal dari cerita jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dalam dongeng yang telah populer.

Masih menurut pengertian dari wikipedia, Breadcrumbs biasanya tampil horizontal pada bagian atas halaman website, sering juga terlihat di bawah bar judul atau header. Mereka menyediakan link kembali ke halaman sebelumnya setiap pengguna dapat menggunakan untuk navigasi agar sampai ke halaman saat ini atau biasa disebut situs-hirarkis struktur-halaman induk yang sekarang dikunjungi. Breadcrumbs akan memberikan jejak bagi pengguna agar dapat mengikuti titik awal entri. 

Breadcumb tampilannya adalah terlihat seperti dibawah ini:
Home >> Category >> Judul artikel atau bisa juga seperti ini Home: Category: Judul artikel

Sepengetahuan Cemonggaul.Com breadcrumb ada 2 macam, terindeks search engine dan yang tidak terindeks search engine. Walaupun pada praktenya tampilan breadcrumb itu sama saja, namun pada awalnya breadcrumb tidak terindeks di search engine (SE), namun seiring perkembangan SEO akhirnya terciptalah breadcrumb yang bisa terindeks search engine sehingga dikatakan breadcrumbs SEO friendly.

Cara membuat breadcrumb SEO freindly

Untuk membuat breadcrumb pada template yang telah dibuat kemarin, silahkan ikuti panduan berikut ini;

• Buka menu template
• Alangkah baiknya bila di back up dulu template Anda
• Masuk ke Edit HTML dan centang Expand Template
• Kemudian letakkan kode CSS berikut sebelum tanda ]]></b:skin
  .breadcrumbs {padding:5px 5px 5px 0px; font-size:85%; line-height: 1.5em; border-bottom:3px double #ddd;}
  
• Setelah itu cari kode <b:includable id='main' var='top'>. Agar lebih mudah mencarinya gunakan Ctrl+F atau tekan tombol F3 di keyboard
• Setelah ketemu, ganti kode diatas 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'/>
  
• Simpan template Anda dan lihat hasilnya

Begitulah cara membuat breadcrumb yang SEO friendly.