Setiap website punya alat bantu untuk mengarahkan pengunjung: menu utama di bagian atas, deretan tautan di footer, dan kotak pencarian internal. Ketiganya bekerja baik selama pengunjung masuk lewat halaman depan lalu menelusuri isi situs selangkah demi selangkah.

Masalahnya, sebagian besar pengunjung tidak datang lewat halaman depan. Mereka mendarat langsung di halaman produk atau artikel dari hasil pencarian Google. Menu utama sama sekali tidak memberi tahu mereka sedang berada di bagian mana dari situs tersebut.

Di titik inilah breadcrumbs mengambil peran. Breadcrumbs adalah baris penanda yang menampilkan posisi sebuah halaman di dalam struktur situs. Berkat penanda itu, pengunjung langsung tahu di mana dirinya berada dan bisa naik satu tingkat tanpa menebak-nebak.

Secara teknis, breadcrumb (kadang ditulis breadcrumb trail atau breadcrumb navigation) adalah rangkaian tautan mendatar yang menunjukkan jalur dari halaman utama sampai halaman yang sedang dibuka. Bentuknya kira-kira seperti ini:

Code
Beranda > Elektronik > Laptop > Laptop Gaming

Setiap ruas mewakili satu tingkat dalam hierarki situs. Ruas paling kanan adalah halaman aktif, sedangkan ruas di sebelah kirinya berupa tautan yang bisa diklik untuk naik ke tingkat yang lebih umum.

Istilah ini diambil dari dongeng Hansel dan Gretel yang dibukukan Grimm bersaudara pada 1812. Dua kakak beradik itu menjatuhkan remah roti sepanjang perjalanan agar bisa menemukan jalan pulang. Detail yang sering dilupakan: di dongeng aslinya remah itu dimakan burung dan jejaknya hilang. Kegagalan tersebut ternyata relevan untuk pembahasan nanti, saat kita membandingkan breadcrumb berbasis hierarki dengan breadcrumb berbasis riwayat.

Kata ini perlu diluruskan sejak awal karena maknanya memang bercabang. Breadcrumbs juga berarti tepung roti kasar untuk melapisi gorengan — panko adalah salah satu jenisnya. Ada pula istilah breadcrumbing di ranah hubungan personal, yang menggambarkan perilaku memberi perhatian sekadarnya tanpa niat serius. Ketiganya memakai kiasan yang sama, yaitu remah yang ditinggalkan sedikit demi sedikit. Hanya makna pertama yang dibahas di artikel ini.

Cara Kerja Breadcrumb: Membaca Struktur Situs, Bukan Riwayat Klik

Breadcrumb tidak menghitung halaman apa saja yang tadi Anda buka. Ia dibangun dari susunan kategori dan subkategori yang sudah ditentukan pemilik situs, jadi isinya tetap sama untuk semua pengunjung halaman tersebut. Dua orang yang membuka satu halaman produk dari jalur berbeda akan melihat breadcrumb yang identik.

Inilah pembeda utamanya dari tombol Back di browser. Tombol Back membawa Anda mundur ke halaman sebelumnya, apa pun halaman itu. Breadcrumb membawa Anda naik ke kategori induk, yang belum tentu pernah Anda kunjungi. Keduanya bukan pengganti satu sama lain; tombol Back menjawab pertanyaan "tadi saya dari mana", sementara breadcrumb menjawab "sekarang saya di mana".

Karena bersumber dari hierarki, breadcrumb biasanya sejalan dengan struktur URL halaman tersebut. Halaman dengan alamat situs.com/elektronik/laptop/laptop-gaming idealnya menampilkan breadcrumb dengan empat ruas yang sama urutannya. Kesejajaran ini membuat pengunjung dan mesin pencari membaca peta yang konsisten dari dua sumber berbeda.

Kesejajaran tersebut juga berarti penataan hierarki harus dibereskan lebih dulu sebelum memasang breadcrumb. Breadcrumb hanya menampilkan struktur yang sudah ada — ia tidak memperbaiki struktur yang berantakan.

Tiga Jenis Breadcrumb dan Kapan Masing-masing Dipakai

Nielsen Norman Group membagi breadcrumb ke dalam tiga bentuk berdasarkan sumber datanya. Pembagian ini dirumuskan dalam publikasi mereka pada 2007 dan masih dipakai sebagai acuan sampai sekarang.

  1. Breadcrumb hierarki (location-based): Menampilkan posisi halaman di dalam struktur situs, dari tingkat paling umum ke paling spesifik. Ini bentuk yang paling banyak dipakai dan paling stabil, karena isinya tidak berubah mengikuti perilaku pengunjung. Contoh: Beranda > Blog > Teknologi > Breadcrumbs Adalah.

  2. Breadcrumb atribut (attribute-based): Menampilkan ciri-ciri produk yang sedang dilihat, bukan letaknya di direktori. Bentuk ini cocok untuk situs yang isinya tidak bisa dipaksakan ke satu pohon kategori, misalnya toko yang produknya bisa disaring dari banyak sisi sekaligus. Contoh: Beranda > Sepatu > Pria > Ukuran 42 > Warna Hitam.

  3. Breadcrumb riwayat (path-based): Menampilkan urutan halaman yang benar-benar dilalui pengunjung. Bentuk inilah yang paling mirip dongeng Hansel dan Gretel, dan juga yang paling jarang direkomendasikan. Alasannya sederhana: informasinya sudah disediakan tombol Back, dan hasilnya berbeda-beda untuk setiap orang sehingga tidak bisa dijadikan pegangan.

Untuk sebagian besar situs — blog, portal berita, situs perusahaan, dokumentasi produk — bentuk hierarki sudah memadai dan sebaiknya menjadi pilihan pertama. Bentuk atribut baru masuk akal kalau katalog Anda memang punya banyak dimensi penyaringan.

Toko online justru kasus yang lebih rumit. Riset Baymard Institute terhadap 50 situs e-commerce besar menemukan 68% di antaranya bermasalah pada penerapan breadcrumb. Rinciannya: 45% hanya menyediakan satu jenis saja, dan 23% tidak memasang breadcrumb sama sekali.

Argumen Baymard, pengunjung yang tiba di halaman produk lewat pencarian internal atau filter tidak terlayani oleh breadcrumb hierarki murni. Tautan kategorinya mengembalikan mereka ke daftar polos, tanpa filter yang tadi dipasang.

Diagram tiga jenis breadcrumb: hierarki, atribut, dan riwayat, masing-masing dengan contoh jalur navigasinya.Diagram tiga jenis breadcrumb: hierarki, atribut, dan riwayat, masing-masing dengan contoh jalur navigasinya.

Fungsi Breadcrumb bagi Pengunjung dan Contohnya di Berbagai Situs

Dari sisi pengunjung, breadcrumb mengerjakan beberapa hal sekaligus:

  1. Memberi orientasi seketika: Dalam satu baris, pengunjung tahu halaman yang dibuka termasuk kategori apa dan seberapa dalam letaknya. Ini penting untuk pengunjung yang datang dari mesin pencari dan belum punya gambaran apa pun tentang situs Anda.
  2. Memangkas langkah untuk melebar: Pembaca ulasan satu model laptop yang ingin melihat model lain cukup mengklik ruas "Laptop". Tidak perlu kembali ke beranda lalu menyusuri menu dari awal.
  3. Menahan pengunjung lebih lama: Karena jalan keluar menuju konten serumpun terlihat jelas, pengunjung yang merasa halaman itu kurang cocok punya alternatif selain menutup tab.
  4. Memakan ruang yang sangat sedikit: Satu baris teks, nyaris tanpa tambahan beban muat halaman. Biayanya paling murah di antara elemen navigasi mana pun.

Bentuk nyatanya berbeda-beda tergantung jenis situs. Toko online umumnya memakai jalur kategori produk seperti Beranda > Dapur > Peralatan Masak > Panci Presto. Blog dan portal berita memakai kategori tulisan, misalnya Beranda > Blog > Keamanan Website > Cara Mengamankan Login. Situs dokumentasi teknis memakai struktur bab, seperti Docs > Panduan Instalasi > Konfigurasi Database. Pola tampilannya sama, yang berbeda hanya isi tiap ruasnya.

Selama bertahun-tahun, alasan paling sering dikemukakan untuk memasang breadcrumb adalah tampilannya di hasil pencarian. Google memang pernah mengganti tampilan URL di snippet pencarian dengan nama situs plus jalur breadcrumb, sehingga hasil pencarian terlihat lebih rapi.

Pada Januari 2025 Google mengubah kebijakan itu. Lewat blog resmi Search Central, Google mengumumkan bahwa breadcrumb tidak lagi ditampilkan di snippet hasil pencarian mobile, untuk semua bahasa dan wilayah. Alasan yang mereka sebutkan: elemen breadcrumb dinilai kurang bermanfaat di perangkat mobile karena kerap terpotong di layar sempit. Hasil pencarian desktop tetap menampilkan breadcrumb seperti sebelumnya.

Untuk sebagian besar situs berbahasa Indonesia, mayoritas pengunjung datang dari ponsel. Artinya manfaat "snippet jadi lebih rapi" praktis tidak lagi berlaku bagi mereka. Meski begitu, breadcrumb tetap layak dipasang karena tiga alasan yang tidak ikut berubah:

  1. Membantu mesin pencari memahami hierarki situs: Google memakai penanda BreadcrumbList untuk mengetahui posisi sebuah halaman di dalam struktur situs. Informasi ini dipakai untuk memahami hubungan antarhalaman, terlepas dari apakah breadcrumb-nya ikut ditampilkan di hasil pencarian atau tidak.
  2. Menambah tautan internal yang bermakna: Setiap breadcrumb menciptakan tautan dari halaman detail menuju halaman kategori induknya, dengan teks tautan yang deskriptif. Halaman kategori umumnya sulit mendapat tautan alami, dan breadcrumb memasoknya secara otomatis di seluruh situs.
  3. Menguatkan sinyal struktur yang sudah dibawa URL: Struktur alamat halaman dan breadcrumb saling mengonfirmasi, apalagi kalau penulisan slug tiap tingkat konsisten.

Jadi posisikan breadcrumb sebagai bagian dari kerapian struktur situs, bukan sebagai trik tampilan. Dalam kerangka SEO, ia masuk ke ranah teknis dan arsitektur informasi, bukan ke ranah kosmetik hasil pencarian.

Diagram breadcrumbs membandingkan hasil pencarian Google di desktop dan mobile dengan jalur kategori berbeda.Diagram breadcrumbs membandingkan hasil pencarian Google di desktop dan mobile dengan jalur kategori berbeda.

Cara Memasang Breadcrumb di Website Anda

Berikut urutan pemasangan dari perencanaan sampai verifikasi.

Langkah #1: Rapikan Hierarki Sebelum Menulis Kode

Gambar dulu pohon kategori situs Anda di kertas atau spreadsheet. Pastikan setiap halaman detail punya tepat satu kategori induk yang jelas, dan kedalamannya tidak berlebihan. Kalau satu halaman bisa masuk ke tiga kategori sekaligus, tentukan mana yang utama — itulah yang akan muncul di breadcrumb.

Langkah #2: Tulis Markup HTML yang Bisa Dibaca Semua Pengguna

Breadcrumb adalah blok navigasi, jadi bungkus dengan elemen <nav> dan isi dengan daftar berurutan. Panduan resmi W3C untuk pola breadcrumb meminta dua hal: elemen <nav> diberi nama lewat atribut aria-label, dan tautan halaman aktif diberi aria-current="page". Tanpa keduanya, pengguna pembaca layar hanya mendengar deretan tautan tanpa tahu itu breadcrumb.

Struktur HTML minimalnya seperti ini:

HTML
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Beranda</a></li>
    <li><a href="/elektronik">Elektronik</a></li>
    <li><a href="/elektronik/laptop">Laptop</a></li>
    <li><a href="/elektronik/laptop/gaming" aria-current="page">Laptop Gaming</a></li>
  </ol>
</nav>

Kalau halaman Anda punya lebih dari satu elemen <nav> — misalnya menu utama dan breadcrumb — masing-masing wajib punya aria-label yang berbeda agar bisa dibedakan.

Satu catatan soal tampilan: tanda pemisah antarruas sebaiknya dibuat lewat CSS, bukan diketik sebagai teks di dalam HTML. Pembaca layar tidak perlu membacakan karakter > di setiap ruas.

CSS
nav[aria-label="Breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

nav[aria-label="Breadcrumb"] li + li::before {
  content: "›";
  margin: 0 0.5rem;
}

Pemisah tersebut kini hanya hadir secara visual, karena isi content pada pseudo-element umumnya tidak ikut dibacakan pembaca layar. Properti flex-wrap mengurus sisi lain: rantai yang panjang tetap rapi saat harus melipat di layar sempit.

Langkah #3: Tambahkan Structured Data BreadcrumbList

Agar Google membaca hierarki tersebut secara eksplisit, sisipkan structured data (data terstruktur) format JSON-LD di halaman yang sama. Google mensyaratkan objek BreadcrumbList berisi larik itemListElement, dengan setiap ListItem memuat position (dimulai dari angka 1), name, dan item berupa URL.

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Beranda",
      "item": "https://situs.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Elektronik",
      "item": "https://situs.com/elektronik"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Laptop Gaming"
    }
  ]
}
</script>

Perhatikan ruas terakhir yang sengaja tidak diberi item. Google memperbolehkan hal ini dan otomatis memakai URL halaman yang sedang dimuat. Kalau sebuah halaman memang bisa dicapai lewat lebih dari satu jalur kategori, Google juga mengizinkan beberapa objek BreadcrumbList sekaligus di dalam satu larik pada satu tag <script>.

Langkah #4: Jalur Cepat untuk Pengguna WordPress

Pengguna WordPress tidak perlu menulis kode di atas secara manual. Plugin SEO populer seperti Yoast SEO dan Rank Math sudah membawa fungsi breadcrumb sekaligus structured data-nya. Sebagian tema modern juga menampilkan breadcrumb secara bawaan.

Yang perlu diperiksa justru satu hal: jangan sampai breadcrumb tampil dua kali karena tema dan plugin sama-sama aktif menampilkannya. Kalau itu terjadi, matikan salah satunya dari pengaturan tema atau plugin.

Langkah #5: Verifikasi Hasilnya

Setelah terpasang, uji satu URL contoh dengan Rich Results Test milik Google untuk memastikan penanda BreadcrumbList terbaca tanpa galat. Beberapa hari setelahnya, periksa laporan Breadcrumbs di Google Search Console untuk melihat cakupannya di seluruh situs dan galat yang mungkin muncul di halaman lain.

Kelemahan dan Hal yang Perlu Anda Pertimbangkan

Breadcrumb bukan elemen yang wajib ada di semua situs. Ada beberapa kondisi yang membuatnya tidak berguna, bahkan mengganggu.

  1. Situs dengan struktur datar tidak membutuhkannya: Pada situs yang hanya terdiri dari beranda dan beberapa halaman di bawahnya, breadcrumb Beranda > Tentang Kami tidak menambah informasi apa pun. Patokan praktisnya, breadcrumb baru berguna kalau situs punya minimal tiga tingkat kedalaman.
  2. Halaman arahan tunggal justru dirugikan: Halaman promosi yang dirancang untuk satu tujuan konversi sebaiknya tidak diberi breadcrumb. Setiap tautan tambahan adalah jalan keluar dari halaman tersebut.
  3. Rantai yang terlalu panjang berantakan di layar sempit: Breadcrumb dengan enam ruas dan nama kategori panjang akan melipat menjadi beberapa baris di ponsel. Kondisi ini harus ditangani, misalnya dengan menyingkat ruas tengah atau membuat barisnya bisa digeser mendatar.
  4. Breadcrumb yang berbohong lebih buruk daripada tidak ada: Label yang berbeda dari nama kategori di menu, atau tautan yang mengarah ke halaman tidak sesuai, akan membuat pengunjung berhenti memercayainya.
  5. Menjejalkan keyword ke label adalah kesalahan yang mahal: Godaan mengganti ruas "Laptop" menjadi "Laptop Murah Terbaik Bergaransi Resmi" sebaiknya ditolak. Label breadcrumb dibaca sekilas, dan label yang kepanjangan merusak keterbacaan tanpa memberi keuntungan peringkat.

Diagram berikut merangkum pertimbangan tersebut menjadi satu alur keputusan sederhana.

Alur keputusan memilih breadcrumb: cek kedalaman situs, lalu pilih jenis hierarki atau atribut, dan pasang BreadcrumbList.Alur keputusan memilih breadcrumb: cek kedalaman situs, lalu pilih jenis hierarki atau atribut, dan pasang BreadcrumbList.

Praktik Terbaik Breadcrumb dengan Angka Konkret

Rekomendasi di bawah ini bisa langsung Anda jadikan patokan tanpa perlu diperdebatkan lebih dulu.

