Warta Ekonomi.co.id, Jakarta
Breadcrumbs atau breadcrumb trail adalah sistem navigasi sekunder yang menunjukkan lokasi pengguna di situs atau aplikasi web. Istilah ini berasal dari dongeng Hansel dan Gretel di mana karakter utama membuat jejak remah roti untuk melacak kembali ke rumah mereka.
Dalam artikel ini, Anda akan mendalami penggunaan breadcrumps di situs dan membahas beberapa praktik terbaik untuk menerapkan navigasi breadcrumps ke situs web atau aplikasi Anda sendiri.
Apa Itu Breadcrumbs Navigation?
Breadcrumbs navigation atau navigasi breadcrumbs adalah bentuk navigasi situs yang akan menunjukkan kepada pengunjung letak lokasi mereka berada di halaman situs tanpa harus memeriksa struktur URL. Toko e-commerce yang memiliki banyak kategori dapat menyederhanakan pengalaman pengguna (user experience) dengan menampilkan fitur breadcrumbs.
Baca Juga: Apa Itu Schema Markup?
Breadcrumbs menyederhanakan navigasi situs dengan memudahkan pengguna untuk berpindah di antara kategori, produk, dan halaman informasi. Situs web besar yang memiliki subkategori dapat membuat pengguna tersesat dalam penjelajahan mereka sehingga breadcrumbs hadir untuk memecahkan masalah ini dengan mengomunikasikan secara jelas dimana lokasi pengunjung saat berada di toko e-commerce.
3 Jenis Breadcrumbs yang Biasa Digunakan
Tidak semua breadcrumbs memiliki karakter yang sama. Ada tiga jenis breadcrumbs, masing-masing memiliki tujuannya sendiri. Sebelum menambahkan breadcrumbs ke situs Anda, cari tahu jenis breadcrumbs mana yang paling sesuai dengan situs Anda.
1. Breadcrumbs Berbasis Hierarki (Breadcrumbs Berbasis Lokasi)
Jenis breadcrumbs paling umum yang memberi tahu pengguna dimana mereka berada di struktur situs dan cara kembali ke beranda.
Misalnya: Beranda> Sumber Daya> Panduan SEO
2. Breadcrumbs Berbasis Atribut
Ini biasanya digunakan di situs e-commerce untuk menunjukkan atribut apa yang telah diklik pengguna.
Misalnya: Beranda> Sepatu> Hiking> Wanita
3. Breadcrumbs Berbasis Riwayat Browser
Tunjukkan kepada pengunjung situs seputar halaman lain di situs yang telah mereka kunjungi sehingga fitur ini mirip dengan riwayat browser.
Misalnya, jika Anda mencari berita tentang SEO dan membaca tiga artikel berbeda, breadcrumps mungkin terlihat seperti ini: Beranda> Artikel SEO 1> Artikel SEO 2> Halaman saat ini.
3 Manfaat Menggunakan Breadcrumbs untuk SEO
Menggunakan teknik breadcrumbs sepertinya hal yang bagus. Tapi, apa yang sebenarnya keuntungan yang dihasilkan dari menggunakan breadcrumbs? Simak penjelasannya berikut ini.
1. Breadcrumbs Dapat Meningkatkan Pengalaman Pengguna (UX)
Breadcrumbs mempermudah pengguna untuk menavigasi situs web dan mendorong pengguna untuk menjelajahi bagian lain dari situs tersebut.
Katakanlah, misalnya, Anda ingin mempelajari lebih lanjut tentang perusahaan susu. Anda menuju ke situs mereka dan berakhir di halaman riwayat perusahaan susu tersebut. Dengan menggunakan breadcrumbs, Anda dapat dengan mudah menavigasi kembali ke bagian Tentang Kami, Riwayat, atau bahkan beranda mereka.
Ini adalah cara yang praktis untuk membantu pengguna menemukan apa yang sedang mereka cari dengan mudah dan akan menarik mereka lebih dalam ke situs web Anda.
2. Meningkatkan Peringkat Situs
Menggunakan breadcrumbs bagus untuk meningkatkan UX, tetapi juga meningkatkan peringkat situs di halaman pencarian Google. Jika Anda bisa melakukan keduanya, Anda dapat mewujudkan strategi SEO yang baik. Menurut Google, mereka menggunakan breadcrumbs untuk mengategorikan dan mendapatkan relevansi atas konten yang telah dibuat.
Pada 2018, Google menambahkan breadcrumps ke halaman hasil pencarian, menjadikannya lebih berharga dari sebelumnya. Breadcrumbs yang terdapat di SERP juga membantu pengguna untuk memahami di mana letak halaman yang berada di situs Anda.
Breadcrumb sangat berguna untuk situs yang memiliki beberapa halaman tingkat lokal, seperti restoran yang berada di suatu kota. Sebuah studi kasus baru-baru ini menemukan bahwa menggunakan breadcrumbs dapat membantu mereka mendapatkan 10 hasil pencarian teratas di Google.
3. Mengurangi Bounce Ratio
Bounce ratio atau rasio pentalan mungkin bukan menjadi faktor dalam menentukan peringkat secara langsung, tetapi tetap dapat membantu kinerja SEO.
Selain itu, bounce ratio yang tinggi dapat menunjukkan masalah pengalaman pengguna (UX), sebuah masalah yang dapat dipecahkan dengan menggunakan breadcrumbs.
Cara Membuat Navigasi Breadcrumbs
Navigasi breadcrumbs menyediakan backlink ke setiap laman sebelumnya yang dinavigasi pengguna, dan menunjukkan lokasi pengguna saat ini di situs web.
Langkah 1) Tambahkan HTML:
Â
Â
Â
Â
- Italy
Langkah 2) Tambahkan CSS:
/* Style the list */
ul.breadcrumb {
 padding: 10px 16px;
 list-style: none;
 background-color: #eee;
}
/* Display list items side by side */
ul.breadcrumb li {
 display: inline;
 font-size: 18px;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
 padding: 8px;
 color: black;
 content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
 color: #0275d8;
 text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
 color: #01447e;
 text-decoration: underline;
}
Tips dan Trik dalam Menggunakan Breadcrumbs
1. Hanya Gunakan Breadcrumbs Jika Sesuai dengan Site Structure Anda.
Navigasi breadcrumbs memiliki struktur linier, jadi Anda hanya bisa menggunakannya jika sesuai dengan hierarki situs web Anda. Jika Anda memiliki halaman yang dapat diakses dari landing page yang berbeda, menggunakan navigasi breadcrumbs hanya akan membingungkan pembaca sehingga mereka terus mengakses halaman yang sama dari titik awal yang berbeda.
Selain itu, jika situs Anda relatif sederhana yang hanya memiliki beberapa halaman, Anda sudah seharusnya tidak memerlukan pengggunaan breadcrumbs ini.
2. Kenali Audiens Anda
Praktik terbaik dalam navigasi breadcrumbs akan memaksa perancang web untuk menempatkan navigasi di bagian atas halaman--tetapi Apple, salah satu perusahaan besar di dunia, menentang logika ini dengan meletakkan navigasi runut breadcrumbs mereka di bagian bawah situs mereka. Pada akhirnya, Anda harus mengenali karakteristik audiens Anda.
Pelanggan Apple biasanya paham teknologi, dan kemungkinan akan mencari navigasi tersebut jika mereka membutuhkannya. Pertimbangkan kebutuhan pelanggan Anda, dan terapkan pengujian A atau B jika Anda tidak yakin.
3. Perhatikan Penempatan Breadcrumbs
Navigasi breadcrumbs yang Anda gunakan harus diposisikan dari kiri ke kanan, dengan posisi link terdekat ke kiri adalah beranda situs Anda, dan link terdekat ke kanan adalah laman pengguna saat ini.
Sebuah studi yang dilakukan Nielsen Norman Group menemukan bahwa pengguna menghabiskan 80% dari waktu mereka melihat bagian kiri halaman dan 20% melihat bagian sebelah kanan sehingga hal ini menjadi bukti yang kuat untuk mendesain posisi breadcrumbs dari kiri-ke-kanan. Plus, link yang paling berada di bagian kiri akan muncul sebagai awalan sehingga hal ini bisa menjadi faktor pemicu pemberian peringkat tertinggi di halaman pencarian.
4. Jaga Agar Judul Breadcrumbs Konsisten dengan Judul Halaman Situs
Untuk menghindari kebingungan, Anda harus tetap konsisten dengan halaman dan judul breadcrumbs yang Anda gunakan, terutama jika Anda telah menargetkan kata kunci tertentu dalam judul tersebut. Anda juga harus menghubungkan judul breadcrumbs dengan jelas ke halaman situs. Banyak perusahaaan besar secara efektif memberi label pada judul breadcrumbs-nya agar sesuai dengan judul halaman situs.Â
5. Kreatif Dalam Mendesain Breadcrumbs
Navigasi breadcrumbs yang konvensional seperti ini: Beranda> Tentang Kami> Karier. Namun, Anda tidak perlu mengikuti jalur konvensional jika Anda merasa desain yang berbeda dapat lebih menarik hati audiens Anda, atau terlihat lebih baik di situs Anda. Dalam hal ini, diperlukan variasi dan estetika desain yang sesuai dengan kebutuhan Anda.
Baca Juga: Mengenal Dasar-Dasar Teknik SEO
Simpulan
Breadcrumbs telah digunakan selama lebih dari satu dekade. Breadcrumbs bisa menjadi elemen yang kuat untuk meningkatkan pengalaman pengguna dan menciptakan keterlibatan. Dari sudut pandang bisnis, ini akan membantu dalam akuisisi (SEO) dan konversi (memudahkan navigasi di situs web).
Ikuti Whatsapp Channel Republika