Home » Apa itu Breadcrumb, Manfaat, dan Cara Menampilkannya

Apa itu Breadcrumb, Manfaat, dan Cara Menampilkannya

apa itu breadcrumb

Apa itu breadcrumb?

Breadcrumb adalah fitur navigasi yang digunakan pada website untuk menunjukkan posisi pengguna dalam struktur situs. Fitur ini biasanya menampilkan jalur dari halaman utama ke halaman yang sedang dibuka, seperti: “Home > Kategori > Subkategori > Halaman Saat Ini.” Penggunaan breadcrumb tidak hanya membantu pengguna dalam navigasi, tetapi juga memiliki manfaat signifikan lainnya. Berikut adalah beberapa keuntungan dari menggunakan breadcrumb pada website:

1. Meningkatkan Navigasi dan Pengalaman Pengguna

Breadcrumb membantu pengguna memahami struktur situs dan mengetahui di mana mereka berada. Dengan breadcrumb, pengguna dapat dengan mudah kembali ke halaman sebelumnya atau ke halaman kategori tanpa harus mengklik tombol “back” atau menavigasi ulang dari menu utama. Hal ini sangat membantu di situs dengan banyak kategori atau subkategori, seperti e-commerce atau portal berita.

2. Meningkatkan SEO

Breadcrumb dapat memberikan dampak positif pada SEO (Search Engine Optimization). Google dan mesin pencari lainnya menggunakan breadcrumb untuk memahami struktur situs. Breadcrumb memberikan konteks tambahan pada setiap halaman, yang membantu mesin pencari dalam memahami hubungan antar halaman di dalam situs. Hal ini dapat meningkatkan peringkat SEO, karena situs yang mudah dinavigasi biasanya lebih disukai oleh mesin pencari.

3. Mengurangi Bounce Rate

Dengan breadcrumb, pengguna dapat dengan mudah menemukan konten lain di situs. Jika pengguna merasa tidak menemukan apa yang dicari di suatu halaman, breadcrumb memberi pilihan untuk menavigasi ke halaman kategori atau topik yang lebih umum. Hal ini dapat mengurangi bounce rate, karena pengguna akan cenderung untuk menjelajahi lebih jauh di dalam situs daripada meninggalkannya setelah membuka satu halaman.

4. Meningkatkan Pengelompokan Konten

Breadcrumb memungkinkan pengguna melihat kategori dan subkategori dari halaman yang sedang diakses. Hal ini memberikan gambaran jelas mengenai topik yang sedang mereka baca dan kaitannya dengan topik lain di situs. Pengelompokan konten ini membantu pengguna menemukan lebih banyak konten yang relevan, meningkatkan interaksi, dan memperkaya pengalaman pengguna.

5. Meningkatkan Aksesibilitas

Breadcrumb meningkatkan aksesibilitas website, terutama bagi pengguna dengan keterbatasan tertentu atau yang menggunakan pembaca layar. Dengan breadcrumb, struktur navigasi situs menjadi lebih jelas dan mudah dimengerti, bahkan tanpa menggunakan menu utama atau submenu. Ini juga membantu pengguna yang menggunakan perangkat seluler, di mana layar yang lebih kecil sering membuat menu utama lebih sulit dinavigasi.

6. Menunjukkan Hierarki Situs

Breadcrumb menunjukkan struktur dan hierarki halaman di situs, yang membantu pengguna dalam memahami organisasi konten. Ini penting di situs dengan banyak tingkat kategori, karena menunjukkan bagaimana setiap halaman saling berhubungan. Dengan demikian, breadcrumb memberikan panduan visual bagi pengguna dalam memahami posisi mereka dalam situs.

7. Meningkatkan Efisiensi Waktu Pengguna

Navigasi yang efisien membantu pengguna menemukan informasi lebih cepat. Dengan adanya breadcrumb, pengguna tidak perlu mengklik berulang kali untuk kembali ke halaman sebelumnya. Mereka dapat langsung menuju ke kategori atau halaman utama, menghemat waktu dan membuat pengalaman mereka lebih nyaman.

Jenis-Jenis Breadcrumb

Ada beberapa jenis breadcrumb yang umum digunakan, yaitu:

  • Location-based Breadcrumb: Menunjukkan lokasi halaman dalam hierarki situs.
  • Path-based Breadcrumb: Menunjukkan jalur yang ditempuh pengguna untuk sampai ke halaman saat ini.
  • Attribute-based Breadcrumb: Biasanya digunakan dalam situs e-commerce untuk menampilkan atribut produk, seperti kategori dan subkategori. Selain itu, breadcrumb jenis ini juga terkadang digunakan di dalam blog untuk menampilkan kategori suatu artikel atau blog post. Contohnya seperti di bawah ini:
contoh breadcrumb

 

Cara Menampilkan Breadcrumb

Untuk menampilkan breadcrumb di website WordPress self hosted (selanjutnya disebut “WordPress”), salah satu caranya ialah sebagai berikut.

Pertama-tama, silakan login, lalu pilih menu Plugins > Add New.

Cari plugin “Yoast SEO“, lalu install dan aktifkan.

yoast seo

 

Setelah plugin Yoast SEO aktif, silakan menuju menu SEO > Search Appearance > Breadcrumbs.

seo search appearance

 

breadcrumb

 

Di halaman ini, kita bisa mengatur tampilan breadcrumb di website kita. Misalnya, mengatur tampilan separator atau pemisah, dan juga mengganti kata untuk halaman utama atau home page. Silakan sesuaikan dengan preferensi kamu.

Setelah itu, di bagian “Enable Breadcrumbs for your theme”, pilih Enabled, lalu klik Save Changes.

enabled breadcrumb

 

Selanjutnya, pilih menu Appearance > klik Customize.

appearance customize

 

Kemudian kamu akan dibawa ke sebuah halaman baru. Selanjutnya klik Breadcrumb, lalu di bagian “Header Position”, silakan pilih letak breadcrumb yang kamu suka, yang penting jangan “none”, karena kalau itu yang dipilih, maka breadcrumb tidak akan muncul di website kamu.

Di bagian “Breadcrumb Source”, pilih Yoast SEO Breadcrumbs.

Untuk pengaturan lainnya, silakan sesuaikan dengan preferensi kamu.

Jika sudah, silakan klik tombol Publish.

cara membuat breadcrumb di website wordpress

 

Oh ya, theme yang saya gunakan adalah Astra, jadi untuk mengikuti langkah-langkah yang dijelaskan di artikel ini secara persis, lakukan instalasi WP Astra theme terlebih dahulu. Jika kamu pengguna theme lain, silakan sesuaikan dengan interface theme masing-masing, ya.

Demikian penjelasan tentang apa itu breadcrumb, manfaat menggunakannya, dan cara menampilkannya di WordPress.

Selamat mencoba!