Cara Membuat Breadcrumbs Di Blog SEO Friendly

Breadcrumb adalah sebuah susunan menu navigation yang letaknya berada tepat di atas judul postingan, dan susunan menu ini diawali dengan home terlebih dahulu kemudian dilanjutkan dengan nama label atau kategori blog. Menu ini banyak digunakan para blogger untuk menghemat ruang dan mempercantik tampilan blog mereka. Tentu saja blog dengan tampilan yang rapi akan lebih menyenangkan bagi pengunjung untuk membaca.

Image from : codyhouse.co

Sederhananya, pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman/ homepage depan dengan mudah dan cepat.

Saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, namun yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

- Artikel pilihan : Cara Membuat Menu Navigasi Responsive Keren Di Blog

Seperti judul diatas, kali ini saya membagikan bagaimana Cara membuat breadcrumb di blog, dan tentunya SEO friendly, semua label dapat terindeks oleh Search Engine. Caranya pun sangatlah mudah dan simple, hanya tinggal menambahkan beberapa baris kode ke dalam template blog. Adapun langkah - langkah cara memasang breadcrumb di blogspot ini sebagai berikut :

1. Masuk ke Dashboard Blogger terlebih dahulu.
2. Masuk pada menu Template > Edit HTML.
3. Copy kode dibawah ini dan paste diatas kode "]]></b:skin>".

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

- Baca juga : Cara Membuat Widget Recent Comments Keren di Blog

4. Kemudian cari kode "<b:includable id='main' var='top'>", dan ganti 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'/>

5. Simpan Template dan lihat hasilnya.

Demikian, caranya cukup mudah dan breadcrumb pada blog Anda telah terpasang. Jika ada pertanyaan silahkan sampaikan melalui form komentar. Semoga bermanfaat.

Tweet

Subscribe to receive free email updates: