Breadcrumbs adalah: Pengertian, Manfaat, hingga Contohnya

Jika kamu mengibaratkan website sebagai sebuah museum, breadcrumbs adalah penunjuk jalan atau navigasi. Fungsinya yaitu untuk membantu pengunjung menemukan ruang yang ingin mereka lihat.

Google menganggap breadcrumbs sebagai bagian yang cukup penting dalam website. Buktinya, mereka menampilkannya dalam hasil pencarian. Oleh karena itu, kamu perlu memahami apa itu breadcrumbs, manfaat, fungsi, dan cara membuatnya.

Apa itu Breadcrumbs?

Breadcrumbs adalah bagian atau elemen dalam sebuah situs yang memungkinkan pengunjung melacak halaman yang sedang mereka buka. Biasanya elemen ini berada di bagian atas dengan tampilan yang sederhana tapi banyak pengguna yang mudah mengenalinya.

Terdiri dari beberapa link yang masing-masing menunjukkan struktur sebuah situs dan hubungan antara halaman. Misalnya, dari breadcrumbs “Digitaloka > SEO > Off Page > Link Building” kamu bisa mengetahui bahwa:

Digitaloka adalah bagian Home atau Root
SEO menjadi salah satu kategori dalam website Digitaloka
Off Page adalah sub-kategori dari SEO
Sementara itu Link Building merupakan halaman terakhir yang sedang dibuka oleh pengunjung.

Jika kamu mengibaratkannya sebagai museum, Link Building adalah ruangan tempat pengunjung berdatangan. Untuk sampai ke ruang tersebut, tentunya pengunjung harus masuk melalui bagian Off Page yang ada di dalam bangunan SEO.

Fungsi Breadcrumbs

Pada pembahasan awal, kamu sudah mengetahui bahwa fungsi breadcrumbs yang paling utama adalah menjadi navigasi pengunjung situsmu. Selain itu, masih ada tiga fungsi lain yang tidak boleh kamu lewatkan, yaitu:

Mengoptimalkan SEO

Dapat membantu mengoptimalkan SEO situs milikmu sehingga memiliki ranking yang lebih baik di SERP. Pasalnya Google lebih memilih situs yang memiliki breadcrumbs daripada yang tidak.

Mengapa demikian? Karena elemen yang satu ini memberikan informasi tentang struktur situs yang dikunjungi oleh Googlebot dan mesin pencari lainnya. Alhasil, proses crawling dan indexing lebih cepat serta optimal.

Meningkatkan User Experience di Website

Selain Googlebot, pengunjung juga ikut merasakan kemudahan dengan adanya hal ini, terutama pengunjung baru. Ketika seseorang mengunjungi sebuah website, elemen ini membantu dia menavigasi “perjalanannya”.

Misalnya, katakanlah kamu sedang mencari baju baru di sebuah toko online. Dengan breadcrumbs, kamu bisa mengelompokkan baju berdasarkan atribut tertentu seperti ukuran, bahan kain, desain, atau harga.

Coba bayangkan, bagaimana jadinya jika website toko online tersebut tidak memiliki breadcrumbs? Mungkin kamu harus menghabiskan waktu cukup lama untuk menemukan baju yang sesuai keinginan.

Mengurangi Bounce Rate

Bounce rate adalah metrik yang mengukur berapa banyak pengunjung yang langsung meninggalkan situsmu setelah membukanya, tanpa melakukan interaksi apapun. Breadcrumbs yang mempermudah navigasi pengunjung merupakan salah satu solusi untuk mengurangi bounce rate. Mudahnya, elemen yang satu ini menjaga agar pengunjung betah menjelajahi berbagai halaman yang ada di situsmu.

Manfaat Breadcrumbs

Secara umum, manfaat breadcrumbs akan lebih terasa jika situs milikmu telah memiliki struktur yang mendalam. Soalnya elemen ini memudahkan pengunjung berpindah dari satu level ke level lainnya.

Di sisi lain, situs yang relatif kecil justru cenderung tidak terlalu membutuhkannya. Sebab, pengunjung bisa menjelajahi setiap halaman dengan cepat dari Beranda atau Homepage. Meski demikian, sebaiknya kamu tetap menggunakan breadcrumbs. Karena manfaatnya akan terasa seiring perkembangan situs kamu. Berikut ini manfaatnya:

Memudahkan Navigasi Pengguna

Bisa memudahkan navigasi pengguna dari satu halaman ke halaman lainnya. Hal ini dapat meningkatkan penghasilan dari iklan atau yang lainnya.

Misalnya ada satu orang yang datang ke situsmu dari artikel berjudul “Strategi Link Building”. Setelah selesai membaca artikelnya, dia melihat petunjuk atau penunjuk jalan dan mencari topik lain dalam kategori yang sama.

Membantu Googlebot Mengindeks Halaman Website

Dalam SEO, breadcrumbs termasuk dalam internal link yang membantu Googlebot mengakses situs kamu. Lebih jauh lagi, elemen ini memudahkan bot mesin pencari milik Google untuk memahami strukturnya.

Artinya, dapat meningkatkan kemampuan crawling bot mesin pencari. Secara otomatis jumlah halaman yang muncul di Google index juga akan bertambah.

Meningkatkan Konversi

Khusus bagi situs ecommerce atau toko online, adanya penunjuk jalan semacam ini sangat berguna untuk meningkatkan konversi. Sebab pengunjung dapat mencari produk yang mereka mau dengan lebih mudah. Dengan begitu, mereka tidak akan memilih belanja dari kompetitor sehingga konversi penjualanmu meningkat.

Meningkatkan Pengunjung Organik

Seperti pada pembahasan sebelumnya, breadcrumbs bisa muncul di hasil pencarian mesin pencari. Istilah teknisnya adalah rich snippets. Biasanya website dengan rich snippets cenderung terlihat lebih atraktif dan menarik perhatian pengguna untuk mengunjunginya.

Akan tetapi, untuk memastikan breadcrumbs website kamu muncul di SERP, kamu harus menggunakan schema di kode HTML-nya. Mengutip dari Semrush.com, schema yang biasa dipakai oleh pemilik website adalah sebagai berikut:

{

“@context”: “http://schema.org”,

“@type”: “BreadcrumbList”,

“itemListElement”: [

{

“@type”: “ListItem”,

“position”: 1,

“item”: {

“@id”: “https://domainkamu.com/home”,

“name”: “Home”

}

{

“@type”: “ListItem”,

“position”: 2,

“item”: {

“@id”: “https://domainkamu.com/category”,

“name”: “Category”

}

]

}

</script>

Setelah memasang schema tersebut, lakukan pengecekan dengan tool khusus untuk audit website yang tersedia di internet. Seperti Ahrefs, Google Search Console, Semrush, dan lain-lain.

Tipe Breadcrumbs

Breadcrumbs bisa diatur dalam dua cara, yaitu berdasarkan struktur situsnya atau urutan halaman yang telah dibuka oleh pengunjung. Pengaturan ini digunakan oleh berbagai jenis situs yang ada di internet, namun pengaturan berdasarkan struktur situs menjadi yang paling umum.

Dua jenis pengaturan tersebut kemudian dikembangkan lagi menjadi tiga tipe breadcrumbs, yaitu hierarchy-based, attribute-based, dan path-based. Apa ciri-ciri dan perbedaan antara masing-masing tipe? Simak penjelasan lengkapnya berikut ini:

Hierarchy-based Breadcrumbs

Tipe yang pertama dibuat dengan mengikuti hirarki dari situs milikmu. Urutannya dimulai dari kategori yang paling general terlebih dulu.

Setelah itu beralih ke kategori yang lebih spesifik alias sub-kategori sebelum akhirnya sampai ke halaman yang sedang dibuka oleh pembaca. Biasanya pengguna lebih sering menggunakan hierarchy-based untuk kebutuhan blog pribadi atau bisnis.

Bagi pengguna yang datang dari hasil pencarian Google, tipe seperti ini sangat membantu memudahkan navigasi. Soalnya mereka bisa langsung beralih ke sub-kategori atau kategori yang lebih general untuk menemukan lebih banyak informasi.

Attribute-based Breadcrumbs

Attribute-based adalah tipe yang lebih dinamis karena lebih mengutamakan filter sesuai kebutuhan pengunjung. Tipe ini banyak diterapkan pada situs ecommerce karena pengunjung bisa memfilter produk berdasarkan atribut tertentu.

Misalnya, saat kamu mencari sepatu di Tokopedia atau Shopee. Kamu bisa menemukan sepatu dengan ukuran, warna, tipe, dan harga yang sesuai kebutuhan tanpa perlu mengecek produknya satu per satu.

Path-based Breadcrumbs

Tipe yang ketiga ini hadir dari histori halaman yang dikunjungi oleh pengunjung sebelum sampai ke halaman tertentu. Menariknya, path-based breadcrumb tidak menampilkan semua history halaman pengguna.

Ikon yang muncul justru tombol kembali dengan ikon “<”. Saat pengunjung menekan tombol ini, mereka akan kembali ke halaman yang telah mereka kunjungi sebelumnya.

Kalau kamu membandingkan dengan dua tipe sebelumnya, path-based sangat jarang digunakan karena fungsinya mirip seperti tombol kembali yang ada di browser. Jadi secara fungsi, tipe ini masih kalah dari yang lainnya.

Cara Membuat Breadcrumbs di WordPress

Setelah mengetahui tipe, fungsi, dan manfaatnya, sekarang kamu tinggal belajar cara membuat breadcrumbs di WordPress. Caranya cukup mudah kok, tapi kamu perlu memasang beberapa plugin, yaitu NavXT dan Yoast SEO.

Adapun langkah-langkah yang bisa kamu ikuti adalah sebagai berikut:

Membuat Breadcrumbs di WordPress Menggunakan Plugin NavXT

NaXT adalah plugin pembuat breadcrumbs yang bisa digunakan secara gratis di WordPress. Ditambah lagi, mempelajari penggunaannya cukup mudah, bahkan oleh pemula.

Untuk membuatnya, hal pertama yang harus kamu lakukan adalah membuka menu “Plugin” di WordPress. Setelah itu, ikuti panduan berikut ini:

Cari plugin NavXT melalui kolom pencarian kemudian install plugin-nya
Selanjutnya aktifkan plugin NavXT dengan menekan tombol “Activate”
Setelah aktif, kamu bisa langsung masuk ke menu “Appearance”
Dalam menu ini, pilih opsi “Widget”
Kemudian silakan pilih letak breadcrumbs di tema situs milikmu
Jika sudah, klik tombol “Save”

Membuat Breadcrumbs di WordPress Menggunakan Yoast SEO

Yoast SEO dikenal sebagai salah satu plugin SEO terbaik di WordPress, tapi ternyata masih ada fitur lain yang bisa kamu gunakan. Contohnya seperti fitur untuk membuat breadcrumbs.

Lalu bagaimana cara membuat breadcrumbs di WordPress dengan Yoast SEO? Ini langkah-langkahnya

Cari dan install plugin Yoast SEO di WordPress kamu
Lalu aktifkan plugin-nya
Setelah itu, silakan edit file “header.php” yang ada di tema situs kamu, lalu tempelkan code ““<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘</p><p id=”breadcrumbs”>’,'</p><p>’ );
}
?>”
Jika sudah, lanjutkan dengan membuka menu “Appearance” dan klik pada opsi “Theme File Editor”
Salin dan tempelkan code sebelumnya
Kemudian klik “Update File”
Selanjutnya, buka Yoast SEO dan masuk ke menu “Setting>Advanced>Breadcrumbs”
Atur di mana kamu akan meletakan breadcrumbs pada situsmu
Aktifkan breadcrumb-nya.

Contoh Breadcrumbs

Sebelumnya kamu telah mengenal tiga tipe yang sering digunakan oleh pemilik website di internet. Agar kamu mempunyai gambaran yang lebih jelas, di bawah ini ada tiga contoh breadcrumbs dari setiap tipe:

Hierarchy-based Breadcrumbs

Sumber: Yoast SEO

Gambar di atas adalah contoh hierarchy-based yang ada di salah satu website. Dalam gambar tersebut, jalurnya dimulai dari kategori paling general, yaitu “SEO Blog”. Setelah itu lanjut ke sub-kategori “Site Structure” hingga akhirnya tiba di halaman yang berjudul “What are breadcrumbs? Why they important for SEO?” Breadcrumbs ini akan dilihat oleh setiap orang yang mengunjungi halaman tersebut.

Path-based Breadcrumbs

Sumber: SE Ranking

Tulisan “Back to Results” pada tombol di atas adalah ciri utama dari path-based breadcrumbs. Seperti yang dijelaskan sebelumnya, tipe yang satu ini bisa berfungsi sebagai tombol kembali bagi pengguna. Oleh karena itu, pemilik website wayfair menggunakan ikon “<-” pada breadcrumb-nya.

Attribute-based Breadcrumbs

Sumber: Zalora Indonesia

Gambar contoh selanjutnya diambil dari website Zalora Indonesia. Melalui gambar tersebut, kamu bisa langsung mengetahui bahwa pengguna sedang mencari kaos pria lengan pendek, singlet, dan outwear.

Dengan demikian, produk yang akan tampil bisa menjadi lebih spesifik. Artinya, pengguna tidak akan menemukan produk celana atau sepatu di hasil pencariannya.

Tips Menggunakan Breadcrumbs di Website

Menggunakan breadcrumbs di website tidak boleh sembarangan karena dapat mengakibatkan penurunan performa SEO. Selain itu, kemungkinan besar pengalaman pengguna juga menurun sehingga bounce rate meningkat.

Agar kamu terhindar dari mimpi buruk tersebut, coba terapkan beberapa tips berikut ini:

Gunakan Breadcrumbs untuk Mendukung Navigasi Utama

Fungsi utama breadcrumbs memang untuk membantu navigasi pengguna, tapi bukan berarti bisa menggantikan fungsi navigasi utama website. Sebaiknya, gunakan hanya sebagai pendukung.

Jika website kamu tidak memiliki navigasi utama, pengunjung justru akan kesulitan berpindah dari satu halaman ke halaman yang lainnya. Contohnya, mereka harus mengandalkan tombol kembali di browser daripada menekan hyperlink dari sub-kategori atau kategori utama pada breadcrumbs.

Gunakan Tanda Pemisah

Banyak orang yang membuatnya dengan tanda lebih dari atau “>” sebagai pemisah antara satu kategori dengan kategori lainnya. Kamu bisa berkreasi dengan memilih ikon lain sebagai tanda pemisahnya. Misalnya, menggunakan garis miring atau “/”.

Hindari Memasang Link ke Halaman yang Sedang Aktif

Sebisa mungkin hindari memasang link ke halaman yang sedang aktif atau sedang dibuka oleh pengguna. Mengapa demikian? Karena tidak ada manfaatnya untuk pengguna.

Daripada memasang link, lebih baik gunakan huruf tebal atau garis bawah untuk menunjukkan halaman yang sedang aktif pada pengguna.

Buat Desain yang Simpel

Buat desain yang simple agar tidak mengalihkan perhatian pengguna saat membaca artikel di website-mu. Meskipun fungsinya cukup penting, breadcrumbs hanya “penunjuk jalan” bagi pengguna sehingga tidak perlu terlalu mencolok.

Cek secara Berkala

Tips yang terakhir adalah cek secara berkala yang sudah kamu buat di website-mu. Tujuannya agar kamu bisa segera tahu jika ada link breadcrumbs yang rusak atau tidak aktif lagi. Untuk pengecekannya, gunakan jasa audit website seperti Semrush, Ahrefs, Google Search Control, dan yang lainnya.

Penutup

Demikian pembahasan tentang breadcrumbs pada website yang mempunyai fungsi cukup penting. Dari pembahasan di artikel ini, kamu sekarang telah mengetahui bahwa breadcrumbs adalah elemen yang perlu kamu perhatikan sejak website masih relatif kecil.

Dengan begitu, kamu akan merasakan manfaatnya setelah website-mu tumbuh menjadi lebih besar seiring berjalannya waktu. Semoga bermanfaat!

Referensi: