Membuat Breadcrumb Di Blog Yang Ter-index Di Penulusuran Google

Pada postingan kali ini saya akan memberikan tutorial cara membuat breadcrumb di blog. Apa itu Breadcrumb? dan apa fungsi nya pada sebuah WEB/BLOG? Dan bagaimana cara menerapkannya pada blog? Mari kita simak bersama-sama.


Pengertian Dan Tujuan Breadcrumb
Breadcrumb itu menurut perkiraan saya merupakan navigasi urutan link yang berada pada suatu website atau blog, biasanya breadcrumb ini berada diatas judul artikel pada sebuah blog atau website dengan contoh struktur seperti ini : Home > Blog > Tutorial Blog > Isi Artikel. Breadcrumb ini bertujuan agar mempermudah pengunjung blog mengetahui letak atau path sebuah artikel yang berada dalam kategori  sebuah WEB/BLOG, jadi pengunjung bisa dengan mudah mengakses laman-laman yang ada pada blog sobat, dan akan membuat pengunung betah berlama-lama mengunjungi blog sobat.

Contoh tampilan breadcumb di blog saya seperti ini :

Menerapkan Breadcrumb Pada Blog
Nah bagi sobat yang ingin mendesain blog nya dengan breadcrumb agar lebih terlihat seo friendly bisa mengikuti langkah-langkah yang akan saya berikan di bawah ini,

Contoh Tampilan Breadcrumb Di penelusuran Google

Tahapan membuat breadcrumd di blog
1. Login ke Blog sobat pilih Templete > Edit HTML
2. Jika sebelumnya sobat udah memesang breadcrumb hapus aja breadcrumb yang lama
3. Copy kode di bawah ini dan pastekan dia atas kode ]]></b:skin>  

.breadcrumbs{padding:0 5px 3px 5px;margin-right:5px;margin-left:5px;margin-bottom:10px;margin-top:0px;font-size:11px;color:#5B5B5B;border:1px solid #F0F0F0;}

4. Lalu cari kode <b:includable id='main' var='top'> untuk mempermudah pencarian tekan Ctrl+F, setelah itu ganti kode <b:includable id='main' var='top'> dengan kode di bawah 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'/>

5. Dan terakhir save templete sobat. Keep Enjoy!

Mungkin 2-3 hari breadcrumb akan muncul di penulusuran google, nah itu lah tutorial dari sya tentang acara membuat breadcrumb yang Ter-index Di Penulusuran Google, semoga bermanfaat.