Breadcrumbs: Pengertian, Jenis, Fungsi, dan Contohnya

Breadcrumbs adalah salah satu navigasi dalam website yang memudahkan pengguna ketika menjelajahi situs.

Istilah ini berasal dari dongeng Hansel dan Gretel yang menjatuhkan breadcrumbs (remah roti) untuk membentuk jejak kembali ke rumah mereka.

Dalam artikel ini, kami akan mengulas informasi mengenai navigasi website satu ini, mulai dari pengertian, fungsi, manfaat, dan cara membuatnya. Yuk, simak sampai habis!

Apa itu Breadcrumbs?

Contoh Breadcrumbs

Breadcrumbs adalah elemen atau navigasi penting yang menunjukkan lokasi pengguna dalam sebuah situs web.

Alat navigasi sekunder ini menunjukkan hubungan antara suatu halaman dan halaman lain yang memiliki tingkat lebih tinggi.

Navigasi breadcrumbs terletak di bagian atas halaman dan berbentuk tulisan kecil. Ia berupa tautan teks yang disusun secara horizontal dan dipisahkan oleh simbol “lebih besar dari” (>).

Simbol ini menunjukkan tingkatan suatu halaman terhadap halaman lain yang ada di dalam situs web.

Adanya navigasi ini memungkinkan pengguna untuk kembali ke halaman sebelumnya, bahkan halaman utama hanya dengan sekali klik saja.

Umumnya, navigasi breadcrumbs ditemui di website yang memiliki konten dalam jumlah besar dan telah diatur secara hierarkis.

Fungsi Breadcrumbs

Sumber: Freepik

Breadcrumbs memiliki beberapa fungsi pada SEO. Ada dua fungsi utama yang sangat berguna bagi performa sebuah website. Berikut adalah dua fungsi tersebut.

1. Menavigasi User dalam Menjelajahi Website

Di kehidupan sehari-hari, saat mengunjungi tempat yang luas dan besar, seperti kebun binatang atau taman bermain, pasti Anda menemukan denah lokasi di beberapa titik tempat.

Denah tersebut berfungsi sebagai alat navigasi yang menunjukkan posisi Anda saat ini dan petunjuk menuju tempat lain. Nah, breadcrumbs juga memiliki fungsi yang hampir sama. Dalam website, navigasi ini digunakan sebagai penunjuk halaman yang sedang dikunjungi pengunjung.

Sebagai contoh, sebuah website memiliki struktur Home > Blog > Daftar Istilah dalam SEO. Hal ini berarti, user sedang mengunjungi halaman artikel yang berjudul “Daftar Istilah dalam SEO”.

Nah, jika pengunjung ingin mencari artikel lainnya, mereka hanya perlu mengklik navigasi “Blog” untuk kembali ke halaman artikel. Dengan begitu, pengunjung tidak perlu pergi ke menu Home terlebih dahulu.

2. Meningkatkan User Experience

Keberadaan breadcrumbs sangat penting dalam website karena navigasi ini bisa meningkatkan pengalaman pengguna atau user experience ketika menjelajahi sebuah situs. Inilah salah satu faktor yang dapat membuat user lebih sering mengunjungi website.

Jenis Breadcrumbs Pada SEO

Ada beberapa jenis pada breadcrumbs yang berguna sesuai dengan konsep SEO atau website yang pengguna gunakan. Berikut penjelasan selengkapnya:

1. Hierarchy-based Breadcrumbs

Adalah jenis yang memiliki sistem navigasi untuk memberi tahu pengguna saat berada dalam suatu struktur website lalu memberikan alur untuk kembali ke halaman sebelumnya. Jenis Breadcrumbs ini merupakan jenis yang paling umum digunakan.

2. Attribute-based Breadcrumbs

Jenis navigasi ini memiliki sifat yang dinamis dan menyediakan breadcrumbs yang berdasar pada halaman yang telah terpilih. Pengimplementasian jenis ini umumnya pada website e-commerce.

3. History-based Breadcrumbs

Jenis ini dapat menunjukkan jejak sesuai dengan yang pengguna lakukan selama menjelajahi website. Elemen website ini dapat diklik sehingga Anda dapat kembali ke halaman tempat Anda berada sebelumnya.

Manfaat Breadcrumbs

Sumber: Freepik

Manfaat utama dari navigasi ini adalah memberikan kenyamanan kepada pengguna saat mengunjungi suatu situs.

Tak hanya itu, navigasi satu ini juga memiliki banyak manfaat lainnya. Apa saja? Simak penjelasan berikut ini:

1. Meningkatkan User Experience (UX)