Diagram tata letak halaman: baris breadcrumb ditempatkan di bawah header dan tepat di atas judul halaman.Diagram tata letak halaman: baris breadcrumb ditempatkan di bawah header dan tepat di atas judul halaman.

  1. Letakkan di atas judul halaman: Posisi lazimnya tepat di bawah header dan di atas elemen <h1>. Pengunjung terbiasa mencarinya di sana.
  2. Batasi kedalaman maksimal lima ruas: Lebih dari itu, tampilkan ruas pertama, satu penanda ringkas untuk bagian yang disembunyikan, lalu dua ruas terakhir.
  3. Jaga panjang label di bawah 25 karakter: Pakai nama kategori apa adanya. Kalau nama aslinya panjang, siapkan versi pendek khusus untuk breadcrumb.
  4. Buat ukuran fontnya sekitar 80–85% dari teks isi: Breadcrumb adalah elemen pendukung, jadi jangan sampai bersaing dengan judul.
  5. Pakai satu karakter sebagai pemisah: Tanda > atau / sudah cukup. Nielsen Norman Group menyarankan pemisah satu karakter justru karena netral dan tidak mencuri perhatian.
  6. Jangan pernah menjadikan halaman aktif sebagai tautan: Ruas terakhir ditulis sebagai teks biasa, dibedakan warnanya, dan diberi aria-current="page".
  7. Selalu mulai dari beranda: Ruas pertama berupa "Beranda" atau ikon rumah yang tetap punya teks alternatif.
  8. Pertahankan breadcrumb di tampilan mobile: Perubahan Google pada Januari 2025 hanya menyangkut hasil pencarian, bukan halaman Anda. Bagi pengunjung ponsel yang layarnya sempit, penanda posisi justru makin dibutuhkan.

Pertanyaan yang Sering Muncul Seputar Breadcrumb

Apa bedanya breadcrumb dengan menu navigasi?

Menu navigasi menampilkan seluruh pilihan utama yang tersedia di situs dan isinya sama di setiap halaman. Breadcrumb hanya menampilkan satu jalur, yaitu jalur menuju halaman yang sedang dibuka, sehingga isinya berbeda di tiap halaman. Keduanya dipasang berdampingan, bukan saling menggantikan.

Apakah wajib memasang structured data BreadcrumbList?

Tidak wajib, tetapi sangat dianjurkan. Tanpa penanda tersebut, breadcrumb tetap berguna bagi pengunjung, hanya saja Google harus menebak sendiri hierarki halaman Anda dari struktur tautan dan URL.

Apakah breadcrumb memengaruhi peringkat di Google?

Tidak secara langsung. Google tidak pernah menyebut breadcrumb sebagai faktor peringkat. Pengaruhnya bersifat tidak langsung lewat pemahaman struktur situs dan tautan internal menuju halaman kategori.

Blog kecil dengan 30 artikel apakah perlu breadcrumb?

Kalau artikelnya sudah tersusun dalam beberapa kategori dan kedalamannya mencapai tiga tingkat, breadcrumb tetap bermanfaat. Kalau semua artikel berada di satu tingkat yang sama tanpa kategori, sebaiknya rapikan kategorinya lebih dulu.

Kenapa breadcrumb situs saya tidak muncul di hasil pencarian ponsel?

Sejak Januari 2025 Google memang tidak lagi menampilkannya di snippet pencarian mobile. Ini berlaku untuk semua situs, bukan tanda ada yang salah dengan pemasangan Anda. Di hasil pencarian desktop breadcrumb tetap tampil.

Kesimpulan

Breadcrumbs adalah penanda posisi halaman di dalam hierarki situs, yang dibangun dari struktur kategori dan bukan dari riwayat kunjungan pengunjung. Bentuk hierarki adalah pilihan yang tepat untuk hampir semua situs, sementara bentuk atribut hanya relevan untuk katalog dengan banyak dimensi penyaringan.

Pasang breadcrumb kalau situs Anda punya minimal tiga tingkat kedalaman. Lewati kalau strukturnya datar atau halaman tersebut dirancang untuk satu konversi tunggal. Sejak Januari 2025 breadcrumb tidak lagi tampil di snippet pencarian mobile. Jadikan kerapian struktur dan kenyamanan pengunjung sebagai alasan utama memasangnya, bukan tampilan di hasil pencarian.

Semoga artikel ini membantu.