Cara Membuat Breadcrumbs Seo Friendly

Oleh purnama

Minggu, 24 Agustus 2014

Bagikan :

Tweet

Cara Membuat Breadcrumbs Seo Friendly ~ Bagi sobat semua yang belum tahu bagaimana memasang breadcrumb pada blog. kali ini saya ingin berbagi pengetahuan kepada anda semua bagaimana sih cara memasang breadcrumb di blog yang seo friendly dan tentunya dapat terindeks oleh google. 

Sebenarnya apa sih breadcrumb itu dan apa fungsinya kok harus di pasang segala di blog ?, sesaat lagi akan saya perjelas tentang ungkapan di atas.

Pengertian breadcrumb !

Breadcrumb Navigation (menurut saya) adalah sebuah menu navigasi/penunjuk arah halaman yang sedang dibuka berupa link horisontal berurut yang diawali dengan menu Home/Beranda >> Label >> Judul Halaman Yang Sedang Dibuka. Letak dari menu Breadcrumb Navigation ini biasanya berada di atas judul postingan, jika sahabat blogger masih bingung silahkan lihat langsung screenshootnya di bawah ini :

Fungsi Breadcrumb untuk blog ?

Mengenai fungsinya, navigasi breadcrumb ini memiliki fungsi yaitu untuk mempermudah pengunjung melacak lokasi dalam dokumen dan kembali ke awal halaman/home-page dengan mudah. 

Menurut Jacob Nielsen, ditinjau dari sisi kegunaanya breadcrumb navigation berfungsi untuk menunjukkan lokasi/path dari halaman web/blog yang sedang dikunjungi, relatif terhadap struktur di atasnya serta menyediakan fitur one click access ke level halaman web/blog di atasnya sekaligus menghindari pengunjung tersesat karena terlalu dalam menjelajah web/blog kita. silahkan anda lihat gambar di bawah ini untuk lebih jelas .

Cara Membuat Breadcrumbs Seo Friendly Terindex Google :
Masuk ke bagian edit template
Untuk menjaga jika terjadi error silahkan Download dulu template anda
Cari kode ]]></b:skin>
Copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>

.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'>
Ganti dengan kode di bawah 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'/>

Kemudian Save template anda,
Jika terjadi error kemungkinan Breadcrumbs sudah ada sebelum pengeditan ini,
Segera hapus kode breadcrumbs yang lama dan save lagi.

Untuk menguji apakah anda berhasil membuat Breadcrumbs coba tes di http://www.google.com/webmasters/tools/richsnippets . demikian yang bisa saya bagikan pada kesempatan kali ini semoga bermanfaat bagi anda yang membutuhkan.

Tag : Tutorial Blog