Qwords Editorial We have 20 years of experience in educating readers on Hosting, Website Development, Digital Marketing, and Business topics. We remain committed to providing the best educational materials.

Mengenal apa itu Breadcrumbs & Cara Membuatnya

3 min read

Breadcrumbs & Cara Membuatnya

Bagi Anda seorang pemula dalam dunia website, mungkin terdengar asing ketika mendengar istilah “Breadcrumbs”.

Jika dilihat dari artinya secara terpisah breadcrumbs artinya remahan roti, tetapi bukan itu makna sebenarnya, apalagi disini kita sedang membahas website.

Lalu apa itu breadcrumb itu?

Menurut sejarahnya dulu, istilah breadcrumbs berasal dari dongeng Hansel dan Gretel.

Dalam cerita dongeng tersebut kedua anak itu menggunakan potongan kecil roti untuk membuat penunjuk jalan pulang ke rumah.

Nah inilah yang diambil dari cerita dongeng tersebut, breadcrumbs menjadi penunjuk untuk navigasi ke halaman utama/sebelumnya.

Pada artikel kali ini kita akan membahas lengkap mengenai apa itu breadcrumbs, fungsi breadcrumbs, cara membuat breadcrumbs dan terakhir pentingnya penggunaan breadcrumbs  untuk SEO.

Berikut penjelasan lengkapnya:

Apa itu Breadcrumbs

Breadcrumbs adalah elemen pada website yang memiliki fungsi sebagai navigasi halaman.

Breadcrumbs bisa disebut sebagai navigasi sekunder dalam website, karena breadcrumbs dapat menunjukan urutan struktur halaman-halaman yang sudah dibuka oleh pengunjung website.

Breadcrumbs ini belum tentu bisa ditemukan pada setiap website, karena ada beberapa website yang tidak memiliki breadcrumbs.

Padahal jika Anda tahu breadcrumbs ini memiliki banyak fungsi penting untuk website. Agar lebih jelasnya berikut kami berikan contoh penerapan breadcrumbs pada website dan blog.

Breadcrumbs website
Breadcrumbs website

Breadcrumbs website/blog biasanya memiliki struktur yang lebih pendek.

Breadcrumbs toko online
Breadcrumbs toko online

Breadcrumbs toko online biasanya memiliki hirarki yang lebih panjang, ini dilakukan karena memang toko online memiliki banyak kategori dan produk yang banyak macamnya.

Jadi perlu diberikan navigasi yang berbeda setiap kategori produknya.

Fungsi Breadcrumbs

Breadcrumbs 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.

Nah saat sudah dibuka Anda akan masuk pada halaman sebelum Anda membuka artikel Cara Membuat Website.

Cara membuat Breadcrumbs

Pada pembahasan artikel tentang breadcrumbs ini, kami akan memberikan 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.

Themes Smartmagz
Themes Smartmagz

Berikut beberapa contoh template WordPress dari Themeforest.net yang sudah include breadcrumbs : SmartMag, Pixwell, GoodLife, Gloria, Motive, Urban Mag dan lainnya.

Jika ada rekomendasi template lain yang bagus dan breadcrumbs ready silahkan tuliskan pada kolom komentar dibawah.

2. Install Yoast SEO

Yoast SEO adalah plugin SEO WordPress terbaik paling recomended menurut kami.

Banyak fitur-fitur SEO yang dimiliki dan dapat dimaksimalkan untuk optimasi website salah satunya breadcrumbs.

Masih banyak orang yang belum tau bagaimana setting breadcrumbs pada Yoast SEO.

yoast SEO
yoast SEO

Untuk memulai memasang breadcrumbs pada website WordPress, pastikan Anda sudah menginstall plugin Yoast SEO.

Silahkan Anda buka pada artikel sebelumnya tentang “Cara Setting Yoast SEO”. Jika sudah berhasil silahkan ikuti cara membuat breadcrumbs berikut ini.

  • Silahkan masuk ke script template website Anda, kemudian pilih pada salah satu menu single.php, page.php atau header.php yang terdapat pada template.
  • Silahkan masukan script dibawah ini

<?php

if ( function_exists(‘yoast_breadcrumb’) ) {

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

}

?>

  • Jika sudah jangan lupa untuk save atau update template
  • Selanjutnya silahkan masuk pada website WordPress Anda dan login.

    SEO Yoast
    SEO Yoast

  • Scroll kebawah dan pilih menu “SEO” kemudian pilih “Search Appearance” dan pilih menu “Breadcrumbs”.
  • 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 ini:

  • Silahkan masuk pada menu plugin WordPress, kemudian pilih Add New dan tuliskan pada search box “Breadcrumbs”, kira-kira hasilnya seperti berikut ini.

    Install Breadcrumbs NavXT
    Install Breadcrumbs NavXT

  • Setelah muncul beberapa pilihan, silahkan pilih plugin “Breadcrumbs NavXT” kemudian “Install Now” dan “Activate”.
  • Silahkan Anda masuk ke bagian editor template WordPress Anda, pilih pada menu “Appearance” kemudian pilih “Theme Editor”.
  • 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.

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

Dari ketiga cara tersebut silahkan Anda pilih mana yang kira-kira paling mudah dan cepat untuk dikerjakan.

Baca juga : Panduan Belajar SEO Untuk Pemula

Breadcrumbs untuk SEO

Walaupun terlihat sepele, breadcrumbs ini menjadi salah satu nilai yang penting untuk SEO website.

Selain berfungsi menjadi menu navigasi kedua, breadcrumbs akan membantu robot Google dalam proses indexing halaman website dengan cepat dan juga breadcrumbs berfungsi menurunkan angka bounce rate pada website.

Jadi masih ragu untuk memasang breadcrumbs pada website?

Nah demikian pembahasan mengenai mengenal apa itu breadcrumbs dan bagaimana cara membuatnya.

Jangan lupa jika sahabat Qwords membutuhkan nama domain yang unik dan hosting murah terpercaya, rekomendasi kami ada di Qwords.com.

Qwords telah berpengalaman dalam melayani puluhan ribu klien selama puluhan tahun.

Tunggu apalagi miliki websitemu sekarang juga.

Terima kasih

Qwords Editorial
Qwords Editorial We have 20 years of experience in educating readers on Hosting, Website Development, Digital Marketing, and Business topics. We remain committed to providing the best educational materials.
Saat ini, email sudah menjadi kebutuhan penting untuk berkomunikasi, mendaftar aplikasi, atau bahkan mengurus pekerjaan. Namun, masih banyak yang bingung tentang cara membuat email...
Jordy Prayoga
4 min read
Email adalah pesan elektronik untuk berkomunikasi secara formal lewat internet, saat ini email menjadi alat komunikasi yang penting seiring pertumbuhan teknologi informasi. Tapi, pernahkah...
Frydho Ghazian
4 min read
Ipconfig adalah tool yang sangat familier di kalangan pengguna yang mendalami jaringan, khususnya pada sistem operasi berbasis Windows.  Cukup dengan perintah sederhana, ipconfig cukup...
Jordy Prayoga
2 min read

2 Replies to “Mengenal apa itu Breadcrumbs & Cara…”

  1. Min mau tanya, Bagaimana mengoptimalkan breadcrumb yang ada di google search console?

    1. Biasanya setting di plugin saja kak untuk menampilkan Breadcrumbs,
      asal tidak ada error ga jadi masalah fungsinya agar navigasi website lebih baik.
      Terima kasih

Leave a Reply

Your email address will not be published. Required fields are marked *