Breadcrumbs adalah elemen navigasi penting pada website yang berfungsi sebagai penunjuk jalur. Elemen ini membantu pengguna memahami lokasi mereka pada sebuah situs dan menawarkan navigasi alternatif yang lebih efisien.
Breadcrumbs memainkan peran penting dalam meningkatkan user experience serta memudahkan pengunjung menemukan informasi. Pengguna dapat dengan cepat mengetahui dan mengakses halaman-halaman penting lainnya tanpa kesulitan.
Artikel ini akan menjelaskan apa itu breadcrumbs secara mendalam, kegunaannya, serta panduan dalam membuatnya. Selamat membaca!
Apa Itu Breadcrumbs?
Breadcrumbs adalah salah satu komponen navigasi website yang biasanya ditempatkan di atas atau di bawah judul halaman. Sesuai namanya, “breadcrumbs” berarti remahan roti, yang dapat diartikan sebagai jejak dari mana awal mula pengunjung menjelajahi website.
Sebagai contoh, breadcrumbs milik Dewaweb di bawah ini menunjukkan bahwa artikel “Strategi Social Media Marketing” berada di dalam sub kategori Social Media Marketing yang mana berada di dalam kategori Digital Marketing. Jadi, breadcrumbs ditulis menjadi “Blog>Digital Marketing>Social Media Marketing>Strategi Social Media Marketing”.
Melalui menggunakan breadcrumbs, pengguna dapat melihat alur struktur hierarki halaman situs yang sedang diakses. Hal ini memberikan referensi yang jelas mengenai posisi halaman tersebut dalam keseluruhan struktur website.
Fungsi Breadcrumbs
Seperti yang sudah dijelaskan sebelumnya, breadcrumbs memiliki berbagai macam fungsi. Salah satu fungsinya untuk menunjukkan navigasi dalam suatu website. Namun tidak hanya itu, ada berbagai macam fungsi breadcrumbs yang dapat dirasakan. Ingin tahu apa saja fungsi-fungsi breadcrumbs? Berikut informasinya.
Salah satu fungsi utama dari breadcrumbs yakni sebagai navigasi kedua di dalam website, selain dari menu utama. Dengan adanya breadcrumbs, para pengunjung bisa dengan mudah dalam mengakses konten dan halaman dari suatu website. Secara tidak langsung, hal ini juga bisa membuat pengunjung tidak perlu lagi kembali ke halaman awal untuk menemukan topik yang sama pada suatu website.
2. Meningkatkan user experience
Fungsi lain dari breadcrumbs yakni dapat membantu meningkatkan user experience. Sebagaimana yang sudah dijelaskan sebelumnya, breadcrumbs membantu para pengunjung untuk mengakses halaman website dari navigasi yang sudah diakses sebelumnya.
Dengan begitu, hal ini bisa meningkatkan pengalaman para pengunjung yang tidak lagi kebingungan, sehingga mereka ingin kembali datang untuk mengakses halaman website milik kamu.
3. Mengoptimasi SEO website
Breadcrumbs ternyata memiliki fungsi lain untuk mengoptimasi suatu hasil pencarian. Sebagai informasi, Google akan mengutamakan situs-situs yang memiliki breadcrumbs baik untuk meningkatkan peringkat di mesin pencarian.
4. Meminimalisir bounce rate
Suatu website dengan breadcrumbs yang baik, mudah, dan tidak membingungkan dapat menurunkan kemungkinan pengguna untuk kembali ke halaman Google. Dengan begitu, bounce rate dalam website kamu berangsur-angsur menurun.
Sebagai informasi, bounce rate adalah persentase pengunjung yang datang ke website kamu, lalu meninggalkannya begitu saja tanpa membuka halaman lain maupun berinteraksi di dalamnya.
5. Mengoptimasi hasil pencarian
Seperti yang sudah disebutkan, adanya breadcrumbs dapat mengoptimasi SEO website. Tak hanya itu, ternyata breadcrumbs juga berlaku untuk mengoptimasi hasil pencarian. Hal ini karena breadcrumbs dapat mempercantik struktur suatu website dan membantu Google untuk menampilkan pencarian yang relevan.
Baca juga: Kriteria Desain Web yang SEO Friendly
Jenis-Jenis Breadcrumbs
Ada berbagai macam jenis-jenis breadcrumbs yang dapat ditemui, mulai dari breadcrumbs berbasis hierarki, berbasis atribut, hingga berbasis sejarah. Ketiga jenis breadcrumbs tersebut memiliki pengertiannya masing-masing.
1. Hierarchy-based
Breadcrumbs berbasis hierarki adalah navigasi yang memberikan informasi kepada users di mana mereka berada di dalam struktur website, serta menginformasikan alur tersebut untuk kembali ke beranda. Supaya lebih jelas, berikut contoh dari jenis breadcrumbs hierarchy-based.
2. Attribute-based
Selanjutnya adalah breadcrumbs yang berbasis attribute. Artinya, breadcrumbs jenis ini memberikan navigasi dinamis yang disediakan berdasarkan halaman yang sudah dipilih oleh user, biasanya terdapat pada situs e-commerce. Contoh dari breadcrumbs attribute based ini adalah:
3. History-based
Selanjutnya adalah breadcrumbs history based yang menunjukkan jejak sesuai dengan apa yang telah users lalui oleh para pengguna. Lebih lanjut, breadcrumbs ini dapat di klik, sehingga para pengguna bisa kembali ke laman tempat mereka berada sebelumnya. Berikut contoh dari breadcrumbs history based.
Baca juga: Cara Optimalkan SEO WordPress untuk Tingkatkan Ranking Website
Cara Membuat Breadcrumbs
Pengguna tidak memerlukan langkah-langkah yang sulit untuk membuat suatu breadcrumbs. Hanya saja para pengguna membutuhkan beberapa software yang harus diinstall sebelumnya, salah satu contoh adalah plugin NavXT. Supaya kamu bisa lebih memahami, berikut cara membuat breadcrumbs, yakni:
Plugin NavXT merupakan software yang mudah untuk dipelajari dan tidak memerlukan biaya apapun alias gratis. Sebelum menggunakan software ini, pastikan bahwa kamu sudah melakukan backup website terlebih dahulu.
Setelah selesai melakukan backup, kamu boleh menambahkan kode di bawah ini ke dalam file header.php pada bagian child theme, yakni:
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”> <?php if(function_exists(‘bcn_display’)) { bcn_display(); }?> </div>
Tetapi jika kamu merasa cara di atas terlalu rumit dan kamu sulit untuk memahaminya, kamu bisa langsung menambahkannya melalui Appearance > Widgets, kemudian tarik widget Breadcrumbs NavXT ke tempat yang diinginkan.
Menginstall Yoast SEO
Yoast SEO merupakan salah satu plugin SEO WordPress yang termasuk recommended karena fitur-fitur yang ada di dalamnya. Untuk mulai memasang plugin Yoast SEO ini, pastikan bahwa kamu sudah menginstalnya terlebih dahulu, lalu ikuti langkah-langkah di bawah ini.
- Masuk ke script template website.
- Pilih pada salah satu menu single.php, page.php, atau header.php yang terdapat pada template.
-
Lalu masukkan script berikut ini, yakni:
<?php if (function_exist(‘yoast_breadcrumb’)){ yoast_breadcrumbs(‘<p id=”breadcrumbs”>’,’</p>’); } ?>
- Kemudian pilih Save atau update template.
- Lalu, pilih menu SEO > Search Appearance > Breadcrumbs.
- Terakhir, pilih menu Enabled.
Baca juga: 12 Plugin SEO WordPress Terbaik untuk Tingkatkan Trafik Website
Sudah Tahu Apa Itu Breadcrumbs?
Breadcrumbs adalah alat navigasi penting yang membantu pengguna memahami dan menjelajah situs dengan lebih baik. Fungsi utama dari breadcrumbs meliputi memudahkan navigasi, meningkatkan user experience, serta mengoptimasi SEO.
Breadcrumbs juga berperan dalam meminimalisir bounce rate dan mengoptimasi hasil pencarian pada mesin pencari. Jadi, jangan lupa gunakan breadcrumbs pada website kamu, ya! Semoga artikel ini bermanfaat untukmu!