Seperti yang sudah diketahui, navigasi ini dapat meningkatkan kenyamanan para pengguna. Hal ini memungkinkannya untuk meningkatkan User Experience (UX).

Bagaimana tidak, elemen ini merupakan navigasi sekunder yang menunjukkan urutan struktur pada website multi-level.

Alhasil, pengguna dapat menavigasi halaman yang sudah dibuka ke tingkat yang lebih tinggi secara mudah.

Dengan begitu, pengguna tak perlu merasa frustrasi ketika ingin pindah dari satu halaman ke halaman lainnya.

2. Tidak Mengganggu Tampilan

Bentuk navigasinya sederhana dan tidak memakan banyak ruang pada tampilan halaman, sehingga muatan kontennya juga tidak terlalu berat.

Dalam praktiknya, terdapat website yang memiliki struktur kompleks dan detail. Namun, ini bukanlah sebuah masalah selama kontennya tidak terlalu berlebihan.

Di sisi lain, breadcrumbs juga dapat memengaruhi tampilan website di Search Engine Result Pages (SERP). Di versi desktop, Google masih dapat menampilkan jalur breadcrumbs menggantikan URL panjang sehingga hasil pencarian tampak lebih rapi. Namun, sejak Januari 2025 Google tidak lagi menampilkan breadcrumbs di hasil penelusuran mobile dan hanya menampilkan nama domain.

Meski begitu, breadcrumbs tetap bermanfaat karena membantu pengunjung menjelajahi lebih banyak halaman di situs Anda. Perlu dicatat, Google tidak menyatakan breadcrumbs atau lamanya kunjungan sebagai faktor peringkat langsung, sehingga manfaat utamanya ada pada kemudahan navigasi dan pemahaman struktur situs.

3. Meminimalisasi Bounce Rate

Elemen ini bisa menjadi strategi yang bagus untuk menarik pengunjung. Misalkan pengguna tiba di halaman artikel melalui pencarian Google.

Navigasi petunjuk bisa mengarahkan pengguna untuk mengklik halaman tingkat yang lebih tinggi, apalagi jika sesuai dengan interest mereka.

Dengan begitu, pengunjung akan menghabiskan waktu lebih lama untuk menjelajahi website Anda, sehingga bisa meminimalisasi bounce rate.

Bounce rate adalah persentase sesi yang tidak engaged di Google Analytics 4, yaitu sesi yang berlangsung kurang dari 10 detik, hanya membuka satu halaman, dan tidak memicu key event (konversi).

4. Memperkuat Internal Linking

Internal linking adalah penyematan link yang mengarah pada halaman lain dalam website tersebut. Nah, breadcrumbs merupakan salah satu praktik yang menggunakan internal link ini.

Diketahui, internal link sangat penting dalam Search Engine Optimization (SEO) karena bisa membantu search engine memahami struktur website.

Jadi, bisa dikatakan, internal link bisa meningkatkan crawlability, sehingga website lebih mudah diindeks oleh Google.

5. Membantu Mesin Pencari Memahami Struktur Situs

Selain tampil sebagai navigasi, breadcrumbs bisa dilengkapi structured data (schema) bertipe BreadcrumbList. Markup ini membantu Google memahami posisi sebuah halaman dalam hierarki situs Anda, meskipun breadcrumbs tidak lagi ditampilkan di hasil pencarian mobile.

Plugin SEO seperti Yoast SEO umumnya sudah menambahkan schema ini secara otomatis. Jika menambahkannya secara manual, gunakan format JSON-LD yang disisipkan dalam tag script bertipe application/ld+json, seperti contoh berikut:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "Daftar Istilah dalam SEO" }
  ]
}

Setelah dipasang, Anda bisa memeriksanya menggunakan Rich Results Test dari Google.

Cara Membuat Breadcrumbs

Sumber: Freepik

Kini, mungkin Anda penasaran bagaimana cara membuat navigasi breadcrumbs di website. Sebetulnya, caranya cukup mudah.

Anda bisa membuat navigasi satu ini melalui 3 cara, yaitu menggunakan tema WordPress, Yoast SEO, atau manual. Selengkapnya, Anda bisa menyimak cara-caranya di bawah ini.

1. Tema WordPress

Meskipun biasanya hanya digunakan untuk mengontrol tampilan, tema bawaan dari WordPress juga dapat memengaruhi fungsionalitas situs web Anda.

Nah, salah satu contohnya adalah tema WordPress bisa membantu Anda menambahkan menu navigasi website.

Caranya, cari tema WordPress yang sudah memiliki standar navigasi ini. Anda bisa mencari tema tersebut di direktori tema WordPress, misalnya Astra atau Kadence yang versi gratisnya sudah menyediakan pengaturan breadcrumbs. Pastikan untuk mengecek dokumentasi tema terlebih dahulu.

