Breadcrumbs itu apa? biasanya berbentuk serangkaian tautan teks atau ikon yang menggambarkan jalur yang diikuti oleh pengguna untuk sampai ke halaman saat ini. Breadcrumbs ini terdiri dari beberapa level, mulai dari tingkat tertinggi (misalnya beranda situs web) hingga tingkat halaman yang sedang dilihat oleh pengguna.
Apa itu Breadcrumbs?
Breadcrumbs adalah istilah dalam desain web yang mengacu pada elemen navigasi yang biasanya ditempatkan di bagian atas halaman web untuk membantu pengguna dalam melacak posisi mereka di dalam hierarki situs web.
Contoh sederhana dari breadcrumbs adalah:
Beranda > Kategori Produk > Produk Tertentu
Pengguna dapat mengklik pada tautan-tautan dalam breadcrumbs untuk kembali ke tingkat yang lebih tinggi dalam hierarki situs web atau untuk langsung menuju ke tingkat yang diinginkan.
Adanya Navigasi Breadcrumbs dalam sebuah web, bisa membantu untuk meningkatkan user experience dalam menjelajahi situs web dan mengerti posisi mereka dalam struktur situs web secara keseluruhan.
Jenis-Jenis Breadcrumbs
Ada beberapa jenis breadcrumbs yang umum digunakan dalam desain web wordpress maupun blogger, antara lain:
1️⃣ Location Breadcrumbs
Menampilkan jalur navigasi situs web berdasarkan level halaman. Mulai dari beranda atau halaman utama situs web, kemudian menampilkan jalur Hierarchy ke halaman yang sedang dilihat oleh pengguna.
Contoh:
Beranda > Produk > Kategori > Sub-kategori > Produk.
2️⃣ Path Breadcrumbs
Menampilkan jalur navigasi situs web berdasarkan struktur direktori situs web. Mulai dari beranda atau halaman utama situs web dan kemudian menampilkan jalur direktori ke halaman yang sedang dilihat oleh pengguna.
Contoh:
Beranda > /produk/kategori/sub-kategori/produk.
3️⃣ Hierarchy Breadcrumbs
Menampilkan jalur navigasi situs web berdasarkan struktur kategori atau topik situs web. Mulai dari kategori atau topik utama situs web dan kemudian menampilkan jalur hierarkis ke halaman yang sedang dilihat oleh pengguna.
Contoh:
Beranda > Produk > Kategori > Sub-kategori > Produk.
4️⃣ Custom Rule Breadcrumbs
Jenis breadcrumbs ini dapat disesuaikan berdasarkan aturan khusus yang ditetapkan oleh pengembang atau pemilik situs web. Breadcrumbs ini bisa mengikuti logika bisnis atau hierarki khusus yang ada dalam situs web tertentu.
Sangat penting bagi kamu untuk memilih jenis breadcrumbs yang sesuai dengan struktur situs web dan kebutuhan pengunjung webmu. Dengan adanya Breadcrumbs, secara tidak langsung bisa membantu meningkatkan navigasi pengguna, memberikan konteks halaman, dan meningkatkan user experience di situs web kamu.
Fungsi & Manfaat Breadcrumbs
Pembuatan Navigasi Breadcrumbs ini memiliki beberapa manfaat bagi pengguna dan situs web, antara lain:
🔵 Memudahkan navigasi pengguna
Breadcrumbs memberikan panduan visual tentang lokasi halaman saat ini dalam hierarki situs web. Pengguna dapat dengan mudah melihat jalur yang telah mereka tempuh untuk sampai ke halaman tersebut dan dapat dengan cepat kembali ke halaman sebelumnya atau ke halaman induk yang terkait.
🔵 Meningkatkan User Experience
Dengan memberikan panduan yang jelas tentang lokasi dan jalur dalam situs web, breadcrumbs dapat meningkatkan pengalaman pengguna dengan mengurangi kebingungan atau kesulitan dalam menavigasi situs web. Pengguna dapat dengan cepat memahami struktur dan hubungan antara halaman-halaman yang ada dalam situs web.
🔵 Meningkatkan SEO Website
Breadcrumbs dapat membantu meningkatkan optimasi search engine (SEO) situs web kamu. Memberikan struktur navigasi yang jelas di website kamu, tentunya bisa membantu mesin pencari memahami hierarki dan konteks halaman dalam situs web, sehingga ini dapat membantu meningkatkan peringkat pencarian dan menarik lebih banyak pengunjung.
🔵 Mengurangi Bounce Rate
Dengan memberikan panduan navigasi yang lebih jelas, breadcrumbs dapat membantu mengurangi tingkat bounce rate. Apa itu Bunce rate? Bunce rate adalah persentase pengunjung yang meninggalkan situs web Anda setelah hanya mengunjungi satu halaman.
Dengan adanya breadcrumbs, pengunjung dapat dengan mudah menjelajahi halaman-halaman lain dalam situs web Anda dan mengurangi potensi untuk meninggalkan situs setelah mengunjungi satu halaman.
🔵 Meningkatkan Konversi
Ketika pengguna merasa terbantu dengan navigasi breadcrums, maka secara otomatis dapat membantu meningkatkan konversi. Konversi yaitu mengubah pengunjung menjadi pelanggan atau melakukan tindakan yang diinginkan, seperti mengisi formulir, melakukan pembelian, atau berlangganan.
🔵 Alternatif Navigasi
Breadcrumbs juga dapat menjadi alternatif navigasi bagi pengguna yang tidak menggunakan menu navigasi atau tombol kembali pada perangkat mereka. Breadcrumbs memberikan jalur navigasi yang jelas dan terstruktur yang dapat membantu pengguna dalam menjelajahi situs web kamu.
🔵 Tampilan Profesional
Breadcrumbs dapat memberikan tampilan yang lebih profesional dan terorganisir pada situs web kamu. Dengan menambahkan breadcrumbs di website, secara tidak sadar kamu sudah memberikan kesan yang baik kepada pengguna tentang struktur dan pengaturan situs web Anda.
Secara keseluruhan, breadcrumbs dapat membantu meningkatkan pengalaman pengguna dan SEO situs web kamu dengan memberikan panduan navigasi yang lebih jelas dan terstruktur. Oleh karena itu, jika Anda memiliki situs web dengan banyak halaman atau konten, breadcrumbs dapat menjadi fitur yang sangat berguna dan penting untuk ditambahkan ke dalam desain situs web kamu.
Cara Membuat Breadcrumbs di WordPress
Untuk membuat breadcrumbs di WordPress, Anda dapat mengikuti langkah-langkah berikut:
🟡 Menggunakan Plugin Breadcrumbs
Salah satu cara termudah untuk membuat breadcrumbs di WordPress adalah dengan menggunakan plugin breadcrumbs.
Ada banyak plugin breadcrumbs yang tersedia di WordPress, seperti Yoast SEO, Breadcrumb NavXT, dan Breadcrumb Trail. Kamu bisa menginstal dan mengaktifkan salah satu plugin breadcrumbs tersebut melalui menu “Plugins” di dasbor WordPress, dan kemudian mengatur pengaturan dan tampilan breadcrumbs sesuai preferensi yang kamu inginkan.
🟡 Menggunakan kode Php
Jika kamu ingin membuat breadcrumbs secara manual menggunakan kode PHP, kamu bisa menyisipkan kode berikut di dalam file template theme WordPress kamu, biasanya dalam file header.php atau single.php:
<?php if ( function_exists( ‘yoast_breadcrumb’ ) ) {
yoast_breadcrumb( '<div id="breadcrumbs">','</div>' );
} ?>
Kode di atas menggunakan fungsi yoast_breadcrumb() dari plugin Yoast SEO untuk menampilkan breadcrumbs di dalam elemen div dengan id “breadcrumbs”. Kamu bisa mengganti kode ini dengan kode dari plugin breadcrumbs atau tema yang kamu gunakan.
🟡 Menggunakan kode CSS
Setelah Akamu membuat breadcrumbs melalui plugin atau kode PHP, kamu bisa mengatur tampilan breadcrumbs menggunakan kode CSS. Kamu bsia menambahkan kode CSS yang sesuai ke dalam file style.css atau menggunakan fitur kustom CSS yang disediakan oleh tema WordPress.
Disana kamu bisa mengatur tampilan breadcrumbs, seperti warna, ukuran font, margin, dan padding, sesuai dengan desain visual situs web yang kamu inginkan.
Pastikan untuk memeriksa dokumentasi dari plugin atau tema yang kamu gunakan untuk mendapatkan panduan yang lebih rinci tentang cara membuat breadcrumbs di WordPress dan mengatur tampilannya. Selain itu, pastikan untuk menguji breadcrumbs yang telah kamu buat untuk memastikan mereka berfungsi dengan baik dan memberikan panduan yang jelas bagi pengguna dalam navigasi situs web kamu.
Cara Mengoptimalkan Breadcrumbs Untuk SEO
Breadcrumbs adalah elemen desain web yang membantu pengguna dalam navigasi situs web dan memberikan struktur hierarkis untuk halaman-halaman dalam situs web. Breadcrumbs juga dapat memberikan manfaat SEO (Search Engine Optimization) dengan memberikan petunjuk yang jelas tentang struktur situs web kepada mesin pencari.
Berikut adalah beberapa cara untuk memeriksa dan mengoptimalkan breadcrumbs untuk SEO:
✅ Periksa Markup Schema
Breadcrumbs yang diimplementasikan dengan baik dan benar, bisa menggunakan markup schema yang relevan, seperti schema.org/Breadcrumb. Hal itu dilakukan untuk memberikan informasi terstruktur kepada mesin pencari tentang struktur hierarkis situs web kamu. Kamu dapat memeriksa kode HTML situs web kamu untuk memastikan bahwa markup schema Breadcrumb telah diterapkan dengan benar.
✅ Periksa Keberlanjutan Hierarki
Pastikan breadcrumbs yang ditampilkan di setiap halaman situs web bisa konsisten dengan hierarki struktur situs web kamu. Breadcrumbs tersebut harus memberikan jalur navigasi yang jelas dan konsisten untuk pengguna dan mesin pencari.
✅ Gunakan Teks Yang Deskriptif
Breadcrumbs harus menggunakan teks yang deskriptif untuk setiap level dalam hierarki, sehingga pengguna dan mesin pencari dapat memahami konteks halaman yang sedang mereka akses. Hindari menggunakan teks yang generik atau ambigu dalam breadcrumbs, dan pastikan teks yang digunakan relevan dengan isi halaman yang terkait.
✅ Periksa Tautan Yang Valid
Pastikan tautan yang digunakan dalam breadcrumbs berfungsi dengan benar dan mengarahkan pengguna ke halaman yang sesuai dengan situs web kamu. Tautan yang tidak valid atau rusak dalam breadcrumbs dapat mengganggu pengalaman pengguna dan SEO situs web kamu.
✅ Uji Responsif
Kamu harus bisa pastikan breadcrumbs yang ditampilkan di situs web kamu untuk responsif dan terlihat dengan baik pada berbagai perangkat, termasuk desktop, tablet, dan ponsel. Breadcrumbs yang responsif akan membantu pengguna dalam navigasi situs web dari berbagai perangkat, dan meningkatkan pengalaman pengguna dan SEO.
✅ Analisis Performa
Anda dapat menggunakan alat analisis web, seperti Google Analytics, untuk melihat bagaimana pengguna berinteraksi dengan breadcrumbs di situs web. Kamu bisa melihat metrik seperti jumlah klik pada breadcrumbs, rasio konversi, dan tingkat keluar untuk memahami bagaimana breadcrumbs mempengaruhi pengalaman pengguna dan perilaku pengunjung di situs web kamu.
Dengan memeriksa dan mengoptimalkan breadcrumbs untuk SEO, tentunya akan sangat membantu meningkatkan navigasi pengguna, memberikan petunjuk yang jelas tentang struktur hierarkis situs web kamu kepada mesin pencari, dan meningkatkan pengalaman pengguna serta performa SEO situs web kamu.
Baiklah, mungkin itu saja yang bisa kami share pada kesempatan kali ini tentang Apa itu Breadcrumbs. Semoga bisa bermanfaat untuk semuanya ya!
Apabila ada hal yang ingin kamu tanyakan, silahkan bisa bertanya melalui kolom komentar dibawah ini. Terima kasih
