Istilah breadcrumb mungkin masih asing bagi Anda yang baru saja mendalami dunia website.
Breadcrumb sendiri berasal dari Bahasa Inggris yang bermakna remahan roti dalam Bahasa Indonesia.
Namun, tentu saja makna dalam dunia website tidak ada kaitannya dengan remahan roti.
Breadcrumb merupakan navigasi yang memudahkan pengunjung untuk mengetahui posisi mereka saat berada di suatu website.
Bisa dibilang, fungsi breadcrumb juga sangat penting untuk SEO.
Lalu apa itu breadcrumb?
Pengertian Breadcrumb
Pengertian Breadcrumb adalah navigasi yang memungkinkan pengunjung memahami posisi mereka saat mengunjungi sebuah website.
Breadcrumb merupakan petunjuk sederhana terhadap sebuah artikel yang berkaitan dengan kategori halaman situs dalam sebuah blog.
Breadcrumb merupakan elemen yang fungsinya menavigasi sebuah halaman website.
Dengan adanya breadcrumb, pengunjung bisa mengetahui struktur halaman yang sudah di buka oleh mereka.
Meskipun breadcrumb merupakan elemen website yang penting, breadcrumb belum tentu ditemukan di website lainnya karena beberapa website memang tidak menambahkan elemen ini.
Berikut contoh breadcrumb dalam sebuah website:
Contoh di atas adalah bentuk breadcrumb dari sebuah website yang membahas seputar teknologi. Breadcrumb ada yang berbentuk panjang seperti contoh di atas dan ada juga yang memiliki tampilan lebih pendek.
Panjang pendeknya breadcrumb tergantung pada struktur konten yang ada di dalam website. Jika website tersebut memiliki struktur yang ringkas, breadcrumb yang dihasilkan juga lebih pendek.
Biasanya, terletak di posisi atas website. Selain muncul di halaman website, breadcrumb juga bisa muncul di bagian hasil pencarian Google.
Jadi, saat Anda melakukan pencarian Google maka Anda bisa melihat gambaran umum mengenai struktur halaman website yang ditampilkan.
Istilah breadcrumb diambil dari dongeng “Hansel and Gretel” yang pergi ke hutan. Mereka meninggalkan jejak berupa remah roti (breadcrumbs) ke tanah agar tidak tersesat sehingga mereka bisa kembali pulang.
Kemudian istilah tersebut digunakan sebagai model navigasi website yang kini bisa Anda lihat di sebagian besar situs web.
Fungsi Breadcrumb untuk Website
Selain membantu menavigasi user, breadcrumbs juga memiliki sejumlah manfaat berikut:
1. Mengurangi bounce rate
User yang sulit mengoperasikan halaman web biasanya akan segera keluar dan beralih ke website lain.
Hal tersebut akan memberikan pengaruh pada bounce rate yang tinggi.
Meski bounce rate bukan faktor utama yang mempengaruhi peringkat website, tingkat bounce rate yang tinggi bisa menjadi indikasi Google bahwa website tersebut memiliki masalah pada User Experience.
Oleh karena itu, Anda disarankan untuk menyediakan navigasi breadcrumb pada website agar pengunjung lebih mudah dalam menjelajah isi website dan menemukan informasi yang mereka butuhkan.
Adanya breadcrumb juga bisa mendorong user untuk membuka halaman lain dari situs website Anda.
Baca Juga : Apa itu Bounce Rate Website?
2. Meningkatkan user experience
Breadcrumb dapat meningkatkan user experience atau pengalaman pengguna.
Sebab, ia menawarkan kemudahan pada user ketika menavigasi situs web dan mempermudah user menemukan informasi yang mereka butuhkan dengan cepat.
Selain itu, user juga tidak perlu merasa khawatir tersesat karena mengetahui posisi hirarki halaman website tersebut.
3. Disukai oleh Google
Google sangat menyukai breadcrumbs karena membantu Google bots selama proses crawling dan indexing.
Crawler juga mengidentifikasinya dan menggunakan strukturnya untuk mengumpulkan informasi tentang halaman website.
Selain itu, Google juga akan menampilkan breadcrumb pada hasil SERP (Search Engine Result Page) untuk mengkategorikan informasi dari halaman penelusuran tersebut.
Breadcrumb pada SERP juga menunjukan users halaman mana yang akan diarahkan saat mengklik hasil pencarian yang ditampilkan.
Jenis Breadcrumb yang paling banyak digunakan
Ada banyak jenis breadcrumb yang biasa digunakan oleh website, berikut di antaranya:
1. Atribut based
Jenis ini memberikan navigasi yang dinamis berdasarkan halaman yang sudah diklik oleh user.
Atribut base biasanya digunakan dalam website e-commerce. Berikut contoh atribut based:
2. History based
History based merupakan navigasi yang menunjukan jejak sesuai dengan apa yang telah dilakukan users dalam situs web.
Jenis ini bisa Anda klik agar Anda bisa kembali ke laman tempat Anda berada sebelumnya.
Contoh navigasi history antara lain:
3. Hierarchy based
Hierarchy based merupakan navigasi yang menyediakan informasi kepada user mengenai posisi mereka dalam struktur website serta menginformasikan alur tersebut untuk kembali ke beranda.
Berikut contoh hierarchy based:
Pentingnya Breadcrumb untuk Website
Meski terlihat sepele, breadcrumb merupakan elemen penting untuk sebuah website.
Breadcrumb akan membantu Anda untuk mengoptimalkan SEO website Anda. Pada akhirnya, hal tersebut akan berpengaruh ke rangking mesin pencarian.
Breadcrumb merupakan elemen website yang disukai user dan bot dari mesin pencari karena memudahkan Google untuk memahami struktur data dalam website Anda.
Dengan struktur website yang jelas, Google bisa menampilkan hasil pencarian yang relevan terhadap website Anda.
Sementara itu, konten yang dianggap relevan oleh user akan menempati peringkat atas dalam mesin pencari.
Penggunaannya juga mampu mengurangi bounce rate yang meninggalkan website tanpa mengklik apapun.
Selain itu, breadcrumb juga mampu mengindeks halaman website hingga struktur navigasi yang paling dalam. Hal ini tentu akan membuat hasil pencarian website Anda di Google menjadi semakin relevan.
Pengunjung website juga bisa melewati navigasi yang rumit dari home page dan bisa langsung menemukan konten yang dicari hanya dalam satu kali klik.
Cara Membuat Breadcrumb di WordPress
Membuat breadcrumb di WordPress sangatlah mudah. Berikut cara untuk membuat breadcrumb di WordPress:
1. Instal Tema yang Kompatibel
Bagi Anda yang suka jalan praktis, menginstal tema yang sudah kompatibel adalah langkah tepat.
Biasanya, breadcrumbs sudah otomatis terpasang pada tema WordPress untuk ecommerce. Hal ini karena website ecommerce cenderung memiliki banyak items dan beragam menu navigasi.
Berikut rekomendasi tema WordPress khusus untuk ecommerce:
- Flatsome: Tema Woocommerce ini memiliki banyak pilihan demo. Tema ini juga memiliki pengaturan bawaan dan terintegrasi langsung dengan Yoast.
- Shopkeeper: Tema WooCommerce ini memiliki desain yang modern dan elegan. Proses pengaturan juga bisa dilakukan dengan mudah.
Selain tema khusus ecommerce, Anda juga bisa menggunakan tema premium seperti berikut:
- Knowledge Base: Tema WordPress ini didesain khusus untuk membuat pusat informasi.
- Smartmag: Tema WordPress ini berbasis majalah dan cocok untuk blog, portal informasi, dan berbagai konten berbasis teks.
2. Memaksimalkan Fitur Yoast
Cara lain untuk membuat breadcrumb adalah memaksimalkan fitur yang disediakan plugin Yoast.
Yoast adalah salah satu plugin yang bisa Anda gunakan untuk menangani segala hal terkait SEO.
Plugin satu ini membantu penulis untuk membuat konten berkualitas tinggi dan memaksimalkan technical SEO dalam website.
Yoast SEO juga memiliki fitur yang bisa Anda gunakan untuk mengoptimalkan snippet dan meta description.
Kedua elemen tersebut akan menambah tampilan konten agar terlihat lebih menarik di mesin pencari.
Dengan begitu, potensi konten Anda untuk di klik pengguna akan lebih besar. Untuk menambahkan breadcrumb pada website, Anda harus meletakan kode khusus di bawah single.php, page.php, atau header.php.
Kode yang harus Anda tambahkan sebagai berikut:
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>
Setelah meletakan kode tersebut, Anda bisa mengaktifkan breadcrumb melalui pengaturan SEO, kemudian pilih “Search Appearance. Kemudian pilih tab Breadcrumbs.
Pada bagian Breadcrumbs settings, silakan klik Enabled.
Anda juga bisa mengubah pengaturan lain pada tab tersebut seperti bold breadcrumbs tail pada halaman yang sedang dibuka atau memperlihatkan blog post.
Saat mengaktifkan fitur tersebut, Anda juga bisa mengakses pengaturan yang lebih spesifik pada halaman tertentu.
Berikut contohnya:
Jika judul post terlalu panjang, Anda juga bisa membuat judul khusus agar lebih rapi.
Untuk melakukannya, cukup klik bagian “Advanced” dan tuliskan judul alternatif pada bagian “Breadcrumbs Title”.
3. Menginstal plugin NavXT
Cara berikutnya untuk membuat breadcrumb di WordPress adalah dengan menginstal plugin NavXT.
Cara menggunakan plugin ini sangat mudah dan bisa Anda dapatkan secara gratis.
Namun sebelum menggunakan plugin ini, Anda harus membackup website Anda atau menambahkan kode khusus dalam file header.php yang ada pada child theme.
Berikut kode yang harus Anda tambahkan:
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
Kode tersebut berguna untuk menampilkan breadcrumb di area header website.
Namun jika dianggap terlalu teknis, Anda bisa menambahkannya melalui menu Appearance kemudian pilih Widgets.
Setelah itu, tarik widget Breadcrumb NavXT ke area yang diinginkan. Anda juga bisa mengatur bagaimana breadcrumb trail akan ditampilkan.
Fitur tersebut bisa Anda akses dengan cara mengakses menu “Setting” kemudian pilih “Breadcrumb NavXT”.
Setelah itu, akan muncul tampilan berikut:
Pada bagian tersebut, Anda bisa melakukan kustomisasi breadcrumbs sesuai dengan jenis konten atau keinginan Anda.
Itulah cara untuk membuat breadcrumb di WordPress. Ada tiga alternatif yang bisa Anda coba untuk membuat breadcrumbs pada website Anda. Meski terlihat sepele, kegunaan breadcrumb untuk website Anda sangat besar.
Breadcrumbs membantu memudahkan pengunjung untuk menjelajah website Anda sekaligus mempengaruhi peringkat SEO Anda.
Selain itu, breadcrumbs juga membantu Google mengindeks halaman website Anda dengan tepat dan mengurangi bounce rate pada website Anda.
