Breadcrumbs Website: Pengertian, Fungsi, Jenis, Cara Membuat, dan Manfaatnya

Table of Contents

Breadcrumbs Website

Pengertian Breadcrumbs Website

Breadcrumbs website adalah elemen pada website yang berfungsi sebagai navigasi halaman. Breadcrumbs website pada umumnya akan diletakkan pada posisi atas di halaman website, berbentuk teks kecil yang berisi link halaman yang berfungsi untuk menunjukkan di mana users berada.

Selain muncul di halaman website, navigasi breadcrumbs ini juga dapat muncul di halaman hasil pencarian Google. Ketika user melakukan pencarian di Google maka users dapat melihat gambaran umum mengenai posisi atau struktur halaman website yang ditampilkan.

Baca Juga: SERP (Search Engine Result Page): Pengertian, Fungsi, dan Fiturnya

Istilah breadcrumbs diambil dari kisah Hansel and Gretel yang pergi ke hutan kemudian meninggalkan jejak remah roti (breadcrumbs) ke tanah agar tidak tersesat dan dapat menemukan jalan pulang. Istilah tersebut kemudian digunakan sebagai model navigasi website.

Halnya fungsi remahan roti pada kisah di atas, breadcrumbs website juga dapat membantu  users dalam memahami dan menjelajahi situs secara efektif. Dari breadcrumbs tersebut, users bisa kembali ke halaman-halaman web sebelumnya dengan cara mengklik masing-masing link teks.

Selain itu, breadcrumbs juga dapat membantu Google untuk memahami struktur sebuah website. Dengannya breadcrumbs memiliki peran penting dalam SEO.

Fungsi Breadcrumbs Website

Breadcrumbs website memiliki fungsi sebagai alat navigasi pada website untuk memudahkan pengunjung setelah menu utama pada header website. Pengunjung tidak perlu membuka halaman dari awal, cukup dengan membuka struktur breadcrumbs sebelumnya saja.

Contohlah website memiliki struktur breadcrumbs Home > Teknologi > Cara Membuat Website, untuk kembali ke kategori Teknologi, Anda tidak perlu kembali ke Home website, cukup dengan mengklik breadcrumbs Teknologi.

Jenis Breadcrumbs Website

1. Breadcrumbs Berbasis Hierarki
Breadcrumbs berbasis hierarki merupakan breadcrumbs yang paling umum digunakan. Elemen ini akan memberitahu Anda di mana Anda berada di dalam struktur website. Contoh breadcrumbs berbasis hierarki: Beranda> Blog> Kategori Artikel> Judul Artikel

2. Breadcrumb Berbasis Atribut  
Breadcrumbs ini biasanya digunakan di situs e-commerce untuk menunjukkan atribut apa yang telah diklik pengguna. Contoh breadcrumb berbasis atribut: Beranda> Kategori produk> Jenis Kelamin> Ukuran> Warna

3. Breadcrumbs Berbasis Sejarah
Breadcrumbs ini akan menunjukkan kepada pengguna halaman apa yang telah mereka kunjungi. Contoh breadcrumbs berbasis sejarah: Beranda> Artikel 1> Artikel 2> Halaman saat ini.

Cara Membuat Breadcrumbs Website

Berikut 3 cara membuat breadcrumbs untuk website WordPress, silahkan Anda pilih mana kira-kira yang paling mudah untuk diterapkan pada website.
1. Install themes WordPress yang support breadcrumbs
Cara pertama ini paling mudah dan cepat, Anda tinggal mencari themes WordPress yang sudah support fitur breadcrumbs. Biasanya template untuk kebutuhan toko online dan blog magazine memiliki fitur standar navigasi breadcrumbs.

2. Install Yoast SEO
Yoast SEO adalah plugin SEO WordPress. Banyak fitur-fitur SEO yang dimiliki dan dapat dimaksimalkan untuk optimasi website salah satunya breadcrumbs. Untuk memulai memasang breadcrumbs pada website WordPress, pastikan Anda sudah menginstall plugin Yoast SEO.

Jika sudah berhasil silahkan ikuti cara membuat breadcrumbs berikut ini.
a. Silahkan masuk ke script template website Anda, kemudian pilih pada salah satu menu single.php, page.php atau header.php yang terdapat pada template.
b. Silahkan masukan script dibawah ini
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>

c. Jika sudah jangan lupa untuk save atau update template
d. Selanjutnya silahkan masuk pada website WordPress Anda dan login.
e. Scroll kebawah dan pilih menu “SEO” kemudian pilih “Search Appearance” dan pilih menu “Breadcrumbs”.
f. Silahkan pilih menu “Enabled”.

3. Install Breadcrumbs NavXT
Terakhir, cara memasang breadcrumbs bisa menggunakan plugin Breadcrumbs NavXT. Jika Anda belum install silahkan ikuti tutorialnya berikut:
a. Silahkan masuk pada menu plugin WordPress, kemudian pilih Add New dan tuliskan pada search box “Breadcrumbs”, kira-kira hasilnya seperti berikut ini.
b. Setelah muncul beberapa pilihan, silahkan pilih plugin “Breadcrumbs NavXT” kemudian “Install Now” dan “Activate”.
c. Silahkan Anda masuk ke bagian editor template WordPress Anda, pilih pada menu “Appearance” kemudian pilih “Theme Editor”.
d. Silahkan Anda cari pada Theme Header (header.php) dan masukan script berikut
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
Jika sudah jangan lupa save.

e. Setelah itu silahkan masuk pada menu Plugin > Breadcrumbs NavXT > Setting
f. Silahkan Anda kustomisasi sendiri “Post Types”,“Taxonomies” sesuai dengan kebutuhan website Anda.

Manfaat Menggunakan Breadcrumbs website

Penggunaan breadcrumbs dalam website akan memberi beberapa keuntungan untuk SEO di antaranya,
1. Google menyukai website yang menggunakan breadcrumbs
Breadcrumbs akan memberitahu Google bagaimana struktur website Anda. Elemen ini akan membantu bot mesin pencari selama fase crawling dan indexing. Bot akan menggunakan struktur breadcrumbs untuk mengumpulkan lebih banyak informasi tentang situs web Anda.

Baca Juga: Web Crawler: Pengertian, Cara Kerja, Jenis, dan Contohnya

Selain itu, Google juga akan menampilkan struktur breadcrumbs di dalam hasil pencarian untuk mengkategorikan informasi dari halaman tersebut di hasil penelusuran. Dengan breadcrumbs tersebut pengguna dapat memahami di mana halaman itu berada di dalam situs web Anda.

Breadcrumbs memberi kemudahan pada Google dan pengguna sehingga akan berpengaruh positif pada peringkat website Anda.

2. Meningkatkan pengalaman pengguna
Breadcrumbs dapat meningkatkan pengalaman pengguna karena dapat memudahkan pengunjung web ketika menjelajah isi website. Ketika pengguna mengunjungi sebuah situs web untuk pertama kali, tentu mereka belum mengetahui struktur dan tata letak konten yang mereka cari.

Dengan adanya breadcrumbs, pengguna dapat lebih mudah untuk menavigasi situs web. Breadcrumbs juga akan mendorong pengguna untuk menjelajahi halaman lain dari situs web tersebut.

3. Mengurangi bounce rate (rasio pantul)
Bounce adalah saat pengguna memasuki situs web Anda di halaman tertentu, kemudian keluar dari halaman tersebut tanpa melakukan tindakan lain. Meskipun bounce rate tidak secara langsung mempengaruhi peringkat halaman Anda, namun rasio pantul yang tinggi menjadi indikasi bahwa terdapat masalah pada pengalaman pengguna.

Dengan menyediakan breadcrumbs, Anda dapat membuat pengunjung web terdorong untuk membuka halaman lain.

Dari berbagai sumber

Download