Namun perlu diingat, cara ini kurang disarankan untuk website profesional perusahaan. Sebab, breadcrumbs akan bergantung sepenuhnya pada tema yang dipakai. Jika suatu saat tema diganti, navigasi beserta pengaturannya bisa hilang atau berubah.

Untuk kasus semacam ini, sebaiknya gunakan plugin SEO agar breadcrumbs tetap konsisten meskipun tema berganti.

2. Yoast SEO

Yoast SEO adalah salah satu plugin favorit pengguna WordPress yang kerap digunakan untuk meningkatkan peringkat website di mesin pencarian dan mengoptimalkan konten yang ada.

Nah, adapun salah satu fitur yang dimiliki Yoast SEO adalah alat navigasi petunjuk dalam website, termasuk breadcrumbs.

Lantas, bagaimana cara membuatnya? Pertama-tama, Anda harus memasang dan mengaktivasi Yoast SEO di dashboard WordPress terlebih dahulu.

Setelah itu, buka menu Yoast SEO > Settings > Advanced > Breadcrumbs, lalu aktifkan opsi breadcrumbs untuk tema Anda. Di menu ini, Anda juga bisa mengatur pemisah, teks tautan beranda, dan tampilan strukturnya.

Selanjutnya, ada dua cara untuk menampilkannya. Cara termudah tanpa kode adalah menambahkan blok Yoast Breadcrumbs melalui editor blok WordPress pada halaman atau template yang diinginkan.

Cara kedua, masuk ke file template tema Anda, misalnya single.php, page.php, atau header.php, lalu tambahkan kode berikut:

<?php
if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
?>

Jika sudah, simpan atau perbarui template-nya.

3. Secara Manual

Tema atau plugin yang sudah tersedia pada WordPress memang terkesan ramah pengguna dan mudah diakses.

Namun, untuk beberapa pengembang yang sudah mahir, terkadang hal ini justru membatasinya. Pada akhirnya, mereka menggunakan coding tambahan sebagai alternatif untuk membuat elemen yang lebih menarik.

Nah, untuk membuat navigasi hierarki halaman secara manual, terdapat dua hal yang perlu dilakukan. Pertama, Anda harus menambahkan fungsi pada file functions.php untuk mengaktifkannya. Berikut kode yang bisa Anda gunakan:

function get_breadcrumb() {
    echo '<a href="' . esc_url( home_url( '/' ) ) . '">Home</a>';
    if ( is_category() || is_single() ) {
        echo ' &raquo; ';
        the_category( ' &bull; ' );
        if ( is_single() ) {
            echo ' &raquo; ';
            the_title();
        }
    } elseif ( is_page() ) {
        echo ' &raquo; ';
        the_title();
    } elseif ( is_search() ) {
        echo ' &raquo; Hasil pencarian untuk: <em>';
        the_search_query();
        echo '</em>';
    }
}

Kedua, Anda juga harus menempatkan kode pada file template tempat navigasi akan muncul, baik itu di single.php atau header.php. Dalam hal ini, kode yang bisa Anda gunakan adalah sebagai berikut:

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Memodifikasi file-file ini memang akan menampilkan navigasi ini pada situs Anda, tetapi tidak memungkinkan untuk mendesain atau mengatur tata letaknya.

Oleh karena itu, cobalah untuk mengaplikasikan sedikit komponen CSS di dalamnya.

Penutup

Demikian penjelasan lengkap artikel ini mengenai breadcrumbs dalam SEO, mulai dari pengertian, fungsi, hingga cara membuatnya.

Breadcrumbs adalah salah satu komponen penting dalam pengembangan SEO. Walaupun tampilannya kecil dan sederhana, konsep navigasi ini bermanfaat bagi pengguna ketika menjelajahi halaman.

Adapun cara termudah untuk membuat elemen web ini adalah melalui tema WordPress yang sudah menyediakan fitur breadcrumbs. Namun, untuk website profesional perusahaan, plugin SEO lebih disarankan agar breadcrumbs tidak bergantung pada tema yang dipakai.

Lantas, bagaimana jika ingin membuat navigasi breadcrumbs yang menarik dan profesional? Dalam hal ini, Anda bisa menggunakan jasa pembuatan website dari Sitespirit.

Jasa ini akan membantu Anda dalam pembuatan website dengan navigasi yang interaktif dan intuitif, sehingga bisa meningkatkan user experience sesuai dengan fungsi elemen web ini.

Jika Anda tertarik dengan layanan kami, silakan menghubungi kontak kami!