Awesome Breadcrumb SEO Friendly

Setelah sebelumnya saya pernah memberikan artikel tentang menu breadcrumb metro style yang mungkin akan lebih pas dan cocok buat kalian yang menggunakan template blog gaya metro style. Kini saya akan memberikan sedikit tips membuat navigasi breadcrumb agar blog lebih seofriendly, mungkin kalian semua sudah sering melihat beberapa tips - tips seperti ini di internet. Namun disini ada sedikit yang berbeda dengan menu breadcrumb yang saya berikan, yaitu menggunakan fitur font awesome bootstrap. Untuk tampilannya kira kira seperti gambar diatas.

Langsung saja kita masuk ke cara pemasangan di Blog :

Masukkan kode dibawah ini sebelum kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian Tambahkan kode CSS dibawah ini sebelum ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:10px;margin-top:0px;font-size:11px;color:#5B5B5B;}

Lalu cari Kode <b:includable id='main' var='top'> dan 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'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <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'><i class="icon-home"></i> HOME</a></span>
<b:loop values='data:post.labels' var='label'>
<i class="icon-check"></i> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
<i class="icon-check"></i> <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>Unlabelled</span> <i class="icon-check"></i> <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'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <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'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <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'/>

Terakhir Save template.

Fungsi dari navigasi breadcrumb ini agar semua label dapat ditampilkan dalam pencarian di search engine, untuk melihat hasilnya silakan check di http://www.google.com/webmasters/tools/richsnippets
Jika anda berhasil akan tampak seperti gambar dibawah ini :

Demikian sedikit tips blog kali ini semoga bisa bermanfaat

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku