Breadcrumb adalah elemen navigasi dalam sebuah situs web atau aplikasi yang menunjukkan lokasi pengguna dalam struktur hierarki halaman. Breadcrumb biasanya ditampilkan di bagian atas halaman dalam bentuk teks yang dipisahkan oleh tanda seperti “>” atau “/”, dan membantu pengguna menelusuri kembali ke halaman sebelumnya atau ke kategori utama dengan mudah.
Apa itu Breadcrumb?
Breadcrumb adalah navigasi berbentuk jalur yang menunjukkan lokasi atau posisi halaman yang sedang dibuka oleh pengguna dalam struktur situs web. Breadcrumb membantu pengguna memahami di mana mereka berada di dalam situs, dan memberikan cara cepat untuk kembali ke halaman-halaman sebelumnya.
Istilah “breadcrumb” berasal dari cerita Hansel dan Gretel,
di mana dua anak meninggalkan jejak remah roti (breadcrumb) untuk menemukan jalan pulang. Dalam konteks web, breadcrumb bekerja dengan cara yang mirip: sebagai jejak navigasi.
Contoh Breadcrumb di Website:
Beranda > Produk > Pakaian > Jaket
Artinya, pengguna saat ini berada di halaman “Jaket”, yang berada di bawah kategori “Pakaian”, yang merupakan bagian dari “Produk”, yang dimulai dari “Beranda”.
Biasanya Breadcrumb Digunakan di:
- Toko online (e-commerce)
- Website dengan struktur kategori bertingkat
- Blog atau portal berita
Baca Juga: Apa itu Keyword dalam SEO? Berikut Penjelasannya!
Fungsi Breadcrumb
Berikut ini adalah beberapa Fungsi Breadcrumb:
- Meningkatkan navigasi pengguna – Pengguna bisa cepat kembali ke kategori sebelumnya tanpa harus menggunakan tombol “Back”.
- Menunjukkan posisi pengguna – Memberi konteks di mana pengguna berada dalam struktur situs.
- Membantu SEO – Mesin pencari seperti Google menggunakan breadcrumb untuk memahami struktur situs dan menampilkan navigasi di hasil pencarian.
Manfaat Breadcrumb
Berikut adalah manfaat utama breadcrumb dalam sebuah website:
1. Mempermudah Navigasi Pengguna
Breadcrumb membantu pengunjung mengetahui posisi mereka dalam struktur situs dan kembali ke halaman sebelumnya tanpa harus menekan tombol “Back” berkali-kali.
Contoh:
Beranda > Artikel > Teknologi > AI
Pengguna bisa klik “Teknologi” untuk melihat kategori lain tanpa mengulang pencarian.
2. Meningkatkan Pengalaman Pengguna (UX)
Dengan breadcrumb, pengguna merasa lebih nyaman dan tidak tersesat saat menjelajahi situs yang kompleks, seperti toko online atau blog dengan banyak kategori.
3. Mengurangi Bounce Rate
Karena pengguna lebih mudah berpindah ke halaman lain, mereka cenderung menjelajah lebih lama, bukan langsung keluar dari situs.
4. Membantu Mesin Pencari (SEO)
Breadcrumb membantu Google dan mesin pencari lainnya memahami struktur situs, sehingga breadcrumb sering muncul di hasil pencarian sebagai bagian dari rich snippet, yang meningkatkan visibilitas.
5. Menghemat Ruang
Breadcrumb tampil ringkas dan horizontal, sehingga tidak memakan banyak tempat dibandingkan menu navigasi lainnya.
6. Membantu Aksesibilitas
Pengguna dengan keterbatasan dapat menggunakan breadcrumb untuk orientasi dan navigasi yang lebih jelas, terutama saat menggunakan pembaca layar.
Jenis – Jenis Breadcrumb
Berikut adalah beberapa poin dari Jenis-Jenis Breadcrumb:
- Location-based: Menunjukkan struktur hierarki situs.
Contoh: Beranda > Kategori > Sub-kategori - Attribute-based: Berdasarkan filter pencarian.
Contoh: Beranda > Baju > Warna: Merah > Ukuran: M - Path-based: Berdasarkan riwayat yang dilalui pengguna. Kurang umum dan tidak direkomendasikan karena bisa membingungkan.
Kalau kamu sedang merancang situs atau aplikasi, penggunaan breadcrumb bisa sangat membantu untuk kenyamanan pengguna dan peningkatan visibilitas situs.
Cara Membuat Breadcrumb di WordPress
Berikut adalah cara membuat breadcrumb di WordPress, baik secara manual maupun menggunakan plugin:
1. Menggunakan Plugin (Paling Mudah)
Yoast SEO (Gratis & Populer)
Langkah-langkah:
- Install dan aktifkan plugin Yoast SEO
- Masuk ke Dashboard WordPress → Plugins → Add New
- Cari “Yoast SEO”, klik Install lalu Activate
- Aktifkan fitur breadcrumb
- Pergi ke SEO → Search Appearance
- Klik tab Breadcrumbs
- Klik “Enable breadcrumbs” lalu Save Changes
- Tambahkan kode ke tema (jika perlu)
- Buka Appearance → Theme File Editor
- Cari file single.php, page.php, atau tempat di mana breadcrumb ingin ditampilkan.
Tambahkan kode ini di tempat yang diinginkan:
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}2. Menggunakan Plugin Breadcrumb NavXT (Alternatif)
Langkah-langkah:
- Install plugin “Breadcrumb NavXT”
- Setelah aktif, breadcrumb akan otomatis tersedia.
Kamu bisa mengatur tampilannya di:
- Settings → Breadcrumb NavXT
Untuk menampilkan breadcrumb, masukkan kode ini di file tema:
if(function_exists('bcn_display')) {
bcn_display();
}3. Breadcrumb dari Tema WordPress
Beberapa tema WordPress (seperti Astra, OceanWP, dan GeneratePress) sudah memiliki fitur breadcrumb bawaan.
Cara cek:
- Masuk ke Appearance → Customize → Breadcrumbs
- Aktifkan fitur breadcrumb jika tersedia
4. Membuat Breadcrumb Secara Manual (Opsional & Butuh Koding)
Jika tidak ingin pakai plugin:
- Tambahkan fungsi breadcrumb di functions.php
- Buat logika breadcrumb menggunakan PHP dan WordPress Loop
- Tapi cara ini kurang disarankan untuk pemula, lebih baik gunakan plugin.
Baca Juga: Slug Adalah: Pengertian, Fungsi, Tips
Kesimpulan
Breadcrumb adalah elemen navigasi pada situs web yang menampilkan jalur atau lokasi halaman yang sedang diakses pengguna, dalam bentuk hirarki. Breadcrumb memudahkan pengguna menavigasi kembali ke halaman sebelumnya, meningkatkan pengalaman pengguna (UX), dan membantu mesin pencari memahami struktur situs (SEO).
Breadcrumb itu ibarat jejak digital yang bantu kamu tahu posisi halaman saat menjelajah situs biar nggak nyasar! Nah, biar buka website cepat dan navigasi makin lancar, kamu butuh koneksi yang ngebut juga. Mulai dari 160 ribuan, paket internet only dengan kecepatan hingga 1 Gbps siap nemenin kamu jelajah tanpa hambatan.
