Breadcrumbs adalah salah satu istilah yang ada di dalam penggunaan situs web. Bagi yang belum familiar, istilah ini terdengar ambigu karena apabila diartikan ke dalam Bahasa Indonesia maka menjadi remahan roti. Lantas, apa hubungannya remahan roti dengan situs web?
Jadi, apa itu breadcrumbs? Breadcrumbs adalah istilah yang mengambil filosofi dari kisah Hansel dan Gretel. Dalam cerita tersebut, bagian yang paling banyak diingat adalah keduanya yang menggunakan breadcrumbs atau remahan roti sebagai petunjuk jalan pulang. Itulah mengapa filosofi tersebut digunakan untuk membantu pengunjung menavigasi tautan situs web.
Untuk memahaminya secara lebih lanjut, mari simak artikel satu ini!
Daftar Isi
Apa Itu Breadcrumbs
Apa itu breadcrumbs? Breadcrumbs adalah navigasi kecil pada halaman situs web yang dapat membantu pengguna maupun mesin pencari mengetahui struktur situs web. Berbentuk seperti teks kecil, breadcrumbs berisi halaman situs web yang pada umumnya banyak ditemukan di bagian atas situs, tepatnya di bawah bagian navigasi.
Agar bisa memahami breadcrumbs dengan lebih mudah, kamu bisa mengibaratkannya sebagai peta yang biasa dipampang di tempat umum, seperti mall dan kebun binatang. Saat pengunjung tersesat, mereka bisa mengunjungi tempat peta tersebut untuk mengetahui lokasi mereka berada saat itu.
Fungsi breadcrumbs tidak jauh berbeda dengan gambaran peta tersebut karena dapat membantu pengunjung mengetahui keberadaan mereka saat mengunjungi situs web. Dengan kata lain, pengunjung bisa mengetahui di halaman mana mereka berada.
Ini menjadi salah satu alasan mengapa breadcrumbs sangat berguna. Bahkan, breadcrumbs juga memiliki peran penting dalam upaya optimasi atau yang dikenal dengan istilah Search Engine Optimization (SEO).
Jenis-jenis Breadcrumbs
Dari pemaparan tentang apa itu breadcrumbs di atas, apakah kamu sudah bisa sedikit banyak memahami istilah tersebut? Apakah breadcrumbs memiliki berbagai jenis berbeda?
Terdapat tiga jenis paling utama yang harus kamu ketahui, yaitu:
Hierarchy-based Breadcrumbs
Hierarchy-based breadcrumbs adalah navigasi situs web yang menampilkan jalur hierarki dari halaman saat ini hingga halaman utama. Fitur ini memudahkan pengguna melacak dan kembali ke halaman sebelumnya. Breadcrumbs ini penting untuk meningkatkan pengalaman pengguna, terutama di situs dengan struktur kompleks.
Pengguna dapat dengan cepat memahami konteks lokasi mereka dalam situs, meningkatkan navigasi dan pengindeksan oleh mesin pencari. Jenis breadcrumbs satu ini membantu meningkatkan keteraturan dan aksesibilitas situs web.
Contoh dari jenis breadcrumbs ini yang bisa dijadikan sebagai gambaran adalah Home > Hosting > WordPress Hosting
Attribute-based Breadcrumbs
Attribute-based Breadcrumbs adalah sistem navigasi di situs web yang menggunakan atribut khusus untuk menelusuri hierarki konten. Breadcrumbs ini memungkinkan pengguna melacak jalur mereka dengan mengidentifikasi karakteristik utama dari halaman yang dikunjungi. Misalnya, dalam toko online, breadcrumbs dapat menunjukkan kategori produk, merek, atau harga.
Dengan pendekatan ini, pengguna dapat dengan mudah kembali ke langkah sebelumnya atau menavigasi ke bagian lain dari situs berdasarkan atribut yang relevan, meningkatkan pengalaman pengguna dan efisiensi penelusuran.
Salah satu contoh dari breadcrumbs jenis ini adalah Home > Domain > Domain.ID > Domain.ASIA > Domain Premium.
History-based Breadcrumbs
History-based breadcrumbs merupakan fitur navigasi yang menampilkan jejak atau urutan halaman yang telah dikunjungi pengguna dalam sebuah situs web. Ini membantu pengguna memahami konteks lokasi mereka saat ini dan memudahkan mereka untuk kembali ke halaman sebelumnya.
History-based breadcrumbs tidak mengikuti struktur hierarki situs, sehingga bersifat lebih dinamis karena merefleksikan jalur navigasi aktual pengguna. Fitur ini meningkatkan pengalaman pengguna dengan memberikan navigasi yang lebih intuitif dan kontekstual.
Contoh dari jenis breadcrumbs ini adalah Home > Hosting > Design > Design Logo > Domain
Manfaat Breadcrumbs
Setelah mengetahui apa itu breadcrumbs, apakah kamu bisa menyimpulkan manfaat yang bisa didapatkan dari keberadaan breadcrumbs pada situs web? Nah, berikut adalah beberapa manfaat breadcrumbs, bagi situs web dan pengunjung:
Membantu Optimasi SEO
Salah satu manfaat dari apa itu breadcrumbs adalah membantu proses optimasi SEO yang dilakukan pada suatu situs web. Tujuannya agar situs web mendapatkan peringkat di mesin pencari dengan muncul di halaman hasil pencarian teratas saat pengguna internet mengetikkan kata kunci yang relevan.
Google sebagai mesin pencari cenderung lebih mengutamakan situs web yang memiliki breadcrumbs. Breadcrumbs berperan memberitahu Google bagaimana struktur sebuah situs web. Inilah yang kemudian membantu both mesin pencari dalam proses crawling maupun indexing. Melalui breadcrumbs, bot akan mengumpulkan informasi mengetahui situs web.
Tidak hanya sampai disitu saja, mesin pencari Google kemudian akan menampilkan struktur breadcrumbs di hasil pencarian. Hal ini berguna untuk mengkategorikan informasi pada halaman situs web.
Meningkatkan Pengalaman Pengguna
Apa itu breadcrumbs hadir dengan banyak manfaat, dan salah satunya adalah meningkatkan pengalaman pengguna (user experience). Di mana breadcrumbs akan membantu pengguna menavigasi situs web yang mereka kunjungi, sehingga pengguna akan sangat terbantu.
Manfaat ini akan menjadi lebih terasa terutama bagi pengguna yang baru pertama kali mengunjungi suatu situs web. Adanya breadcrumbs mempermudah pengguna baru. Jad, bukan tidak mungkin mereka ingin terus melanjutkan penjelajahan di situs web kamu hingga membuat keputusan, misalnya membeli produk atau jasa.
Kamu juga bisa mencoba tips meningkatkan user experience situs web dengan membaca artikel satu ini.
Menurunkan Bounce Rate
Bounce rate adalah persentase pengunjung situs web yang kemudian meninggalkan situs tersebut tanpa membuka halaman lain. Breadcrumbs dalam hal ini berperan untuk membantu navigasi yang dapat meningkatkan pengalaman pengguna para pengunjung situs web.
Berkat adanya breadcrumbs, pengunjung bisa menjelajahi situs web dengan lebih mudah, sehingga dapat menurunkan bounce rate. Coba cara lain menurunkan bounce rate lainnya yuk!
Cara Membuat Breadcrumbs
Pembahasan tentang apa itu breadcrumbs di atas tentunya sangat membantu siapapun mengetahui dasar-dasar breadcrumb dengan lebih mudah, bukan? Apakah membuat breadcrumbs semudah mempelajari dasar-dasarnya?
Sebenarnya, cara membuat breadcrumbs tidak sesulit yang dibayangkan, terlebih dengan bantuan beberapa software yang bisa kamu pasang secara gratis.
Untuk dapat membuat breadcrumbs, berikut adalah beberapa software yang bisa kamu manfaatkan:
Yoast SEO
Beralih dari pengertian apa itu breadcrumbs, kini saatnya kamu belajar bagaimana cara membuat breadcrumbs. Kali ini adalah dengan menggunakan Yoast SEO, yaitu plugin SEO yang ada di WordPress. Adapun langkah-langkah membuat breadcrumbs menggunakan software ini adalah sebagai berikut:
- Masuk ke script template website
- Pilih salah satu menu diantara single.php, page.php, atau header.php yang ada pada template
- Kemudian, masukkan script sebagai berikut:
<?php
if (function_exists(‘yoast_breadcrumb’)){
yoast_breadcrumbs(‘<p id=”breadcrumbs”>’,’</p>’);
}
?>
- Setelah menuliskan script, lakukan save atau update, pada template
- Selanjutnya, masuk ke website WordPress anda dan lakukan login
- Scroll kebawah dan pilih menu “SEO”, lalu pilih “Search Appearance”, dan pilih menu “Breadcrumbs”
- Terakhir, pilihlah menu “Enabled”
Plugin NavXT
Plugin NavXT adalah software yang bisa dipelajari dengan mudah. Pemasangannya juga bisa kamu lakukan tanpa harus mengeluarkan biaya alias gratis. Sebelum membuat breadcrumbs menggunakan plugin ini, pastikan bahwa kamu sudah melakukan backup. Kemudian, mulai buat breadcrumbs dengan langkah-langkah berikut:
- Sebagai langkah pertama, masuk menu plugin WordPress dan pilih add new
- Kemudian, cara dan install breadcrumbs NavXT dan lakukan activate
- Selanjutnya, masuk kebagian editor template WordPress dan pilih menu “Appearance” lalu pilih “Theme Editor”
- Langkah selanjutnya, cari theme header (header.php) dan masukkan script berikut:
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
- Kemudian, save
- Masuk ke menu plugin kemudian breadcrumbs, lalu NavXT, setting
- Terakhir, lakukan kustomisasi sesuai dengan kebutuhan situs web
Menggunakan Tema WordPress yang Mendukung Pembuatan Breadcrumbs
Jika dua cara sebelumnya adalah menggunakan software yang bisa dipasang di WordPress, kali ini kamu bisa membuat breadcrumbs dengan cara yang lebih sederhana. Cari tema yang mendukung fitur breadcrumbs, seperti Pixwell, Urban Mag, SmartMag, dan lainnya.
Kesalahan yang sering Terjadi saat Menggunakan Breadcrumbs
Agar semakin bisa memahami apa itu breadcrumbs, pastikan kamu juga tahu apa saja kesalahan yang sering terjadi dalam penggunaan breadcrumbs. Agar breadcrumbs bekerja sebagaimana mestinya dan memberikan manfaat bagi situs web, hindar beberapa kesalahan penggunaan breadcrumbs berikut:
- Menggunakan breadcrumbs saat tidak dibutuhkan
- Menjadikan breadcrumbs sebagai navigasi utama
- Memaksakan penggunaan breadcrumbs pada halaman situs dengan banyak kategori
Kesimpulan
Dari penjelasan di atas, bukankah kamu bisa memahami apa itu breadcrumbs dengan lebih mudah? Kini kamu bisa mempersiapkan pembuatan situs web dengan lebih matang, terlebih jika kamu juga memahami beberapa istilah penting yang berkaitan dengan penggunaan situs web.
Pembuatan situs web memerlukan beberapa hal penting, termasuk nama domain dan hosting. Keduanya bisa kamu dapatkan dari Exabytes yang juga memberikan peluang mendapatkan satu unit mobil listrik saat membeli domain dan hosting selama periode program EXAVAGANZA berlangsung.
Tunggu apalagi?
