Cara Memasang Breadcrumb SEO Friendly di Blog

Breadcrumb biasanya muncul secara horizontal di atas postingan blog/web. Fungsi breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu breadcrumb juga sangat baik untuk SEO, karena memperkaya kata kunci dalam postingan. Cara memasang breadcrumb SEO Friendly di blog juga sangat mudah, berikut ini langkah-langkahnya:
Baca juga: Pengertian SEO (Search Engine Optimization)

Cara Memasang Breadcrumb SEO Friendly di Blog:
Masuk ke blogger.com -> Buka Template -> Edit HTML
Cari kode ]]></b:skin> ( CTRL+F pada Edit HTML untuk memudahkan pencarian)
Simpan kode dibawah ini diatas kode ]]></b:skin>

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

Kemudian cari kode <b:includable id='main' var='top'>, jika sudah ketemu, 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'/>

Langkah terakhir tinggal Simpan template sobat. Cek di Google Reachsnippet tools untuk melihat perubahan yang sobat lakukan diatas. Buka link ini: Google Tools Structure Data, kemudian masukan alamat url postingan blog sobat -> Jalankan pengujian.
Jika hasilnya seperti gambar dibawah ini, berarti sobat sudah berhasil dalam memasang breadcrumb diblog sobat.