Baca Juga
Cara membuat Breadcrumb SEO Friendly
Oke semuanya ketemu lagi kali ini saya kembali mengangkat topic tentang blog SEO, jika sebelumnya saya membahas tentang CARA AGAR WEBSITE LANGSUNG TERINDEX OLEH GOOGLE , Maka dipertemuan kali ini saya ingin sekali membahas tentang Cara membuat Breadcrumb SEO Friendly.Sebenarnya sudah banyak yang membahas tentang bagaimana cara membuat breadcrumb, saya hanya ingin coba mengulas kembali tentang breadcrumb ini. Mungkin bagi yang sudah lama mengenal dunia blogging tidak asing dengan istilah breadcrumb ini bahkan telah mahir menerapkannya dalam SEO, Saya membuat posting ini pun karena hasil pembelajaran saya tentang breadcrumb di beberapa blog orang lain. Ok langsung saja kita bahas tentang breadcrumb ini.
Breadcrumb Itu Apa si??
Hal pertama yang harus anda pelajarin tentang breadcrumb adalah mengetahui apa sih breadcrumb itu. Breadcrum adalah sebuah navigasi yang dibuat pada blog oleh pemilik blog yang biasanya ditujukan untuk memberikan informasi kepada pengunjung, dimana mereka sekarang. Breadcrumb sendiri biasanya disusun berdasarkan Label. Breadcrumb pada blog disusun secara Hirarki atau bertingkat mulai dari Home Page kemudian Label, ada juga yang menambahkan hingga Judul Artikel. Berikut adalah contoh penerapan breadcrumb pada blog, perhatikan titik yang saya beri garis merah.
Setelah kita lihat diatas pasti berpikir " ah ternyata breadcrumb cuma begitu saja toh"
Nah jangan salah ya! meskipun Breadcrumb hanya itu bentuknya namun bisa Berefek pada blog anda menjadi SEO FRIENDLY
Selain itu perbedaan yang laiin lebih signifikan adalah penerapan dalam link SEO, breadcrumb dapat menggantikan URL utama sebuah artikel sehingga terlihat lebih professional. Perhatikan contoh dari perbedaan gambar berikut.
 |
| Gambar Dengan Breadcrumb |
Dan ini contoh dari gambar tanpa menggunakan Breadcrumb
 |
| Gambar Tanpa Menggunakan Breadcrumb |
Kita Langsung Saja ke penerapan Cara Menggunakan Breadcrumb pada blog kalian.
Buka Dasboard Blogger anda, Pada Bilah samping kiri tekan TEMA > Lalu Tekan Edit HTML.
Kemudian kalian cari kode <b:includable id='breadcrumb' var='posts'>...</b:includable>
Jika anda kesulitan cari kode tersebut anda hanya perlu cari kode <b:includable id='breadcrumb' var='posts'>. Kemudian ganti semua kode itu 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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></span><span class='index'><i class='fa fa-file-text-o'/> <data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<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'><span itemprop='title'><i class='fa fa-home'/> Home</span></a> </span><b:loop values='data:post.labels' var='label'> <i class='fa fa-play' style='font-size:10px'/> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><i class='fa fa-folder-open-o'/> <span itemprop='title'><data:label.name/></span></a></span></b:loop> <span class='index' expr:title='data:post.title'><i class='fa fa-file-text-o'/> <b><data:post.title/></b></span>
</div>
<b:else/>
<div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><i class='fa fa-angle-right'/> <span class='index'>Unlabelled</span> <i class='fa fa-file-text-o'/> <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'><i class='fa fa-file-text-o'/> All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' itemprop='url' title='Omahblog.com'><i class='fa fa-home'/></a></span><span class='index'><i class='fa fa-folder-open-o'/> <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Setelah anda telah mengganti kode diatas tersebut, cari lagi kode ]]></b:skin>. Dan
letakkan / taruh kode dibawah ini tepat diatas kode ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
Setelah cara diatas sudah kalian lakukan. Saatnya untuk cek apakah breadcrumb yang anda buat muncul atau tidak anda bisa cek di Google Rich Snippets Testing Tool . Masukkan alamat URL salah satu artikel anda. bila berhasil akan muncul hasil seperti berikut.
Jika Sudah muncul Breadcrumb nya Sebagai berikut, bisa dilihat sendiri digambar, Oke terima kasih sudah datang ke website saya ini, sedikit tips saja yang bisa saya berikan kepada kalian semoga bermanfaat dah buat kalian semua :)
Jika kalian masih belum mengerti bisa kalian tanyakan saja dikoment.
Tags :
- Cara Membuat Breadcrumb
- How to create Breadcrumb
- Breadcrumb
