Breadcrumbs atau jalur navigasi adalah elemen kecil yang sering terlihat di bagian atas halaman blog atau halaman produk.
Fungsinya sederhana, yaitu memberi tahu pengguna posisi halaman yang sedang mereka buka, sekaligus memudahkan mereka kembali ke kategori atau halaman sebelumnya.
Selain membantu user experience, breadcrumbs juga memiliki manfaat SEO karena membantu mesin pencari memahami struktur situs.
Salah satu plugin SEO populer yang menyediakan fitur breadcrumbs adalah Rank Math SEO. Banyak user WordPress memilih Rank Math karena fiturnya lengkap, ringan, dan mudah diintegrasikan dengan theme maupun page builder seperti Elementor.
Nah, kalau Anda ingin menampilkan breadcrumbs dari Rank Math di Elementor, caranya cukup mudah dan fleksibel.
Apa Itu Breadcrumb dan Manfaatnya untuk SEO?
Breadcrumb adalah navigasi berbentuk jejak halaman, biasanya muncul di bagian atas konten, misalnya:
Home > Blog > Category > Judul artikel
Manfaat breadcrumb antara lain:
- Meningkatkan SEO on-page
- Mempermudah navigasi pengguna
- Mengurangi bounce rate
- Membantu Google menampilkan rich snippet breadcrumb di hasil pencarian
Google secara resmi merekomendasikan penggunaan breadcrumb dengan structured data.
Kenapa Menggunakan Rank Math untuk Breadcrumb?
Rank Math adalah plugin SEO WordPress yang sudah mendukung breadcrumb schema otomatis. Dibanding plugin lain, Rank Math unggul karena:
- Terintegrasi dengan schema markup
- Ringan dan cepat
- Bisa dikustomisasi
- Mudah dipadukan dengan Elementor
Dengan Rank Math, Anda tidak perlu plugin tambahan hanya untuk breadcrumb.
Intinya, Anda tidak perlu lagi menginstall plugin tambahan untuk breadcrumb.
Menambah Breadcrumb SEO di Elementor
Seperti sudah dikatakan pada awal artikel, jika menggunakan RankMath SEO sudah termasuk fitur Breadcrumb.
Baca juga: Buat Kustom Breadcrumbs di Shopify
Lalu bagaimana cara menggunakannya di elementor? Simak langkah-langkahnya berikut ini:
Langkah 1: Aktifkan Breadcrumb di Rank Math
- Masuk ke WordPress Dashboard
- Pilih Rank Math → General Settings
- Klik menu Breadcrumbs
- Aktifkan opsi Enable Breadcrumbs
- Atur separator, prefix, dan tampilan sesuai kebutuhan
- Simpan perubahan

Pada tahap ini, breadcrumb sudah aktif secara sistem, tetapi belum tampil di halaman Elementor.
Langkah 2: Menampilkan Breadcrumb di Elementor
Ada dua cara utama menampilkan breadcrumb Rank Math di Elementor:
Opsi 1: Menggunakan Widget Shortcode (Paling Umum)
- Buka halaman dengan Elementor Editor
- Tambahkan widget Shortcode
- Masukkan shortcode berikut:
[rank_math_breadcrumb]
4. Atur styling sesuai desain website
Cara ini paling fleksibel dan kompatibel dengan semua versi Elementor.
Opsi 2: Menggunakan Widget HTML
Alternatif lain:
- Tambahkan widget HTML
- Masukkan kode:
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs();
?>
Catatan: Cara ini hanya aman jika Elementor mengizinkan PHP (biasanya butuh plugin tambahan). Atau gunakan plugin Rich Snippets
Tips Styling Breadcrumb agar SEO Friendly
Agar breadcrumb terlihat profesional dan ramah SEO:
- Gunakan font kecil dan tidak mencolok
- Letakkan di atas judul artikel
- Gunakan warna netral
- Pastikan link breadcrumb bisa diklik
- Jangan sembunyikan breadcrumb dengan
display:none
Breadcrumb yang tersembunyi bisa dianggap manipulatif oleh Google.
Cek Structured Data Breadcrumb
Setelah breadcrumb aktif:
- Buka Google Rich Results Test
- Masukkan URL artikel
- Pastikan schema BreadcrumbList terdeteksi
Jika valid, Google berpotensi menampilkan breadcrumb di hasil pencarian.
Baca juga: Cara Menambahkan Breadcrumbs Yoast di WordPress
Kesimpulan
Menambahkan breadcrumb SEO di Elementor dengan Rank Math adalah langkah kecil yang berdampak besar untuk SEO dan user experience.
Dengan mengaktifkan fitur breadcrumb Rank Math dan menampilkannya menggunakan shortcode Elementor, Anda sudah memenuhi standar SEO Google tanpa ribet.
Jika serius membangun website yang rapi, mudah dinavigasi, dan SEO-friendly, breadcrumb bukan lagi opsional, tapi keharusan atau wajib.