Dalam dunia web design, breadcrumbs adalah elemen navigasi yang penting dan sering berguna dalam mengoptimalkan Search Engine Optimization (SEO). Terlepas dari terjemahannya yang berarti “remahan roti”, fungsi utama breadcrumb adalah memberikan petunjuk visual kepada pengunjung mengenai posisi mereka dalam struktur website.
Apabila Anda baru saja mulai menekuni bidang pembuatan website, jangan khawatir! Karena artikel ini akan menjelaskan kegunaan, manfaat, dan cara membuat breadcrumb yang tepat di WordPress.
Apa Itu Breadcrumbs?
Breadcrumbs adalah serangkaian text internal link yang berperan sebagai petunjuk visual terkait posisi pengunjung dalam struktur website. Melalui breadcrumb, pengunjung dapat melihat jalur navigasi website dari halaman awal ke halaman saat ini.
Pengunjung juga dapat dengan mudah kembali ke halaman website sebelumnya atau melompat ke tingkat halaman website yang lebih tinggi. Meskipun begitu, ada sejumlah website yang tidak menggunakan breadcrumb.
Website-website yang tidak mengatur penggunaan breadcrumb biasanya memberi solusi navigasi berupa menu utama dan submenu yang diletakkan di bagian header halaman website.
Fungsi Breadcrumb pada Website
Seperti yang telah kami sebutkan di awal artikel, breadcrumb menjadi salah satu elemen dalam website yang penting dalam meningkatkan navigasi dan pengalaman pengunjung. Selain itu, fungsi lain dari breadcrumb adalah:
- Membantu pengunjung dalam mengetahui posisinya saat ini dalam hierarki website.
- Memudahkan pengunjung ketika ingin kembali ke halaman sebelumnya, tanpa harus mengandalkan tombol “back” pada browser.
- Membuat pengunjung dapat menjelajahi website atau menemukan informasi yang mereka butuhkan dengan cepat dan efisien.
- Memberikan struktur link yang jelas dan relevan di website.
Contoh Breadcrumbs
Supaya Anda lebih paham penerapan breadcrumb pada website, di bawah ini adalah contoh breadcrumbs sederhana dari salah satu konten yang ada di blog Makinrajin.
Dalam contoh di atas, “Home” adalah link yang mengarah ke halaman utama website Makinrajin. Kemudian, “Blog” adalah link yang mengarah ke halaman kategori Blog, dan “20 Strategi Instagram Marketing yang Efektif Tingkatkan Engagement” adalah halaman website yang sedang dilihat oleh pengunjung.
Perlu Anda perhatikan, bahwa sejatinya panjang breadcrumb sangat bergantung pada struktur konten yang ada di sebuah website. Jika Anda memiliki struktur website yang sederhana seperti website blog, maka breadcrumb akan cenderung singkat dan pendek.
Sedangkan, jika Anda memiliki struktur website yang kompleks, seperti website toko online, maka breadcrumb akan panjang. Karena biasanya website toko online memiliki berbagai jenis produk yang dikelompokkan ke dalam kategori tertentu.
Mengapa Perlu Menggunakan Breadcrumbs pada Website?
Pada dasarnya, breadcrumbs adalah bagian website yang paling “disukai” atau diutamakan oleh bot mesin pencari. Oleh karena itu, penggunaan breadcrumb pada website berperan penting dalam:
- Meningkatkan pengalaman pengunjung (user experience) dalam menjelajahi website.
- Meningkatkan kualitas SEO website, karena mesin pencari dapat memahami hierarki konten dan melakukan crawling maupun indexing pada halaman-halaman website dengan lebih baik.
- Mengoptimasi hasil pencarian website di mesin pencari, agar lebih relevan.
- Mempengaruhi ranking website, agar tampil di halaman pertama mesin pencari, lantaran mesin pencari memahami struktur atau hierarki website.
- Mengurangi bounce rate, yang mana merupakan persentase pengunjung yang meninggalkan sebuah halaman website tanpa melakukan interaksi lebih lanjut dengan website tersebut.
Baca juga: Apa Itu SEO? Pengertian, Manfaat, Jenis, dan Cara Kerjanya
Tips Menggunakan Breadcrumbs
Setelah memahami peran penting dan fungsi breadcrumb pada website, bukan berarti Anda bisa membuat atau menggunakan breadcrumb secara sembarangan. Berikut ini adalah beberapa tips yang dapat membantu Anda dalam penggunaan breadcrumbs di website Anda:
- Pastikan tampilan navigasi breadcrumb sesuai dengan sitemap atau hierarki website.
- Buat ukuran breadcrumbs lebih kecil ketimbang ukuran navigasi menu utama serta format yang sederhana dan konsisten di seluruh halaman website.
- Mulailah navigasi breadcrumbs dari halaman utama (misalnya halaman Beranda) dan diakhiri dengan halaman yang sedang dibuka oleh pengunjung.
- Pastikan navigasi breadcrumbs bersifat responsif (menyesuaikan ukuran layar perangkat yang pengguna pakai) di bagian atas halaman atau di bawah judul halaman.
- Beri jarak antar link breadcrumbs dengan separator, misalnya ikon tanda panah (→), garis miring (/), atau karakter lainnya (> atau >>).
- Buat breadcrumbs sesuai dengan kata kunci yang Anda gunakan pada judul halaman, agar SEO website Anda lebih maksimal.
Cara Membuat Breadcrumb di WordPress
Nah, dari tips di atas, muncul sebuah pertanyaan “bagaimana cara membuat breadcrumb di website, khususnya website berbasis WordPress?”. Simak tahapan-tahapan selengkapnya di bawah ini:
1. Gunakan Tema WordPress yang Kompatibel
Salah satu keuntungan menggunakan WordPress adalah tersedianya banyak tema bawaan yang sudah support pengaturan fitur breadcrumbs. Oleh karena itu, pilihlah dan gunakan tema WordPress yang kompatibel dengan kebutuhan penggunaan breadcrumbs.
Umumnya, tema WordPress untuk toko online dan blog memiliki fitur pengaturan breadcrumbs tersendiri. Contohnya tema Shopkeeper, Flat Some, Smart Mag, Knowledge Base, Pixwell, Gloria, GoodLife, Motive, dan lain-lain.
2. Install dan Aktifkan Plugin Yoast SEO
Kemudian, Anda bisa menginstal dan mengaktifkan plugin breadcrumbs. Ada beberapa plugin breadcrumbs populer yang dapat Anda pilih, seperti Yoast SEO.
Yoast SEO adalah plugin WordPress yang berguna untuk meningkatkan visibilitas dan ranking website dalam hasil pencarian melalui optimisasi mesin pencari (SEO). Baik itu secara technical SEO atau on-page SEO yang berfokus pada pembuatan konten website.
Adapun cara instal dan aktivasi plugin Yoast SEO adalah sebagai berikut:
- Masuk ke Dashboard pada halaman akun WordPress.
- Pilih menu Plugins, lalu klik submenu Tambah Baru.
- Cari plugin Yoast SEO dengan mengetikkan kata “Yoast SEO” di kolom pencarian.
- Kemudian, klik tombol “Download” dan “Install”. Tunggulah proses penginstalan selesai selama beberapa menit.
- Setelah proses penginstalan selesai, lakukan aktivasi dengan klik tombol “Aktifkan” yang ada di samping kanan nama plugin.
3. Setting Menu Yoast SEO
Cara selanjutnya dalam membuat breadcrumb di WordPress adalah dengan mengkonfigurasi pengaturan menu Yoast SEO sesuai dengan kebutuhan penggunaan breadcrumbs website. Berikut ini pengaturan-pengaturan yang dapat Anda lakukan:
- Aktifkan sejumlah fitur SEO dengan cara klik menu Yoast SEO > submenu Setting.
- Pilih menu Breadcrumbs.
- Aktifkan fitur “Enable breadcrumbs for your theme”.
- Fitur navigasi breadcrumbs pada Yoast SEO sudah terpasang di setiap halaman website.
4. Pasang Kode pada Single.php
Terakhir, Anda juga perlu menambahkan beberapa baris kode untuk konfigurasi breadcrumbs lanjutan pada Yoast SEO. Tambahkan barisan kode berikut pada file single.php:
<?php
if (function_exists(‘yoast_breadcrumb’)) {
yoast_breadcrumb(‘<p id=”breadcrumbs”>’,'</p>’);
}
?>Biasanya, file single.php bisa Anda temukan di menu Appearance > Theme File Editor. Peletakkan kode tersebut akan berbeda, tergantung jenis tema WordPress yang Anda pilih. Jadi, Anda perlu mempelajari pengaturan dasar dari tema WordPress yang Anda gunakan terlebih dahulu.
Apabila sudah memasukkan kode di atas, klik tombol “Simpan” atau “Update Template”. Kemudian, buka menu SEO > Search Appearance > tab Breadcrumbs. Lalu, klik tombol “Enable” untuk mengaktifkan breadcrumbs.
Sudah Paham Apa Itu Breadcrumbs?
Itulah informasi penting yang perlu Anda ketahui tentang breadcrumbs. Walaupun keberadaannya tampak sepele, breadcrumbs adalah elemen navigasi yang penting dalam membantu pengunjung dapat menjelajahi website dengan lebih mudah. Serta meningkatkan kualitas SEO dan visibilitas website di mesin pencarian.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development