Cara Membuat Breadcrumb di Blogger dan WordPress (Lengkap)

Cara membuat breadcrumb di Blogger dan WordPress pada dasarnya ada dua jalur: tempel kode manual di editor HTML (Blogger), atau aktifkan lewat plugin SEO seperti Yoast/Rank Math (WordPress) lalu tempel satu baris kode ke file tema. Prosesnya 10–15 menit kalau template kamu belum kacau duluan. Di bawah ini akan dibedah dua-duanya, lengkap dengan kenapa Google peduli sama fitur navigasi kecil ini.

Kenapa Breadcrumb Itu Lebih dari Sekadar Navigasi

Banyak yang mengira breadcrumb cuma pemanis tampilan — baris kecil "Home > Kategori > Judul" di atas artikel. Padahal fungsinya dua arah. Untuk pembaca, ia jadi peta: mereka tahu persis sedang berada di mana dalam struktur situsmu, dan bisa mundur satu langkah tanpa harus pencet tombol back berkali-kali. Untuk Google, breadcrumb yang ditandai dengan structured data (schema BreadcrumbList) membantu bot memahami hierarki konten, dan kadang ditampilkan langsung di hasil pencarian menggantikan URL mentah yang panjang dan jelek dilihat.

Hasilnya bisa dua arah juga. Klik lebih tinggi, karena tautan hasil pencarian terlihat lebih rapi dan kredibel. Bounce rate lebih rendah, karena pengunjung yang salah masuk artikel gampang lompat ke kategori yang mereka cari.

Jenis-Jenis Breadcrumb yang Perlu Kamu Tahu Dulu

Sebelum mengetik satu baris kode pun, penting tahu breadcrumb yang mau dipasang itu jenis apa. Karena implementasinya beda.

• Location-based (hierarchy) — mengikuti struktur folder/kategori situs. Ini yang paling umum di blog: Home > Kategori > Judul Artikel.
• Attribute-based — biasa dipakai toko online, menampilkan filter yang dipilih user (misalnya Home > Sepatu > Ukuran 42 > Warna Hitam).
• Path-based (history) — mengikuti jejak klik user, bukan struktur situs. Jarang dipakai karena bisa membingungkan dan tidak konsisten dengan apa yang diindeks Google.

Untuk blog Blogger atau WordPress biasa, hampir pasti yang dibutuhkan adalah tipe pertama. Itu juga yang akan dibahas sepanjang artikel ini.

Cara Membuat Breadcrumb di Blogger Tanpa Plugin

Blogger tidak punya sistem plugin seperti WordPress, jadi breadcrumb harus ditanam langsung ke template. Beberapa template premium sudah menyertakannya secara bawaan — cek dulu dengan membuka salah satu postingan, kalau sudah ada baris navigasi di atas judul, berarti tidak perlu mengulang langkah ini.

Kalau belum ada, berikut urutannya:

1. Masuk ke dashboard Blogger, pilih menu Tema.
2. Klik panah dropdown di sebelah tombol Sesuaikan, pilih Edit HTML.
3. Cari tag <b:includable id='main'> atau bagian yang memuat struktur postingan (biasanya dekat post-outer atau post-header).
4. Tempel kode breadcrumb — biasanya berbasis b:if dan b:loop untuk mengambil label/kategori postingan — tepat di atas judul artikel.
5. Tambahkan CSS breadcrumb di atas tag penutup ]]></b:skin> supaya tidak polos.
6. Simpan tema, lalu buka salah satu postingan untuk cek hasilnya.

Satu peringatan yang sering dilewatkan: kalau template kamu sering diperbarui developer-nya (seperti template versi Soho atau sejenisnya), posisi id main kadang tidak ketemu persis seperti tutorial lama. Solusinya, cari elemen terdekat yang membungkus judul postingan, lalu tempel kode breadcrumb tepat sebelum itu.

Google Tidak Selalu Menampilkan Breadcrumb Manual Blogger di SERP

Ini bagian yang jarang disebut tutorial lain. Breadcrumb hasil kode manual di Blogger sering kali cuma tampil visual di halaman — bukan sebagai structured data yang dibaca Google sebagai BreadcrumbList. Kalau tujuannya benar-benar supaya breadcrumb muncul di hasil pencarian (bukan cuma di halaman), kamu perlu menambahkan markup JSON-LD terpisah, atau memakai plugin pihak ketiga yang sudah menyematkan schema tersebut.

Cara mengeceknya gampang. Buka Google Rich Results Test, tempel URL salah satu postingan, dan lihat apakah breadcrumb terdeteksi sebagai structured data atau tidak. Kalau tidak muncul, artinya breadcrumb kamu baru "cantik dilihat", belum "kebaca mesin".

Cara Membuat Breadcrumb di WordPress dengan Yoast SEO

Di WordPress, jalannya jauh lebih pendek karena sudah ada plugin yang menangani schema-nya otomatis.

1. Install dan aktifkan plugin Yoast SEO kalau belum ada.
2. Masuk ke menu Yoast SEO > Search Appearance > Breadcrumbs (di versi lama: Search Appearance).
3. Aktifkan opsi Enable Breadcrumbs.
4. Atur separator (misalnya ">" atau "/"), teks anchor untuk homepage, dan taksonomi yang ingin ditampilkan (biasanya kategori, bukan tag).
5. Simpan pengaturan.

Langkah aktivasi di plugin belum otomatis menampilkan breadcrumb di halaman depan. Kode ini masih perlu ditempel manual ke file tema — biasanya di single.php, page.php, atau header.php, tergantung di mana kamu ingin breadcrumb muncul:

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

