Breadcrumbs

Breadcrumbs adalah salah satu alat navigasi pada website untuk membantu pengunjung mengetahui kategori halaman apa yang sedang mereka kunjungi.

Digital Marketing

Mau Belajar

Digital Marketing

GRATIS?

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!

IKUT KURSUS GRATIS

Mau Belajar

Digital Marketing

GRATIS?

Apa itu Breadcrumbs?

Apa itu Breadcrumbs
Apa itu Breadcrumbs

Dikutip dari Search Engine Journal, breadcrumbs navigation adalah salah satu alat navigasi pada website untuk membantu pengunjung mengetahui posisi mereka di situs tersebut. 

Tak hanya pada website, fitur ini juga dipakai dalam Windows untuk memudahkan user mengetahui lokasi suatu file atau folder

Breadcrumbs seperti sebuah peta, dan website seperti taman bermain yang luas. Tanpa peta, pengunjung akan kebingungan di mana lokasi mereka serta tempat lain yang ada pada taman bermain tersebut.

Apalagi ketika seseorang mengunjungi sebuah situs, ada kemungkinan mereka mengunjungi halaman yang lainnya. 

Misalnya, Sari mengunjungi situs e-commerce ‘B’ untuk mencari rekomendasi sepatu untuk jogging. Ada beberapa kategori sepatu yang tersedia berdasarkan jenisnya, seperti sepatu lari, high heels, dan sandal sepatu. 

Dengan breadcrumbs, Sari bisa mengunjungi halaman produk model-model sepatu lari dan bisa dengan mudah kembali ke halaman awal kategori sepatu. 

Fungsi Breadcrumbs

Breadcrumbs biasanya terletak di bagian atas website, tepatnya di bawah bilah navigasi. Hal ini untuk memudahkan pengunjung mengetahui kategori halaman apa yang sedang dilihat. 

Namun fungsi breadcrumbs tak hanya penting bagi pengunjung website, tapi juga untuk SEO. Berikut beberapa alasan breadcrumbs penting dimasukkan dalam website:

  • Breadcrumbs memudahkan bot search engine menemukan sebuah website karena konten di dalamnya terstruktur.
  • Breadcrumbs membantu search engine memahami konten yang ada dalam website dan struktur konten. 
  • Search engine seperti Google menampilkan breadcrumbs situs di halaman pencarian untuk menggolongkan informasi di halaman hasil pencarian.
  • Breadcrumbs mendukung user experience yang baik sehingga membuat pengunjung betah berlama-lama dalam website tersebut. 

Tipe-tipe Breadcrumbs

Dikutip dari Search Engine Journal dan Semrush, ada tiga jenis breadcrumbs yang umum digunakan. Setiap breadcrumbs memiliki fungsi dan tampilan yang berbeda, meliputi:

Jenis Breadcrumbs
Jenis Breadcrumbs

#1 Hierarchy-based breadcrumbs

Hierarchy-based breadcrumb atau location-based breadcrumbs adalah salah satu jenis breadcrumbs yang paling umum digunakan. 

Tampilan breadcrumbs ini sangat sederhana, dimulai dari halaman utama atau kategori yang paling luas lalu mengerucut ke sub-kategori yang lebih spesifik.

Misalnya pada sebuah e-commerce sepatu, hierarchy-based breadcrumb bisa terlihat seperti ini:

Beranda > Sepatu wanita > High Heels

#2 Path-based breadcrumbs

Tampilan path-based breadcrumbs atau juga disebut history-based breadcrumbs mirip dengan browser history yang menunjukkan situs apa saja yang pernah dikunjungi oleh user

Path-based breadcrumbs biasanya digunakan pada halaman interaktif seperti formulir Google, di mana user bisa kembali ke halaman sebelumnya tanpa kehilangan informasi yang telah dikirimkan. 

Misalnya, user menyadari ada typo di bagian alamat yang terletak pada halaman awal. Sedangkan pada halaman yang saat ini dikunjungi, hampir seluruh bagian sudah terisi. Dengan path-based breadcrumbs, user bisa kembali ke halaman pertama tanpa perlu mengisi ulang formulir di halaman kedua dari awal. 

#3 Attribute-based breadcrumbs

Attribute-based breadcrumbs adalah jenis yang paling sering digunakan pada e-commerce. Breadcrumbs ini menampilkan atribut atau kategori suatu produk untuk memudahkan user mencari produk yang diinginkan. 

Bisa dikatakan attribute-based breadcrumbs terlihat seperti filter pencarian produk. Misalnya, user ingin mencari sepatu gunung wanita terpopuler, maka attribute-based breadcrumbs yang akan tampil adalah sebagai berikut:

Beranda > Sepatu > Sepatu wanita > Sepatu gunung > Produk terpopuler

Contoh Breadcrumbs

Dimas sedang mencari perhiasan berlian untuk dihadiahkan kepada istrinya, namun ia tidak tahu perhiasan apa yang sebaiknya dibeli.

Ia pun memutuskan untuk mengunjungi situs Frank & Co karena memiliki pilihan perhiasan berlian yang banyak dengan berbagai model yang unik. 

Pada 'Beranda' situs tersedia beberapa kategori, salah satunya 'Ide Hadiah'. Dimas pun mengunjungi halaman ‘Ide Hadiah’ untuk ‘Wanita’ dan muncullah berbagai macam perhiasan mulai dari anting, cincin, dan kalung. 

Karena ada banyak produk yang ditawarkan, Dimas menggunakan fitur filter ‘Harga’ dengan rentang Rp 1 juta - 7 juta agar sesuai dengan budget-nya. Setelah itu, muncullah koleksi perhiasan sesuai dengan rentang tersebut. 

Breadcrumbs pada situs Frank & Co
Breadcrumbs pada situs Frank & Co

Namun Dimas tiba-tiba terpikir untuk ikut membelikan anaknya hadiah. Dimas pun kembali ke halaman ‘Ide Hadiah’ dan meng-klik ‘Untuk Anak’. 

FAQ (Frequently Asked Questions)

Kapan saja harus menggunakan breadcrumbs?

Breadcrumbs memang penting bagi SEO karena bisa membuat situs lebih mudah ditemukan pengunjung. Tapi, penggunaan breadcrumbs harus diperhitungkan.

Breadcrumbs sebaiknya digunakan jika struktur konten website terdiri lebih dari dua tingkat. 

Misalnya, situs belajar mandiri online yang membahas berbagai pelajaran seperti Biologi, Matematika, Ekonomi, dan lainnya. 

Setiap mata pelajaran berisi berbagai topik yang dibagi sesuai tingkatan atau kesulitannya. Karena banyaknya pembahasan topik atau tingkatan halaman, maka perlu pemisahan dengan breadcrumbs. Salah satunya seperti di bawah ini:

Beranda > Matematika > Tingkat SD > Kelipatan dan Faktor 

Ketika user mengunjungi halaman Kelipatan dan Faktor dan melihat breadcrumbs di atas, ia bisa tahu topik tersebut merupakan pelajaran Matematika tingkat SD.

Namun, jika struktur konten hanya memiliki satu tingkat, maka tidak perlu menggunakan breadcrumbs karena tidak ada manfaatnya bagi pengunjung.

Biasanya, situs kecil atau sederhana yang tidak memiliki banyak bahasan topik tidak membutuhkan breadcrumbs.

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program:

Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion.

Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program:
Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion.

Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program:

Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion.

Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Kata kunci lainnya

Mulai karirmu dalam

Digital Marketing

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!
ikut kursus gratis
Menu