Cara Menambahkan Breadcrumbs Blogspot SEO Friendly

Breadcrumbs adalah sebuah posisi kata kunci atau label dari sebuah informasi yang dibaca oleh pengunjung dalam sebuah website. Pengunjung dapat mengetahui keterkaitan kata kunci dari informasi tersebut guna membantu pembaca dapat menelusuri artikel lainnya yang memiliki keterkaitan topik pembahasan. Secara default breadcrumbs tidak akan dimunculkan pada sebuah halaman blog terkecuali kita sendiri yang menambahkannya dan itu juga sifatnya opsional, tapi kalau dilihat dari kacamata SEO menurut saya penggunaannya sangat disarankan di halaman blog. Umumnya breadcrumbs akan diletakan pada posisi diatas postingan sebuah artikel.

Setelah membaca penjelasan mengenai breadcrumbs, dibawah ini adalah proses pemasangannya. Tapi sebelum memulainya, saya ingatkan untuk selalu menyimpan atau membuat backup template yang sedang digunakan.

Cara memasang breadcrumbs pada blogspot

1. Buka halaman blogger dan login akun blogger.
2. Pilih bagian template.
3. Pilih edit HTML.
4. Copy kode - kode yang ada dibawah ini

Cari kode ]]></b:skin> dengan menggunakan CTRL + F, kemudian copy kode dibawah ini.

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Cari kode <b:includable id='main' var='top'> dan ganti kode tersebut 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'/>

Setelah selesai menambah CSS breadcrumbs dan kode HTML breadcrumbs seperti di atas pilih save template, coba buka halaman blog kita kemudian test untuk membuka salah satu artikel untuk melihat breadcrumbs yang telah terpasang.
Sampai disini dulu tutorial tentang cara "Menambahkan Breadcrumbs di Blogspot yang SEO Friendly", semoga dengan tutorial ini dapat membantu kita membuat template Blogger lebih optimal di mata mesin pencari.
Terima kasih

Artikel ini ditulis oleh :
Perbloggeran
Sumber :
Techrevolution90