Cara Menambahkan Breadcrumb di WordPress: 5 Metode Biar Navigasi Website Makin Jelas

Pernahkah Anda membuka sebuah website, lalu bingung sedang berada di halaman apa dan bagaimana cara kembali ke kategori sebelumnya? Pengunjung website Anda bisa merasakan hal yang sama. Di sinilah breadcrumb berperan: jalur navigasi kecil di bagian atas halaman yang menunjukkan posisi pengunjung dan membantu Google membaca struktur situs Anda. Artikel ini membahas lima metode menambahkannya di WordPress, lengkap dengan contoh untuk toko online UMKM.

Apa Itu Breadcrumb di WordPress?

Breadcrumb adalah deretan tautan kecil yang menunjukkan jalur dari halaman utama menuju halaman yang sedang dibuka. Istilah ini diambil dari dongeng Hansel dan Gretel, yang menaburkan remah roti sebagai penanda jalan pulang. Di website, bentuknya seperti ini:

Beranda › Produk › Sepatu Lari › Sepatu Lari Pria Seri X

Setiap bagian bisa diklik, kecuali halaman terakhir yang sedang dibuka. Pengunjung yang melihat sebuah produk bisa langsung melompat ke halaman kategorinya tanpa menekan tombol kembali berkali-kali. Breadcrumb biasanya diletakkan di bawah header atau di atas judul halaman.

Manfaat Breadcrumb untuk Navigasi dan SEO

Breadcrumb bukan sekadar hiasan. Inilah tiga manfaat utamanya, khususnya untuk website bisnis dan toko online.

Pertama, pengunjung tidak mudah tersesat. Calon pembeli yang masuk lewat Google langsung ke halaman satu produk sering tidak tahu produk itu masuk kategori apa. Dengan breadcrumb, ia tinggal mengklik nama kategorinya untuk melihat produk lain yang sejenis.

Kedua, pengunjung betah lebih lama. Karena berpindah antarkategori menjadi mudah, pengunjung menjelajah lebih banyak halaman sebelum pergi.

Ketiga, Google lebih mudah memahami struktur website Anda. Breadcrumb memberi sinyal yang jelas tentang hubungan antarhalaman. Google bahkan bisa menampilkan jalur breadcrumb di hasil pencarian, menggantikan alamat URL yang panjang, sehingga hasil pencarian Anda terlihat lebih rapi dan lebih meyakinkan untuk diklik.

Metode 1: Menggunakan Yoast SEO atau Rank Math

Ini cara paling populer, karena sebagian besar pemilik website WordPress sudah memakai salah satu dari dua plugin SEO ini, sehingga tidak perlu memasang plugin tambahan.

Untuk pengguna Yoast SEO, langkahnya seperti ini:

1. Buka dashboard WordPress, lalu masuk ke menu SEO > Settings.
2. Pilih tab Advanced, kemudian buka bagian Breadcrumbs.
3. Aktifkan opsi untuk menampilkan breadcrumb, lalu atur pemisahnya, misalnya tanda › atau /.
4. Isi teks tautan halaman utama (misalnya Beranda), lalu simpan.

Namun, perlu dicatat: mengaktifkan pengaturan di atas saja belum tentu membuat breadcrumb langsung muncul. Banyak tema mengharuskan Anda menambahkan satu potongan kode kecil ke file tema, misalnya di single.php untuk artikel atau di header.php agar tampil di seluruh halaman:

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

Kode ini hanya berjalan bila Yoast aktif. Gunakan child theme saat mengedit file tema, karena pembaruan tema bisa menghapus perubahan Anda. Pengguna Rank Math lebih singkat jalurnya: masuk ke Rank Math SEO > General Settings > Breadcrumbs, lalu nyalakan tombolnya.

Metode 2: Memakai Plugin Khusus Breadcrumb

Jika tidak memakai Yoast atau Rank Math, atau ingin pengaturan lebih detail, plugin khusus breadcrumb adalah pilihan tepat. Plugin seperti ini hanya mengerjakan satu hal, sehingga biasanya ringan dan mudah diatur.

Dua nama yang paling sering direkomendasikan adalah Breadcrumb NavXT dan Flexy Breadcrumb, keduanya tersedia gratis di direktori plugin WordPress. Cara pakainya: pasang dari menu Plugins > Add New, atur pemisah dan teks halaman utama di halaman pengaturannya, lalu pasang ke tema lewat widget, shortcode, atau kode yang disediakan plugin.

Kekurangannya, Anda menambah satu plugin lagi di website. Selama jumlah plugin Anda masih wajar dan pluginnya terawat, hal ini bukan masalah besar.

Metode 3: Memakai Fitur Bawaan Tema

Sejumlah tema WordPress modern sudah menyediakan breadcrumb tanpa plugin tambahan, misalnya Astra dan OceanWP. Jika Anda baru membangun website atau mempertimbangkan ganti tema, cara ini paling praktis.

Pada tema Astra, buka Appearance > Customize, lalu bagian Breadcrumb: nyalakan breadcrumb, pilih sumbernya — dari tema itu sendiri atau Yoast SEO — dan atur posisinya. Pada OceanWP, breadcrumb juga diaktifkan dari Customizer, plus tersedia shortcode [oceanwp_breadcrumb]. Kelebihannya, tampilan breadcrumb sudah menyatu dengan desain tema.

Metode 4: Menambahkan Kode Sendiri di functions.php

Metode ini untuk Anda yang berani menyentuh sedikit kode dan ingin breadcrumb yang benar-benar sesuai keinginan, tanpa plugin baru. Prinsipnya: buat satu fungsi yang menyusun jalur breadcrumb, lalu panggil di template yang Anda inginkan.

Pertama, buat cadangan website Anda, karena kesalahan kecil pada file tema bisa membuat website tidak bisa dibuka. Setelah itu, buka file functions.php pada tema aktif — idealnya lewat child theme — lalu tambahkan fungsi yang menampilkan tautan Beranda, kategori, dan judul halaman saat ini.

Logikanya: untuk artikel, tampilkan tautan Beranda, nama kategori, lalu judul artikel; untuk halaman biasa, tampilkan Beranda diikuti judul halaman. Setelah fungsinya tersimpan, panggil di template yang sesuai, misalnya single.php tepat sebelum judul artikel, dibungkus div agar mudah diatur lewat CSS. Metode ini memberi kendali paling besar, tetapi juga menuntut tanggung jawab paling besar. Jika ragu, pilih metode sebelumnya yang lebih aman.

Metode 5: Menampilkan Breadcrumb lewat Elementor

Bagi Anda yang membangun halaman dengan Elementor, breadcrumb bisa dipasang tanpa mengedit file tema sama sekali. Ada dua jalan yang bisa ditempuh.

Jika memakai Elementor Pro, tersedia widget Breadcrumb bawaan. Buka halaman atau template dengan Elementor, seret widget Breadcrumb ke area yang diinginkan — biasanya di bagian atas konten — lalu atur pemisah dan warna tautannya.

Jika memakai Elementor gratis, buat shortcode kecil yang memanggil fungsi breadcrumb Yoast, lalu letakkan di widget Shortcode Elementor. Cara ini menggabungkan kekuatan Yoast dengan kebebasan tata letak Elementor.

Cara Mengecek Breadcrumb di Google

Setelah breadcrumb terpasang, periksa apakah tampilannya sudah benar dan Google bisa membacanya. Pertama, buka satu artikel, satu halaman produk, dan satu halaman kategori. Pastikan jalur breadcrumb muncul di posisi yang benar, tautannya bisa diklik, dan tidak ada tautan yang mengarah ke halaman yang salah.

Kedua, periksa data terstrukturnya dengan Rich Results Test dari Google. Tempelkan URL halaman Anda dan jalankan pengujian. Jika breadcrumb dikenali, alat itu menampilkan entri breadcrumb beserta jalurnya. Bila muncul kesalahan, perbaiki dulu sumbernya, misalnya dua sistem breadcrumb yang berjalan bersamaan.

Ketiga, pantau lewat Google Search Console apakah Google sudah menampilkan breadcrumb di hasil pencarian Anda. Perlu diingat, kemunculannya bisa memakan waktu beberapa hari sampai beberapa minggu, dan tidak semua halaman mendapatkannya.

Tips Memilih Metode yang Tepat

Mana yang sebaiknya dipilih? Tergantung kondisi website Anda: sudah memakai Yoast atau Rank Math, pakai metode 1; ingin pengaturan lengkap tanpa plugin SEO, pakai metode 2; sedang membangun website baru, pilih tema dengan breadcrumb bawaan (metode 3); paham dasar PHP, metode 4 memberi kendali penuh asalkan memakai child theme dan cadangan; semua halaman memakai Elementor, metode 5 paling praktis.

Yang wajib dihindari: jangan menjalankan dua sistem breadcrumb sekaligus di halaman yang sama, misalnya breadcrumb tema bersamaan dengan breadcrumb Yoast. Pengunjung akan melihat dua jalur yang menumpuk, dan Google bisa kebingungan. Pilih satu, matikan yang lain.

Kesimpulan

Breadcrumb adalah fitur kecil dengan dampak besar: membantu pengunjung menemukan jalan, membuat mereka betah menjelajah lebih lama, dan memberi Google gambaran yang jelas tentang struktur situs Anda. Untuk toko online UMKM, manfaatnya terasa langsung: calon pembeli lebih mudah berpindah dari satu produk ke kategori lain.

Mulailah dari metode yang paling mudah sesuai kondisi website Anda: aktifkan fitur bawaan Yoast atau Rank Math, atau manfaatkan widget Elementor. Setelah terpasang, cek tampilannya di beberapa halaman dan uji data terstrukturnya di Rich Results Test. Navigasi yang jelas adalah salah satu investasi termurah untuk pengalaman pengunjung dan SEO website Anda.