Apa Itu Breadcrumbs? Pengertian, Jenis, Hingga Bagaimana Cara Membuatnya

0
2051

Dalam website, terdapat suatu istilah yang disebut sebagai breadcrumbs. Memang istilah ini cukup ambigu karena apabila kita translasi akan diartikan sebagai remahan roti yang sama sekali tidak terbayangkan hubungannya dengan website

apa itu breadcrumbs

Istilah breadcrumbs awalnya mengambil filosofi dari kisah Hansel dan Gretel, salah satu hal yang diingat pada cerita tersebut adalah ketika Hansel dan Gretel menggunakan remah roti atau “breadcrumbs” untuk menjadi petunjuk jalan pulang. Filosofi tersebut yang diambil dimana breadcrumbs memiliki peran untuk membantu navigasi pada link website.

Ingin mengetahui lebih mengenai apa itu breadcrumbs? Apa manfaatnya dan kaitannya dengan SEO? Jenis-jenis apa saja yang ada? Hingga bagaimana cara membuat breadcrumbs? Simak artikel ini untuk mengetahui hal tersebut.

Apa Itu Breadcrumbs?

Breadcrumbs merupakan navigasi kecil pada halaman website yang berguna untuk membantu user maupun Google dalam mengetahui struktur website anda. Breadcrumbs berbentuk seperti teks kecil berisikan link halaman website, umumnya breadcrumbs dapat ditemukan pada bagian atas website atau tepat di bawah bagian navigasi.

Berikut merupakan contoh letak breadcrumbs pada website .Best Buy.

Letak Breadcrumbs pada Website

Breadcrumbs dapat diibaratkan seperti sebuah peta yang dipampang pada tempat-tempat umum seperti hal nya mall dan kebun binatang. Ketika anda tersesat, anda akan segera mengunjungi tempat map untuk mengetahui dimana anda. Breadcrumbs pun serupa, breadcrumbs membantu anda mengetahui keberadaan di website.

Hal tersebut menjadikan breadcrumbs sebagai hal yang sangat berguna, adapun breadcrumbs merupakan hal yang penting pula untuk SEO. Selanjutnya merupakan penjelasan lebih mendalam mengenai manfaat dari breadcrumbs.

Manfaat Breadcrumbs

Mengoptimasi SEO Website

Breadcrumbs menjadi keuntungan dalam hal mendapatkan rangking pada search engine, hal ini dikarenakan Google memiliki kecenderungan untuk mengutamakan website yang memiliki breadcrumbs. Breadcrumbs berperan dimana breadcrumbs akan memberitahu pada Google bagaimana struktur website anda.

Elemen ini nantinya akan membantu bot search engine pada saat crawling dan indexing. Bot akan memanfaatkan breadcrumbs untuk mengumpulkan informasi mengenai website anda. Google juga akan menampilkan struktur breadcrumbs pada hasil pencarian guna mengkategorikan informasi pada halaman website tersebut.

Meningkatkan User Experience

Breadcrumbs membantu user untuk menavigasi website anda, ini berarti user akan jadi sangat terbantu ketika menjelajahi website. Terutama bagi user yang baru pertama kali mengunjungi website, website yang tidak terorganisir dengan baik ditambah tidak memiliki breadcrumbs akan menyebabkan kebingungan dan menyebabkan mereka ingin keluar.

Adanya breadcrumbs akan mempermudah user baru dan membuat mereka ingin terus menjelajahi website anda.

Meminimalisir Bounce Rate

Bounce rate merupakan persentase pengunjung yang datang ke website anda, kemudian meninggalkan website tanpa membuka halaman lain maupun melakukan interaksi lainnya. Breadcrumbs memiliki peran untuk membantu navigasi yang kemudian dapat meningkatkan user experience dari pengunjung.

Adanya breadcrumbs yang mempermudah proses menjelajahi website akan menurunkan kecenderungan user untuk meninggalkan website.

Jenis-jenis Breadcrumbs

Breadcrumbs memiliki banyak sekali jenis, namun terdapat 3 jenis yang paling utama untuk diketahui, adapun 3 jenis breadcrumbs tersebut sebagai berikut:

Hierarchy-based Breadcrumbs

Jenis breadcrumbs dengan navigasi yang memberi tahu anda berada dalam suatu struktur website serta memberi tahu alur untuk kembali ke halaman sebelumnya. Breadcrumbs ini merupakan breadcrumbs yang paling umum digunakan. Berikut contoh dari hierarchy-based breadcrumbs:

Home > Hosting > WordPress Hosting

Attribute-based Breadcrumbs

Jenis breadcrumbs yang bersifat dinamis dimana breadcrumbs yang disediakan berdasarkan halaman yang telah diklik oleh anda. Jenis breadcrumbs ini umumnya dapat ditemukan pada website-website e-commerce.

Home > Domain > Domain.ID > Domain.ASIA > Domain Premium

History-based Breadcrumbs

Jenis breadcrumbs yang akan menunjukkan jejak sesuai dengan apa yang telah anda lakukan pada saat menjelajahi website. Breadcrumbs ini dapat di klik sehingga anda dapat kembali ke halaman tempat anda berada sebelumnya.

Home > Hosting > Design > Design Logo > Domain

Cara Membuat Breadcrumbs

Melalui pembahasan di atas anda telah memahami mengenai dasar-dasar breadcrumbs, mulai dari pengertian, manfaat dan pentingnya ada breadcrumbs, serta jenis-jenis breadcrumbs yang ada. Hal selanjutnya yang perlu anda ketahui adalah bagaimana cara membuat breadcrumbs

Membuat breadcrumbs cenderung tidak sulit, hanya saja anda perlu untuk menginstal beberapa software tertentu. Berikut merupakan beberapa software yang dimaksud dan bagaimana cara anda membuat breadcrumbs:

Menggunakan Yoast SEO

Logo Plugin Yoast SEO

Yoast SEO merupakan salah satu plugin SEO pada WordPress. Plugin ini memiliki berbagai fitur SEO yang dapat anda manfaatkan, salah satunya untuk breadcrumbs. Selanjutnya, berikut merupakan langkah-langkah cara membuat breadcrumbs menggunakan software ini:

  • Masuk ke script template website.
  • Pilih salah satu menu diantara single.php, page.php, atau header.php yang ada pada template.
  • Selanjutnya, masukkan script sebagai berikut:

<?php

if (function_exists(‘yoast_breadcrumb’)){

yoast_breadcrumbs(‘<p id=”breadcrumbs”>’,’</p>’);

}

?>

  • Setelah menuliskan script, lakukan save atau update, pada template.
  • Kemudian, masuk ke website WordPress anda dan lakukan login.
  • Scroll kebawah dan pilih menu “SEO”, lalu pilih “Search Appearance”, dan pilih menu “Breadcrumbs”.
  • Terakhir, pilihlah menu “Enabled”.

Menggunakan Plugin NavXT

Logo NavXT

Plugin NavXT merupakan salah satu software yang cenderung mudah untuk dipelajari, plugin ini juga tidak memungut biaya untuk penggunaannya. Sebelum anda menggunakan plugin NavXT, anda perlu terlebih dahulu melakukan backup website anda terlebih dahulu. Adapun cara membuat breadcrumbs menggunakan software ini yaitu:

  • Mula-mula masuk menu plugin WordPress dan pilih add new.
  • Kemudian, cara dan install breadcrumbs NavXT dan lakukan activate.
  • Selanjutnya, masuk kebagian editor template WordPress dan pilih menu “Appearance” lalu pilih “Theme Editor”.
  • Langkah selanjutnya silahkan anda cara pada theme header (header.php) dan masukkan script berikut:

<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>

<?php

if(function_exists(‘bcn_display’))

{

bcn_display();

}?>

</div>

  • Kemudian, lakukan save.
  • Masuk ke menu plugin kemudian breadcrumbs, lalu NavXT, setting.
  • Terakhir, lakukan kustomisasi sesuai dengan kebutuhan website anda.

Menggunakan Themes WordPress yang Dapat Support Breadcrumbs

