TUTORIAL : Cara Membuat Navigasi Breadcrumb Terindex Google

Prima Share - Halooo...!! udah beberapa hari ini gue enggak nulis lagi di Blog ini, kenapa ?? karena masih galau -_-, galau kenapa ?? akun Google Adsense gue kena banned -_- . Banned kenapa sih ?? enggak tau =_= *hiks* padahal dikit lagi udah mau payout tuh! sayang banget kan? itulah mengapa gue jadi enggak ada niat lagi buat ngeblog ... Tapi bukan gue namanya jika mudah menyerah hehehe ...

---

Navigasi breadcrumbs merupakan suatu navigasi atau petunjuk arah berbentuk internal link yang dapat mempermudah pengunjung dalam mengetahui dimana letak suatu konten blog/website. Navigasi breadcrumbs biasanya terletak diatas atau dibawah judul artikel. Biasanya urutan navigasi breadcrumbs akan dimulai dari Home/Beranda.Contohnya : 

Apa kegunaan " breadcrumb " ?? Untuk mempermudah pengunjung mengetahui letak / posisi suatu artikel juga memudahkan search engine seperti Google mengindex artikel dan terbukti breadcrumb juga memperbaiki posisi blog kita di SERP Google.

Bagaimana cara agar breadcrumb yang kita pasang bisa terindex di Google ?? ikuti langkah berikut ... 

Untuk mencegah hal-hal yang tidak diinginkan, sebaiknya backup template terlebih dahulu ...

1. Log-in ke Blogger
2. Dari Dashboard - Template - Edit HTML
3. Bagi yang sebelumnya sudah memasang breadcrumb, silakan dihapus dulu
4. Cari kode ]]></b:skin> dan letakan CSS berikut diatasnya

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

5. Lalu, cari kode  <b:includable id='main' var='top'>
6. Ganti kode diatas dengan kode 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. Simpan template

Untuk mengeceknya silakan ke http://www.google.com/webmasters/tools/richsnippets dan letakan salah satu URL artikelmu, jika berhasil nanti akan seperti ini 

Sekian artikel tentang TUTORIAL : Cara Membuat Navigasi Breadcrumb Terindex Google semoga bermanfaat ...