Pengertian Breadcrumbs, Jenis, Fungsi dan Cara Membuatnya

Pengertian Breadcrumbs, Jenis, Fungsi dan Cara Membuatnya

Dalam sebuah website, adanya breadcrumbs adalah hal yang sangat dibutuhkan untuk meninggalkan jejak agar para pengguna dapat mengetahui posisinya. Secara sederhana, breadcrumbs sendiri diumpamakan sebagai sebuah navigasi yang bisa dijadikan sebagai penunjuk jalan pulang.

Filosofi tersebut diambil dari kisah yang berjudul Hansel and Gretel, dalam kisah tersebut disebutkan bahwa Hansel dan Gretel menggunakan remah roti (breadcrumbs) sebagai petunjuk jalannya untuk pulang. Tidak hanya dijadikan sebagai navigasi, breadcrumbs berperan penting dalam SEO (Search Engine Organizing).

Supaya dapat memahami lebih jelas pengertian, jenis-jenis, fungsi, dan cara membuat breadcrumbs, berikut informasinya seperti yang sudah Dewaweb rangkum untuk kamu.

Baca juga: 12 Cara Maintenance Website dengan Benar, Lengkap!

Apa Itu Breadcrumbs?

Breadcrumbs adalah navigasi yang berbentuk seperti teks kecil berisikan link halaman website. Adanya breadcrumbs bertujuan untuk menunjukkan di mana users berada di suatu website. Umumnya breadcrumbs dapat ditemui di bagian atas situs web atau tepat di bawah navigasi.

Istilah breadcrumbs ini mirip dengan filosofi dari remahan roti yang ada di dalam kisah ‘Hansel and Gretel’. Sebagaimana yang diketahui, Hansel dan Gretel menggunakan remahan roti sebagai jalannya untuk ke rumah.

Itu sebabnya, breadcrumbs memiliki fungsi untuk membantu seseorang yang sedang mengakses suatu website kembali ke halaman-halaman website sebelumnya. Cara kerjanya pun cukup mudah yakni dengan mengklik masing-masing dari link teks tersebut.

Baca juga: Apa Itu Sidebar? Cek 11 Jenis Sidebar Terbaik untuk Websitemu

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.

Alat navigasi website

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.

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.

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.

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.

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.

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.hierarchy based breadcrumbs

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:

attribute based breadcrumbs

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.

history based breadcrumbs

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:

Menggunakan Plugin NavXT

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.

  1. Masuk ke script template website.
  2. Pilih pada salah satu menu single.php, page.php, atau header.php yang terdapat pada template.
  3. Lalu masukkan script berikut ini, yakni: 
    <?php 
    
    if  (function_exist(‘yoast_breadcrumb’)){
    
    yoast_breadcrumbs(‘<p id=”breadcrumbs”>’,’</p>’);
    
    }
    
    ?>
  4. Kemudian pilih Save atau update template.
  5. Lalu, pilih menu SEO > Search Appearance > Breadcrumbs.
  6. Terakhir, pilih menu Enabled.

Baca juga: 12 Plugin SEO WordPress Terbaik untuk Tingkatkan Trafik Website

Sudah Tahu Apa Itu Breadcrumbs?

Breadcrumbs adalah navigasi yang berbentuk seperti teks kecil berisikan link halaman website. Adanya breadcrumbs bisa membantu para pengunjung agar tidak perlu repot-repot apabila ingin kembali ke halaman awal. Dalam penerapannya, terdiri dari beberapa jenis, yakni hierarchy-based, attribute-based, hingga history-based.

Selain membantu para pengunjung, breadcrumbs juga diperlukan oleh suatu website untuk mengoptimasi SEO website, mengoptimasi hasil pencarian, dan lain sebagainya. Oleh karena itu, pastikan bahwa di website kamu sudah terhubung dengan breadcrumbs, ya. Dengan begitu, para pengunjung puas dengan performa website yang dimiliki.

Tidak hanya breadcrumbs, suatu website juga memerlukan layanan hosting terbaik yang keamanannya sudah terjamin agar terhindar dari malware dan ancaman siber yang menghantui.