Cara terakhir ini berbeda dengan 2 cara yang dilakukan sebelumnya, cara ini cenderung lebih sederhana untuk dilakukan. Hal yang perlu anda lakukan tinggal mencari themes yang telah support fitur breadcrumbs. Umumnya, template seperti untuk kebutuhan toko online dan blog magazine sudah memiliki fitur standar navigasi breadcrumbs.

Adapun beberapa contoh template WordPress yang sudah support breadcrumbs yaitu: Pixwell, Goodlife, Motive, Urban Mag, Gloria, SmartMag, dan sebagainya.

Sekarang, anda telah mengetahui beberapa cara untuk membuat breadcrumbs, silahkan anda tentukan cara mana yang menurut anda paling mudah dan sesuai dengan kemampuan anda.

Kesalahan yang Umum Terjadi Saat Menggunakan Breadcrumbs

Sekarang anda telah mengetahui pentingnya breadcrumbs serta cara untuk menggunakannya pada website miliki anda. Namun, bukan berarti anda bisa asal menggunakan breadcrumbs, terdapat beberapa kesalahan umum yang dilakukan seseorang ketika menggunakan breadcrumbs, adapun kesalahan-kesalahan tersebut meliputi:

Menggunakan Breadcrumbs Ketika Tidak Dibutuhkan

Kesalahan umum yang terjadi saat menggunakan breadcrumbs adalah ketika breadcrumbs digunakan tanpa ada manfaatnya. Berikut merupakan contoh mengenai hal yang dimaksudkan:

Contoh Kesalahan Menggunakan Breadcrumbs

Pada contoh diatas, website membuat bingung penggunanya dengan terlalu banyak memberikan opsi navigasi. Pada contoh terdapat 3 opsi navigasi yaitu navigasi utama, breadcrumbs, dan navigasi sekunder. Kemudian, terdapat pula kesalahan dimana letak antara opsi navigasi berdekatan sehingga membuat bingung pengguna untuk memilih menggunakan navigasi mana.

Contoh tersebut menunjukkan kebalikan dari fungsi breadcrumbs yang seharusnya, dimana seharusnya breadcrumbs mempermudah pengguna dalam menjelajahi website bukan mempersulitnya.

Menggunakan Breadcrumbs Sebagai Navigasi Utama

Breadcrumbs berfungsi untuk membantu anda menjelajahi suatu website. Namun, akan menjadi sulit apabila website hanya mengandalkan breadcrumbs sebagai alat navigasi utama. Optimalnya, breadcrumbs tidak dijadikan alat navigasi utama dan hanya sebagian bantuan navigasi.

Ketika tidak terdapat navigasi utama atau suatu menu di badan halaman, perpindahan dari halaman satu ke halaman lainnya akan menjadi lebih rumit. Misalnya anda menjadi harus menekan tombol kembali pada browser ketika mengakses menu utama, karena breadcrumbs satu-satunya alat navigasi yang dapat digunakan.

Menggunakan Breadcrumbs Saat Halaman Memiliki Banyak Kategori

Breadcrumbs memiliki struktur linier sehingga saat anda menggunakannya akan sulit apabila halaman anda tidak dapat diklasifikasikan ke dalam kategori yang rapi. Menggunakan breadcrumbs sangat bergantung pada seperti apa desain hierarki website anda. 

Apabila halaman dengan tingkat yang lebih rendah (atau dapat ditempatkan) pada lebih dari satu kategori induk, breadcrumbs akan cenderung tidak efektif, tidak akurat, dan membingungkan penggunanya.

Nah, dengan ini telah terjawab pertanyaan apa itu breadcrumbs? Hal yang tersisa untuk anda lakukan sekarang adalah menggunakan ilmu yang telah didapat untuk diterapkan pada website yang anda miliki. 

Untuk terus memperdalam pengetahuan anda tentang website serta SEO, Exabytes telah mempersiapkan berbagai artikel yang berkaitan dengan topik terkait. Selain itu, Exabytes juga menawarkan layanan hosting WordPress Indonesia dan web hosting Indonesia. Menggunakan layanan kami untuk pengelolaan website yang lebih optimal.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments