Breadcrumbs SEO Friendly dan Valid HTML5

Memasang Navigasi Breadcrumbs merupakan salah satu cara untuk optimasi SEO, dengan memasangnya akan memudahkan pengunjung dan Mesin Pencari dalam menjelajahi blog Anda. Navigasi Breadcrumbs sangat penting untuk sebuah blog, oleh karena itu Breadcrumbs ini harus SEO agar data dapat tampil pada mesin pencari.

Breadcrumbs adalah sebuah peta dimana dan di kategori apa artikel yang kita buat di publikasikan. Adanya navigasi breadcrumbs pada blog akan memudahkan pengunjung untuk menjelajahi blog Anda, dengan begitu pengunjung dapat mengetahui dimana dan pada kategori apa artikel tersebut dipublikasikan.

Pada breadcrumbs ini sudah aku tambahkan title tag pada labelnya sehingga lebih SEO. Untuk pemasangan navigasi breadcrumbs silakan disimak baik - baik :D

Langkah Pertama

Silakan Anda simpan kode dibawah ini diatas kode ]]></b:skin> atau </style>.

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

Langkah Kedua

Silakan Anda cari kode dibawah ini pada template Anda.

<b:includable id='main' var='top'>

Kemudian Anda ganti dengan 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' title='Beranda'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Beranda'><span itemprop='title'>Beranda</span></a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></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' title='Beranda'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Arsip untuk <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' title='Beranda'>Beranda</a></span> &#187; <span>Semua posting</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Penelusuran <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'/>

Bagi Anda yang ingin membatasi jumlah artikel pada label breadcrumbs silakan baca artikel berjudul Membatasi Jumlah Artikel Pada Label Blog.