Penerapan SEO pada blog memang terbilang gampang susah ada banyak metode yang dipakai dan ada banyak juga kode script yang harus di perhatikan dalam penerapannya di template blog. Salah satunya adalah pemasangan Breadcrumbs yang akan kita bahas kali ini. Ini adalah postingan lanjutan yang sebelumnya pernah saya bahas juga Cara Membatasi Jumlah Post Pada Breadcrumb dan Label.
Seperti yang kita ketahui juga penerapan Breadcrumbs ini erat kaitannya dengan SEO pada blog yang akan mempermudah perayapan pada Blog khususnya pada Google agar semua label yang ada di blog dapat dengan mudah dirayapi dan hal ini juga sudah saya buktikan saat di google search mencari kata dibalikseo akan tampil semua label yang sudah terindex dan sukses dirayapi oleh Google search.
Bagi sobat yang belum mengetahui apa itu Breadcrumbs, adalah menu navigasi yang terpasang biasanya berada diatas judul postingan website atau blog. Dimana terdapat link yang menuju ke label tertentu seperti Home, halaman utama dan seterusnya di ikuti dengan Judul lainnya.
Bagi yang mau mencobanya silahkan ikuti penerapannya berikut dibawah ini Cara Memasang Breadcrumbs SEO Friendly.
Langkah Pertama
Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode ]]></b:skin> atau kode </style>.
/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}Langkah Ke Dua
Silahkan sobat cari kode HTML seperti dibawah ini.
<b:includable id='main' var='top'>...</b:includable>Setelah ketemu silahkan tambahkan kode HTML untuk Breadcrumbs tepat diatas kode tadi.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=5"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>Selalu perhatikan penerapan langkah kodenya, ada baiknya di backup terlebih dahulu templatenya untuk antisipasi jika terjadi error. Setelah selesai silahkan SAVE, selamat mencoba.
EmoticonEmoticon