Kalau kamu tidak nyaman mengedit file tema langsung dari dashboard (risikonya situs bisa error kalau salah taruh kode), pertimbangkan pakai plugin child theme atau fitur "Insert Headers and Footers" — lebih aman daripada menyunting file inti tema secara langsung.

Alternatif: Cara Membuat Breadcrumb di WordPress Pakai Rank Math

Percaya atau tidak, sebagian pengguna justru pindah dari Yoast ke Rank Math semata-mata karena breadcrumb-nya terasa lebih gampang dikustomisasi tanpa harus banyak utak-atik CSS. Langkahnya mirip:

• Buka Rank Math > General Settings > Breadcrumbs.
• Aktifkan toggle Breadcrumbs.
• Atur separator, teks untuk halaman 404, dan apakah judul postingan ikut ditampilkan di ujung breadcrumb.
• Tempel kode berikut ke file tema (posisinya sama seperti Yoast — di atas konten utama):

<?php
if ( function_exists( 'rank_math_the_breadcrumbs' ) ) {
    rank_math_the_breadcrumbs();
}
?>

Perbedaan mendasarnya dengan Yoast bukan di kualitas schema — dua-duanya sama-sama menghasilkan markup BreadcrumbList yang valid. Bedanya lebih ke fleksibilitas pengaturan taksonomi dan seberapa dalam kamu bisa mengubah tampilan tanpa plugin tambahan.

Mempercantik Tampilan Breadcrumb dengan CSS

Breadcrumb bawaan plugin biasanya polos — teks hitam-putih tanpa gaya. Supaya menyatu dengan desain situs, tambahkan CSS semacam ini lewat Tampilan > Sesuaikan > CSS Tambahan (WordPress) atau di dalam tag <b:skin> (Blogger):

.breadcrumbs {
  font-size: 13px;
  color: #888;
  margin-bottom: 16px;
}
.breadcrumbs a {
  color: #555;
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: #1a73e8;
}

Jangan berlebihan mendesainnya. Breadcrumb itu elemen bantu, bukan elemen utama — kalau warnanya terlalu mencolok, malah menarik perhatian dari judul artikel di bawahnya.

Kesalahan yang Bikin Breadcrumb Tidak Muncul di Google

Sudah dipasang, tapi kok breadcrumb tetap tidak muncul di hasil pencarian? Beberapa penyebab paling umum:

1. Ada dua sistem breadcrumb aktif bersamaan (misalnya tema dan plugin sama-sama menampilkan navigasi ini) — Google bingung mana yang valid.
2. Struktur kategori situs berantakan, sehingga satu artikel masuk ke banyak kategori sekaligus dan breadcrumb-nya jadi tidak konsisten antar halaman.
3. Markup schema rusak atau tidak lengkap — cek lewat Rich Results Test.
4. Google butuh waktu re-crawl. Kadang breadcrumb baru muncul di SERP beberapa minggu setelah dipasang, bukan instan.

Sebagai ilustrasi (bukan kejadian nyata): bayangkan sebuah blog resep yang sama-sama mencentang kategori "Sarapan" dan "Menu Cepat" untuk satu artikel. Breadcrumb-nya jadi berubah-ubah tergantung dari mana pengunjung masuk — kadang "Home > Sarapan > ...", kadang "Home > Menu Cepat > ...". Situasi seperti ini yang bikin Google ragu menampilkan breadcrumb di hasil pencarian, karena hierarkinya tidak stabil.

Apakah Breadcrumb Benar-Benar Mendongkrak Peringkat SEO?

Jujur saja, ini bagian yang paling sering disalahpahami. Breadcrumb bukan faktor ranking langsung yang berdiri sendiri. Ia bekerja secara tidak langsung: memperbaiki internal linking, membantu Google memahami arsitektur situs, dan meningkatkan pengalaman pengguna (yang pada gilirannya memengaruhi sinyal seperti waktu tinggal di halaman dan bounce rate).

Jadi jangan berharap posisi artikel langsung melompat cuma karena breadcrumb terpasang. Tapi untuk situs dengan banyak kategori dan halaman, dampaknya terasa dalam jangka menengah — terutama dari sisi navigasi dan bagaimana artikel-artikel lama jadi lebih mudah ditemukan lagi lewat halaman kategori.

Tanya Jawab Seputar Breadcrumb

Apakah breadcrumb wajib dipasang di semua blog?
Tidak wajib, tapi sangat disarankan kalau situsnya punya lebih dari satu kategori atau struktur konten yang cukup dalam.

Bagaimana kalau template Blogger saya sudah punya breadcrumb tapi tidak muncul di Google?
Cek dulu dengan Rich Results Test — kemungkinan besar breadcrumb itu cuma visual, belum ditandai sebagai structured data.

Yoast atau Rank Math, mana yang lebih baik untuk breadcrumb?
Dua-duanya menghasilkan schema yang valid. Pilihannya lebih ke preferensi antarmuka dan fitur SEO lain yang kamu butuhkan di luar breadcrumb.

Apakah breadcrumb memperlambat loading blog?
Dampaknya nyaris tidak terasa. Breadcrumb hanya teks dan tautan kecil, bukan elemen berat seperti gambar atau script besar.

Berapa lama breadcrumb muncul di hasil pencarian setelah dipasang?
Bervariasi — tergantung seberapa sering Google meng-crawl ulang situsmu. Bisa beberapa hari, bisa juga beberapa minggu.

Kalau breadcrumb di blog kamu sudah terpasang tapi belum muncul juga di Google setelah beberapa minggu, coba cek dulu lewat Rich Results Test — siapa tahu ada satu baris kode yang kelewatan.