RIFAIHAMDA.COM β Bagi pemilik situs web WordPress, kenyamanan pengunjung adalah kunci utama untuk mempertahankan lalu lintas (traffic). Salah satu elemen navigasi kecil namun memiliki dampak luar biasa bagi pengalaman pengguna (user experience) dan optimasi mesin pencari (SEO) adalah breadcrumb.
Meskipun terlihat sederhana, breadcrumb bertindak sebagai kompas yang memandu pengunjung agar tidak tersesat di dalam struktur situs.
Artikel ini akan membahas apa itu breadcrumb, mengapa elemen ini sangat penting bagi Google AdSense dan SEO, serta panduan langkah demi langkah cara menampilkannya di WordPress.
1) Apa Itu Breadcrumb?
Breadcrumb (secara harfiah berarti βremahan rotiβ) merupakan sistem navigasi berbasis teks sekunder yang biasanya terletak di bagian atas halaman web, tepat di atas judul artikel atau di atas gambar unggulan (featured image).
Istilah ini diambil dari dongeng klasik Hansel and Gretel, di mana kedua anak tersebut meninggalkan remahan roti di hutan agar bisa menemukan jalan pulang.
Di dunia website, breadcrumb menunjukkan rute atau hierarki halaman yang sedang dibuka oleh pengunjung dari halaman utama (home). Contohnya seperti ini:
Beranda Β» Teknologi Β» Panduan WordPress Β» Cara Menampilkan Breadcrumbs
Dengan melihat baris teks tersebut, pengunjung tahu persis di mana posisi mereka berada dan dapat kembali ke kategori βTeknologiβ atau βBerandaβ hanya dengan satu kali klik.
2) Mengapa Breadcrumb Sangat Penting?
Sebelum masuk ke teknis pembuatan, kamu perlu memahami mengapa elemen ini wajib ada di website, terutama jika kamu sedang menargetkan kelulusan Google AdSense atau ingin bersaing di halaman pertama Google.
2.1) Menurunkan Bounce Rate (Rasio Pantulan)
Ketika pengunjung datang dari Google langsung ke sebuah artikel tunggal, breadcrumb memberi mereka jalan pintas untuk menjelajahi kategori terkait. Ini membuat mereka betah berlama-lama di situs.
2.2) Disukai oleh Robot Google (SEO Friendly)
Google menggunakan breadcrumb untuk memahami struktur dan arsitektur informasi website. Google bahkan sering menampilkan struktur breadcrumb ini langsung di halaman hasil pencarian (SERP), menggantikan URL mentah yang panjang.
2.3) Meningkatkan Pengalaman Pengguna (UX)
Pengunjung tidak perlu menekan tombol back pada browser berulang kali untuk kembali ke halaman sebelumnya.
3) Cara Menampilkan Breadcrumb di WordPress
Ada beberapa metode untuk mengaktifkan breadcrumb di WordPress. Metode terbaik dan paling aman bagi pemula maupun profesional adalah dengan menggunakan plugin SEO. Dua plugin SEO terbesar saat ini, Rank Math dan Yoast SEO, sudah menyediakan fitur ini secara gratis.
Berikut adalah panduan langkah demi langkah cara menampilkan breadcrumb di WordPress:
3.1) Menggunakan Plugin Rank Math SEO
Jika kamu menggunakan Rank Math sebagai senjata SEO, mengaktifkan breadcrumb hanya membutuhkan beberapa klik saja.
- Aktifkan fitur, masuk ke dashboard WordPress, pilih menu Rank Math, lalu klik General Settings.
- Masuk ke menu Breadcrumbs, di bilah sisi kiri, klik tab Breadcrumbs.
- Nyalakan tombol, geser tombol pada opsi Enable Breadcrumbs function menjadi On (Aktif).
- Kustomisasi tampilan, kamu bisa mengatur simbol pembatas (Separator Character), seperti menggunakan tanda Β», /, atau >. Kamu juga bisa mengatur apakah ingin menampilkan nama artikel secara lengkap atau disembunyikan.
- Simpan perubahan, gulir ke bawah dan klik Save Changes.
3.2) Menggunakan Plugin Yoast SEO
Bagi pengguna setia Yoast SEO, prosesnya hampir mirip:
- Masuk ke dashboard WordPress, lalu klik menu Yoast SEO dan pilih Settings.
- Gulir ke bawah hingga menemukan bagian Advanced dan klik opsi Breadcrumbs.
- Aktifkan fitur Breadcrumbs untuk situs.
- Atur separator dan teks jangkar (anchor text) untuk halaman beranda sesuai selera.
- Klik Save Changes.
Beberapa tema WordPress otomatis menampilkan breadcrumb setelah mengaktifkan pengaturan di atas. Namun, jika temamu tidak mendukungnya secara otomatis, kamu harus memanggilnya secara manual.
Posisi terbaik untuk meletakkan breadcrumb adalah di bagian atas halaman artikel tunggal (single post), tepat di bawah menu navigasi utama dan di atas gambar unggulan. Ada dua cara untuk memanggilnya:
3.3) Menggunakan Shortcode (Cara Manual per Artikel)
Jika kamu hanya ingin menampilkannya di artikel-artikel tertentu, kamu bisa menyisipkan blok Shortcode di bagian paling atas editor Gutenberg WordPress.
Kode untuk Rank Math:
[rank_math_breadcrumb]Kode untuk Yoast SEO:
[wpseo_breadcrumb]3.4) Menggunakan File functions.php (Otomatis untuk Semua Artikel)
Jika kamu ingin breadcrumb muncul otomatis di seluruh artikel tanpa perlu memasukkan shortcode satu per satu, kamu bisa menyuntikkan kode PHP ke file sistem tema.
Masuk ke Appearance (Tampilan) > Theme File Editor, pilih file functions.php, lalu tambahkan kode berikut di bagian paling bawah:
add_action( 'loop_start', function( $query ) {
// Memastikan hanya berjalan di halaman artikel tunggal dan query utama
if ( is_single() && is_main_query() && $query->is_main_query() && function_exists( 'rank_math_the_breadcrumbs' ) ) {
// Menambahkan properti CSS pointer-events dan z-index agar link bisa diklik dengan normal
echo '<div class="rank-math-breadcrumb-custom" style="margin-top: -25px !important; margin-bottom: 15px !important; font-size: 14px; clear: both; position: relative !important; z-index: 99999 !important; pointer-events: auto !important;">';
rank_math_the_breadcrumbs();
echo '</div>';
}
});(Catatan: Jika kamu menggunakan Yoast SEO, ganti rank_math_the_breadcrumbs() dengan yoast_breadcrumb(β<p id=βbreadcrumbsβ>β,'</p>β);)
Menampilkan breadcrumb di WordPress adalah langkah optimasi yang sederhana namun berdampak besar. Elemen ini tidak hanya mempercantik tampilan blog dan membuatnya terlihat lebih profesional, tetapi juga memberikan struktur data yang matang di mata mesin pencari.
Dengan mengikuti panduan di atas, kini website-mu siap memberikan navigasi terbaik bagi pengunjung dan mendapatkan nilai plus dalam audit SEO Google. Selamat mencoba!***
