Cara Membuat Breadcrumb Navigasi Terdeteksi Google

Anda telah terbiasa menemukan artikel yang berjudul Breadcrumb Navigasi di beberapa blog. Namun, kali ini berbeda. Karena Breadcrumb Navigasi ini dapat terdeteksi di Google Search Engine. Selain untuk memudahkan pengunjung dalam menavigasi blog, Breadcrumb Navigasi berguna untuk meningkatkan SEO On Page bagi blog anda. Dan ini akan berdampak positif bagi SERP blog anda. Ini screenshot blog saya yang Navigasi Breadcrumb nya sudah terdeteksi di Google :

Baik, berikut Cara Memasang Breadcrumb Navigasi pada Blogger (Blogspot) agar Terdeteksi di Google Search Engine :

1. Login ke Blogger
2. Masuk ke Template
3. Klik Edit HTML
4. Centang "Expand Template Widget"

5. Sekarang tekan CTRL + F dan cari kode <div class='post-hentry'>

6. Letakkan kode berikut SEBELUM (diatas) kode diatas :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'>
<span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> - <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' itemprop='url'> , <span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'/></b:loop></b:if></span> - <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><span itemprop='title'><data:post.title/></span></span>
</div>
</b:if>
</b:if>

7. Sekarang tekan CTRL + F dan cari kode ]]></b:skin>


8. Letakkan kode berikut SEBELUM (diatas) kode diatas :

.breadcrumb{margin:2px 2px 5px 2px;overflow:hidden;border:1px solid #000;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color:#000;}

Catatan : Silahkan modifikasi sendiri kode CSS diatas agar terlihat lebih bagus.


9. Simpan Template


Bagaimana hasilnya ??? Ada kesalahan atau kebingungan, silahkan bertanya di kotak komentar dibawah dengan MENYERTAKAN LINK BLOG ANDA (link blog hasil Breadcrumb diatas) agar saya bisa membenahinya.