Pada kesempatan kali saya kembali mengangkat topic tentang SEO, jika sebelumnya saya membahas tentang Mengenal Fungsi Heading Tag dan Cara Mengatur Heading Tag Dengan Benar, maka kali ini saya ingin 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, namun bagi pemula seperti saya tentu masih perlu banyak belajar tentang breadcrumb ini. Saya membuat posting ini pun karena hasil pembelajaran saya tentang breadcrumb di beberapa blog orang lain. Ok langsung saja kita bahas tentang breadcrumb ini.
Apa Itu Breadcrumb?
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.
Jika dilihat sekilas, memang agak mirip dengan Menu Navigasi utama karena memang fungsinya sama – sama navigasi. Perbedaan keduanya adalah Menu Navigasi utama akan selalu tetap demikian tampilan dan isinya sekali pun anda berpindah ke artikel – artikel lain di blog yang sama, Berbeda dengan breadcrumb, ketika anda membuaka artikel lain dengan label yang berbeda tentu breadcrumb yang muncul akan berbeda (Label). Selain itu perbedaan lainyang signifikan adalah penerapan dalam SEO, breadcrumb dapat menggantikan URL utama sebuah artikel sehingga terlihat lebih professional. Perhatikan gambar berikut.
Perhatikan yang saya beri garis warna merah. Itu merupakan breadcrumb yang diterapkan dalam SEO. Breadcrumb tersebut dalam SERP (Search engine Result Page) menggantikan URL asli artikel anda. Bandingkan dengan yang belum memakai breadcrumb berikut.
Gambar diatas diambil saat masih belum menggunakan breadcrumb. Bandingkan kedua gambar tersebut. Manakah menurut anda yang memiliki estetika yang bagus dan rapi dari hasil pencarian di Search Engine Google tersebut?Dan manakah yang menurut anda lebih SEO Friendly? Jika anda menjawab yang kedua, mungkin anda harus segera close artikel ini, karena anda masuk pada artikel yang salah (Ha ha ha). Namun jika jawaban anda yang pertama, anda membaca artikel yang tepat.
Bagaimana Cara Membuat Breadcrumb SEO Friendly?
Masuk pada menu edit template anda, untuk blogger Template > Edit HTML. Kemudian anda 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 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>
Kemudian setelah anda mengganti kode tersebut, cari lagi kode ]]></b:skin>. Dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>.
Setelah selesai bisa anda simpan. 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.
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
Setelah selesai bisa anda simpan. 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 telah muncul berarti anda sukses memasang breadcrumb di blog anda. hanya sekedar tips saja, jika saat anda memasang breadcrumb ini anda telah memiliki artikel, index ulang lah artikel anda agar URL yang muncul di SERP bisa langsung tergantikan oleh breadcrumb. anda bisa menggunakan fasilitas Fetch As Google untuk index ulang, jika belum paham anda bisa membacanya di artikel saya Cara Cepat Terindeks Google Dengan Fetch As Google . Sekian artikel saya tentang Cara Membuat Breadcrumb SEO Friendly semoga artikel ini bermanfaat.
