Breadcrumbs adalah salah satu bagian website yang cukup penting, yang menunjukkan lokasi di mana pengguna saat itu berada. Dari segi SEO sendiri, breadcrumbs tidak hanya meningkatkan pengalaman navigasi pengguna, tapi juga membantu mesin pencari seperti Google memahami struktur situs web Anda.
Meskipun jika diterjemahkan menjadi bahasa Indonesia arti breadcrumbs ini adalah rempahan roti, atau toping roti, namun kita saat ini tidak membahas hal tersebut. Breadcrumbs yang akan kita bahas adalah istilah yang mungkin sudah cukup familiar dengan praktisi SEO, dan pemilik website kebanyakan.
Artikel ini akan membahas pengertian breadcrumbs, fungsi dan manfaatnya dalam SEO, jenis, dan tips menerapkan breadcrumbs agar website Anda lebih SEO-friendly.
Apa itu Breadcrumbs?
Dilansir dari Yoast, breadcrumbs, atau yang juga dikenal sebagai breadcrumb trail, adalah elemen navigasi pada website yang membantu pengguna memahami lokasi mereka dalam struktur sebuah situs.
Breadcrumbs biasanya berbentuk barisan link atau teks horizontal yang menunjukkan jalur dari halaman utama hingga ke halaman yang sedang diakses pengguna. Misalnya, Anda dapat melihat breadcrumbs untuk artikel ini adalah “Beranda > Marketing > SEO > Breadcrumbs Adalah…”.
Nama “breadcrumbs” ini terinspirasi dari cerita Hansel dan Gretel, di mana karakter utama meninggalkan jejak remah roti untuk kembali ke tempat asal mereka. Dalam konteks website, breadcrumbs bertindak sebagai penunjuk arah yang memudahkan pengguna menavigasi halaman-halaman dalam sebuah situs.
Fungsi dan Manfaat Breadcrumbs
Dalam konteks SEO, breadcrumb memiliki fungsi dan manfaat sebagai berikut:
Breadcrumbs menyediakan jalur navigasi yang jelas dan mudah diikuti oleh pengguna, sehingga pengguna dapat kembali ke halaman sebelumnya atau ke bagian lain dari situs web dengan lebih mudah. Pada situs dengan struktur yang kompleks seperti e-commerce dan blog dengan banyak kategori, hal ini sangat membantu pengguna.
Meningkatkan Pengalaman Pengguna
Selain membantu navigasi, breadcrumbs membantu pengguna merasa lebih nyaman saat menjelajahi situs. Dengan panduan yang jelas, pengguna tidak akan merasa kebingungan atau merasa tersesat, sehingga meningkatkan tingkat kepuasan mereka selama berada di situs Anda.
Meningkatkan Performa SEO
Breadcrumbs biasanya berbentuk link, dan internal link pada website akan membantu Google menemukan halaman lain dari website Anda. Selain itu, breadcrumb juga dapat membantu mesin pencari seperti Google untuk lebih memahami struktur situs web.
Mesin pencari menggunakan breadcrumbs untuk menentukan hubungan antara halaman-halaman di dalam situs, sehingga proses crawl dan indeksasi menjadi lebih efisien. Memiliki struktur yang terorganisir dapat meningkatkan potensi situs web Anda meraih peringkat yang lebih tinggi.
Contohnya, jika Anda memiliki situs yang berisi kategori produk seperti pakaian, elektronik, dan buku, breadcrumbs membantu Google memahami bagaimana kategori tersebut saling berhubungan.
Meningkatkan Click-Through Rate (CTR) di Hasil Pencarian
Google sering menampilkan breadcrumbs dalam hasil pencarian sebagai bagian dari rich snippets. Breadcrumbs yang ditampilkan di hasil pencarian dapat membuat link ke website terlihat lebih menarik dan relevan, sehingga meningkatkan kemungkinan pengguna mengunjungi halaman web Anda.
Mengurangi Bounce Rate
Navigasi yang mudah cenderung membuat pengguna lebih nyaman menjelajahi bagian lain dari situs web Anda. Hal ini membantu mengurangi bounce rate, yang dapat memengaruhi peringkat SEO secara keseluruhan.
Jenis-Jenis Breadcrumbs
Terdapat tiga jenis breadcrumbs yang dapat Anda terapkan di website Anda:
Location-Based Breadcrumbs
Breadcrumbs jenis ini menunjukkan lokasi pengguna dalam struktur atau hierarki situs web. Contoh:
Beranda > Marketing > SEO > Apa itu SEO
Pada contoh di atas, Anda akan melihat breadcrumbs dimulai dari halaman beranda, hingga halaman artikel tempat di mana pengguna berada yang diurut secara hierarki. Jenis breadcrumbs ini sangat umum digunakan, dan cocok untuk situs dengan struktur kategori yang jelas.
Attribute-Based Breadcrumbs
Attribute-based breadcrumbs biasanya digunakan pada situs e-commerce untuk menunjukkan atribut atau fitur produk yang sedang dilihat pengguna. Contoh:
Beranda > Pakaian > Wanita > Gaun > Warna: Merah
Attribute-based breadcrumbs membantu pengguna memahami spesifikasi produk yang sedang mereka lihat. Ini sangat berguna ketika situs memiliki banyak variasi produk berdasarkan atribut tertentu, seperti warna, ukuran, atau merek.
Path-Based Breadcrumbs
Path-based breadcrumbs sering juga dikenal sebagai history-based, yang menunjukkan jalur yang dilalui pengguna untuk mencapai halaman tertentu. Namun, jenis ini kurang umum dibandingkan dua jenis sebelumnya karena bisa membingungkan jika pengguna menjelajahi situs dengan cara yang kompleks.
Beranda > Pencarian > Hasil Pencarian > Produk
Path-based breadcrumbs lebih cocok untuk situasi di mana jalur navigasi tidak selalu linier, seperti pada situs pencarian atau filter produk yang kompleks.
Cara Membuat Breadcrumbs
Membuat breacrumb bukanlah hal yang sulit, apalagi jika Anda menggunakan CMS seperti WordPress. Berikut adalah cara membuat breadcrumbs:
Membuat Breadcrumbs Manual
Jika website adalah website statis HTML, atau website yang tidak menggunakan CMS ataupun bantuan tools lainnya, Anda dapat membuat breadcrumb secara manual.
Masukkan kode berikut ini ke kode HTML Anda:
<style>
.breadcrumb {
list-style: none;
display: flex;
}
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
padding: 0 8px;
}
</style>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/produk">Produk</a></li>
<li class="breadcrumb-item active" aria-current="page">Smartphone</li>
</ol>
</nav>Lakukan modifikasi pada CSS <style>, dan pastikan Anda juga merubah URL dan teks breadcrumb sesuai dengan kebuhan Anda.
Setelah itu, tambahkan schema markup pada breadcrumb yang sudah ditambahkan ini. Hal ini berguna untuk membantu Google memahami bahwa terdapat breadcrumbs di halaman Anda, sehingga breadcrumbs dapat muncul di hasil pencarian.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Produk",
"item": "https://www.example.com/produk"
},
{
"@type": "ListItem",
"position": 3,
"name": "Smartphone",
"item": "https://www.example.com/produk/smartphone"
}
]
}
</script>Lakukan modifikasi schema markup breadcrumbs di atas sesuai kebutuhan Anda.
Membuat Breadcrumbs di WordPress dengan Rank Math
Jika Anda menggunakan WordPress ataupun CMS lain dalam membuat website, maka Anda dapat membuat breadcrumbs secara otomatis untuk setiap halaman web yang ada.
Install Plugin Rank Math SEO
Lakukan instalasi plugin Rank Math seperti biasa. Jika Anda belum tahu caranya, pada dashboard WordPress, pergi ke Plugin > Add New Plugin, dan ketikkan “Rank Math” di kolom pencarian kemudian install dan aktifkan plugin tersebut.
Aktifkan Schema (Structured Data)
Pergi ke halaman “Rank Math SEO”, kemudian cari opsi “Schema (Structured Data)”. Pastikan Anda mengaktifkan fitur tersebut agar breadcrumbs Anda memiliki schema markup yang baik.
Aktifkan Breadcrumbs
Pergi ke “General Settings” di Rank Math SEO, kemudian Anda akan melihat opsi menu “Breadcrumb”. Pastikan Anda mengaktifkan “Enable breadcrumbs function” yang ada pada halaman tersebut.
Setelah opsi tadi Anda centang, Anda akan melihat setting lain yang bisa Anda kustomisasi sesuai kebutuhan. Anda dapat mencentang opsi “Show Homepage Link” dan “Show Category(s)” untuk menampilkan breadcrumbs seperti ini:
Homepage > Kategori > Sub-Kategori > Judul Artikel
Tambahkan Kode Breadcrumbs di File Theme
Tahap terakhir yang perlu Anda lakukan adalah memasukkan kode untuk menampilkan breadcrumbs di file theme Anda. Pergi ke Tampilan > Editor Berkas Tema, lalu cari file tema “header.php” atau “single.php”, pilih salah satu.
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>Jika Anda tidak tahu di mana Anda harus menambahkan kode tersebut, Anda dapat menghubungi developer Anda, mencoba menghubungi developer Rank Math, atau bertanya di forum komunitas Rank Math di Facebook, atau sosial media lainnya.
Catatan: Jika Anda memiliki theme yang menambahkan breadcrumbs, Anda perlu menonaktifkan opsi breadcrumb dari theme atau dari Rank Math SEO. Hal ini diperlukan untuk menghindari konflik atau masalah yang mungkin terjadi.
Tips Optimasi Breadcrumbs untuk SEO
Berikut adalah tips yang dapat Anda terapkan untuk membuat breadcrumbs Anda tidak hanya membantu pengguna menavigasi website, tapi juga meningkatkan performa SEO.
Pastikan Breadcrumbs Relevan dan Konsisten
Breadcrumbs harus mencerminkan struktur situs yang sebenarnya dan relevan dengan konten yang ditampilkan di halaman tersebut. Misalnya, jika sebuah produk berada dalam kategori “Elektronik > Smartphone,” pastikan breadcrumbs mencerminkan jalur tersebut secara konsisten di seluruh situs.
Gunakan Markup Schema
Pastikan breadcrumbs Anda dilengkapi dengan schema markup, sehingga breadcrumb dapat membantu mesin pencari memahami dan menampilkan breadcrumbs Anda dengan benar di hasil pencarian.
Jika Anda menggunakan plugin SEO seperti Rank Math, schema markup akan ditambahkan secara otomatis. Namun, jika Anda menambahkannya secara manual, tambahkan kode schema breadcrumbs yang sudah diberikan di bagian “Membuat Breadcrumbs Manual” pada artikel ini.
Gunakan Separator Pada Breadcrumbs
Gunakan tanda pemisah atau separator seperti “>” atau “/” untuk meningkatkan keterbacaan breadcrumbs, sehingga pengguna dapat lebih mudah memahami konteks breadcrumbs.
Jangan Tambahkan Link ke Halaman Aktif
Navigasi breadcrumbs pada umumnya hanya menambahkan link ke teks “Home”, “Category”, dan bukan pada halaman di mana pengguna berada atau current page.
Misal, pada breadcrumb: Home > Marketing > SEO > Apa itu SEO
Anda tidak perlu menambahkan link ke teks “Apa itu SEO” karena akan membingungkan pengguna, dan tidak memberikan manfaat apapun.
Gunakan Desain yang Simpel dan User-Friendly
Gunakan desain breadcrumbs yang mudah terlihat dan dimengerti oleh pengguna. Pastikan breadcrumbs terlihat jelas di bagian atas halaman, dengan ukuran font yang sesuai dan warna yang membedakannya dari elemen lain di halaman.
Uji Fungsi Breadcrumbs Secara Berkala
Pastikan breadcrumbs bekerja dengan baik di semua perangkat, termasuk perangkat desktop dan perangkat mobile. Lakukan pengujian secara berkala untuk memastikan bahwa pengguna dapat mengklik setiap bagian breadcrumbs tanpa masalah.
Kesimpulan
Breadcrumbs adalah elemen penting dalam SEO yang tidak hanya meningkatkan pengalaman pengguna dalam menavigasi tetapi juga membantu mesin pencari memahami struktur situs web.
Dengan menerapkan breadcrumbs secara efektif, Anda dapat meningkatkan performa situs web Anda baik dari segi navigasi maupun performa SEO secara keseluruhan. Breadcrumbs adalah salah satu alat yang dapat membantu Anda mencapai peringkat tinggi, namun jangan lupa untuk menerapkan praktik optimasi SEO lainnya untuk hasil optimal.
