Cara Membuat Breadcrumb di WordPress [Panduan Lengkap]

by -2 views
cara-membuat-breadcrumb-di-wordpress-[panduan-lengkap]

Ketika mulai memperdalam dunia website, mungkin bagi seorang pemula istilah “Breadcrumbs” akan terdengar asing. Kata breadcrumbs jika kita terjemahkan ke dalam bahasa Indonesia secara terpisah artinya adalah remahan roti.

Namun bukan itu makna dari Breadcrumbs sendiri, karena jelas bahwa remahan roti tidak ada kaitannya dengan website. Lalu, apa itu breadcrumbs? Dan apakah penting bagi sebuah website?

Kita akan cari tahu sama-sama melalui artikel ini dari mulai pengertian, fungsi, mengapa breadcrumbs penting untuk SEO website dan lengkap dengan cara membuat breadcrumbs di WordPress.

Apa Itu Breadcrumbs?

Breadcrumbs adalah elemen yang memiliki fungsi penting bagi website yaitu untuk navigasi halaman website, dengan adanya breadcrumbs bisa menunjukan kepada pengunjung tentang urutan struktur halaman yang sudah dibuka oleh pengunjung website tersebut.

Perlu diketahui juga, meskipun breadcrumbs termasuk elemen website yang memiliki fungsi penting, tetapi belum tentu breadcrumbs bisa ditemukan di website lainnya karena memang ada beberapa website yang tidak menambahkan breadcrumbs.

Tapi tahukah Anda, bahwa Breadcrumbs memiliki fungsi penting untuk sebuah website? Agar lebih jelas memahami fungsi penting dari breadcrumbs perhatikan gambar di bawah ini.

contoh breadcrumbs pada website

Contoh lainnya kami ambil dari salah satu situs toko online yang ada di Indonesia, perhatikan baik-baik ya!

contoh breadcrumbs pada website

Jika kita perhatikan kedua contoh breadcrumbs di atas, ternyata contoh yang pertama memiliki struktur breadcrumbs lebih pendek dibandingkan dengan contoh kedua. Kenapa? Karena memang breadcrumbs toko online biasanya memiliki struktur yang lebih panjang.

Toko online biasanya memiliki banyak kategori dan produk yang memiliki beragam jenis sehingga breadcrumbs yang dihasilkan juga akan lebih panjang.

Panjang pendeknya breadcrumbs sangat bergantung kepada struktur konten yang ada di dalam website tersebut. Jika struktur website yang dimiliki lebih ringkas, maka breadcrumbs yang dihasilkan juga akan lebih pendek.

Fungsi Breadcrumbs

Breadcrumbs memiliki fungsi penting dalam memudahkan pengunjung website yaitu sebagai alat navigasi. Misalnya saja contoh website yang memiliki struktur breadcrumbs adalah Beranda > Digital Marketing > Memahami Tren Digital Marketing 2021.

Jika Anda ingin kembali ke kategori Digital Marketing, Anda tidak perlu kembali ke bagian beranda melainkan cukup klik breadcrumbs Digital Marketing dan nanti akan terbuka halaman kategori tersebut..

Pentingnya Breadcrumbs Bagi SEO Website

Masih banyak orang meremehkan breadcrumbs, namun nyatanya hal ini sangat penting bagi sebuah website.. Jika Anda sekarang sedang mengembangkan SEO website, maka breadcrumbs sangat berguna untuk optimasi SEO.

Kenapa?

Karena breadcrumbs website merupakan elemen website yang sangat di sukai user maupun bot dari mesin pencari. Dengan menerapkan breadcrumbs pada website Anda, Google akan memahami struktur website dengan mudah.

Ketika website Anda memudahkan Google dalam memahami struktur, maka Google nantinya akan menampilkan hasil pencarian (SERP) yang relevan di mesin mereka. Sehingga posisi pencarian konten dari website akan semakin di atas dan lebih mudah diakses oleh banyak orang.

pentingnya breadcrumbs bagi SEO website

Tidak hanya itu, Breadcrumbs juga bisa mengurangi bounce rate dan mengakses struktur navigasi website dengan lebih dalam. Sehingga dalam hasil pencarian nantinya Google akan menganggap website Anda semakin relevan dengan pencarian pengguna search engine Google.

Bahkan pengunjung website juga akan dimudahkan dengan adanya breadcrumbs, karena pengunjung bisa melewati navigasi yang rumit di bagian home page. Berbeda jika tidak menggunakan breadcrumbs, pengunjung akan kesulitan menemukan konten yang mereka cari.

Ketika pengunjung tidak menemukan konten yang mereka cari di website, pengunjung dipastikan akan meninggalkan website Anda begitu saja dan ini tentu akan menurunkan kualitas website Anda.

Jika Anda tidak ingin kehilangan pengunjung, maka tidak salahnya untuk menambahkan breadcrumbs. Ikuti saja beberapa cara membuat breadcrumbs di bawah ini:

Cara Membuat Breadcrumbs

Membuat breadcrumbs di website sangat mudah, terutama untuk pengguna WordPress dan kami telah mengumpulkan beberapa cara membuat breadcrumbs yang bisa Anda pilih sesuai dengan keinginan.

Sebelum memulai,jangan lupa untuk membackup file website WordPress terlebih dahulu ya!

Cara Membuat Breadcrumbs di WordPress Tanpa Plugin

Cara ini bisa diterapkan jika tema website WordPress Anda tidak ada fitur breadcrumbs secara otomatis, berikut penjelasan cara membuat breadcrumbs tanpa tambahan plugin:

Langkah 1: Buka file functions.php yang lokasinya di dalam folder tema yang Anda gunakan.

cara membuat breadcrumbs di wordpress tanpa plugin

Langkah 2: Buat sebuah fungsi get_breadcrumb() dengan menambahkan kode di bawah ini:

/**

* Fungsi untuk menampilkan breadcrumbs

* ditaruh di functions.php

*/

function get_breadcrumb() {

echo ‘Home’;

if (is_category() || is_single()) {

echo ” » “;

the_category(‘ • ‘);

if (is_single()) {

echo ” » “;

the_title();

}

} elseif (is_page()) {

echo ” » “;

echo the_title();

} elseif (is_search()) {

echo ” » Search Results for… “;

echo ‘”’;

echo the_search_query();

echo ‘”‘;

}

}

code editor untuk menaruh breadcrumbs

Langkah 3: Buka file single.php di folder tema Anda (lokasi folder sama dengan file functions.php).

Buka file single.php di folder tema Anda

Langkah 4: Setelah file terbuka tambahkan kode di bawah ini tepat sebelum di file single.php

Cara Membuat Breadcrumb di WordPress [Panduan Lengkap] - 2021

Selesai! Jika Anda melakukan sesuai langkah di atas maka breadcrumbs telah berhasil dibuat. Jika Anda kesulitan menggunakan cara ini, Anda bisa menggunakan cara lainnya yang akan kami jelaskan juga melalui artikel ini.

Simak pembahasannya sampai selesai ya!

Cara Membuat Breadcrumbs Menggunakan Plugin Yoast SEO

cara membuat breadcrums menggunakan plugin Yoast SEO

Cara lain membuat breadcrumbs adalah dengan menggunakan plugin Yoast SEO. Yoast SEO adalah salah satu plugin SEO paling populer saat ini.

Banyak orang telah menggunakan plugin ini untuk keperluan SEO website mereka. Yoast SEO dapat membantu Anda menulis konten yang berkualitas tinggi.

Yoast SEO memiliki fitur untuk optimasi meta description dan snippet, kedua elemen tersebut bisa membuat konten Anda menarik bagi mesin pencari. Sehingga, kemungkinan konten yang Anda buat dapat dijangkau oleh banyak pengguna.

Yoast SEO juga dapat membantu Anda membuat breadcrumbs, bagaimana caranya? Simak baik-baik langkah-langkahnya di bawah ini ya!

Langkah 1: Pastikan Anda sudah login ke halaman dashboard WordPress terlebih dahulu.

Langkah 2: Instal plugin Yoast SEO dengan cara klik Plugin > Add New dan Search Yoast SEO lalu instal dan Activate plugin Yoast (jika sudah instal dilanjutkan ke langkah 3).

Langkah 3: Aktifkan breadcrumbs melalui menu SEO dan pilih search appearance.

Aktifkan breadcrumbs melalui menu SEO  dan pilih search appearance.

Langkah 4: klik tab breadcrumbs.

klik tab breadcrumbs.

Langkah 5: Tepat pada bagian Enable Breadcrumbs, silakan Anda aktifkan atau enabled dan pada bagian bawahnya diatur sesuai dengan kebutuhan Anda dari mulai pemisah (separator), anchor text home dan yang lainnya.

Tepat pada bagian Enable Breadcrumbs, silakan Anda aktifkan atau enabled dan pada bagian bawahnya diatur sesuai dengan kebutuhan Anda.

Langkah 6: Scroll ke bagian bawah dan di bagian Taxonomy to Show in breadcrumbs for content types, silakan Anda tentukan kategori, tag maupun formatnya. Nah nanti bagian tersebut yang akan muncul sebelum judul post di breadcrumbs website Anda.

Scroll ke bagian bawah dan di bagian Taxonomy to Show in breadcrumbs for content types, silakan Anda tentukan kategori, tag maupun formatnya.

Langkah 7: Setelah semua pengaturan ditentukan klik tombol Save Changes.

Langkah 8: setelah semua langkah-langkah di atas sudah dilakukan, selanjutnya Anda perlu menambahkan kode di bawah ini ke file single.php, page.php atau header.php.

if ( function_exists(‘yoast_breadcrumb’) ) {

yoast_breadcrumb( ‘

’,’

’ );

}

?>

Selesai, sekarang website Anda telah memiliki breadcrumbs. Selamat ya!

Cara Membuat Breadcrumbs Menggunakan Plugin NavXT

Cara Membuat Breadcrumbs Menggunakan Plugin NavXT

Alternatif lainnya dalam membuat breadcrumbs adalah dengan menggunakan plugin NavXT dan berikut adalah cara membuat breadcrumb dengan bantuan plugin NavXT, sangat mudah kok!

Pertama untuk mengatur bagaimana breadcrumb ditampilkan di website Anda, cukup akses fitur yang ada di plugin NavXT dengan cara klik Settings > Breadcrumb NavXT.

akses fitur yang ada di plugin NavXT dengan cara klik Settings > Breadcrumb NavXT.” data-lazy-sizes=”(max-width: 173px) 100vw, 173px” data-lazy-src=”https://www.exabytes.co.id/blog/wp-content/uploads/2021/11/NavXT.png” data-lazy-srcset=”https://www.exabytes.co.id/blog/wp-content/uploads/2021/11/NavXT.png 173w, https://www.exabytes.co.id/blog/wp-content/uploads/2021/11/NavXT-17×30.png 17w, https://www.exabytes.co.id/blog/wp-content/uploads/2021/11/NavXT-64×114.png 64w, https://www.exabytes.co.id/blog/wp-content/uploads/2021/11/NavXT-150×268.png 150w” data-lazy-type=”image” height=”309″ loading=”lazy” src=”https://www.exabytes.co.id/blog/wp-content/uploads/2021/11/NavXT-17×30.png” title=”Cara Membuat Breadcrumb di WordPress [Panduan Lengkap] – Tutorial Digital Marketing, Website, & Bisnis Online – Exabytes” width=”173″></img></figure>
</div>
<p>Di halaman tersebut Anda sudah bisa melakukan kustomisasi breadcrumbs yang bisa disesuaikan dengan tipe konten, mengubah taksonomi, dan hal lainnya yang berkaitan dengan breadcrumbs.</p>
<h3><strong>Gunakan Tema yang Mendukung Breadcrumbs</strong><span></span></h3>
<figure><img alt=
Ilustrasi tema WordPress

Jika Anda masih kesulitan menggunakan cara teknis di atas, maka bisa menggunakan cara yang lebih praktis yaitu dengan menggunakan tema yang mendukung breadcrumbs.

Ada banyak tema WordPress yang sudah otomatis menggunakan breadcrumbs di dalamnya. Karena para desainer dan pengembang tema WordPress sudah banyak menyadari kebutuhan breadcrumbs sangat penting untuk website terutama untuk tema khusus e-commerce.

Untuk tema khusus website e-commerce, Anda bisa mencoba menggunakan tema seperti Shopkeeper dan Flat Some. Kedua tema tersebut memiliki banyak pilihan demo dan desain yang elegan.

Tapi jika Anda mencari tema lain, maka Anda bisa menggunakan tema Smart Mag dan Knowledge Base. Kedua tema tersebut adalah tema premium yang sudah kompatibel dengan breadcrumbs. Tema premium umumnya hanya tersedia pada WordPress berbayar. Karenanya pemilihan platform WordPress antara WordPress.com atau WordPress.org harus Anda pertimbangkan sesuai dengan kebutuhan, ya! 

Kesimpulan

Memang breadcrumbs terlihat sepele untuk fitur yang ada di website. Namun manfaat yang dihasilkan tidak sederhana dan sepele terutama dalam meningkatkan SEO website, sehingga Anda tidak bisa mengabaikannya.

Breadcrumbs bisa membantu website untuk di indeks dengan baik oleh Google dan keberadaannya juga dapat menurunkan angka bounce rate.

Tidak hanya breadcrumbs, sama halnya ketika Anda perlu mengetahui cara mengganti permalink WordPress agar lebih SEO friendly yang merupakan struktur URL yang seringkali juga diabaikan oleh pemilik website. 

Kami berharap melalui artikel ini bisa membantu Anda dalam meningkatkan SEO website dan mulai menginvestasikan waktu sedikit untuk melakukan setting breadcrumbs, sehingga Anda bisa meningkatkan potensi website.

Untuk memperdalam pengetahuan Anda tentang website dan SEO, kami telah mempersiapkan berbagai artikel yang berkaitan dengan website seperti cara mengamankan website dari mixed content, di mana mixed content sangat berbahaya untuk website.

Selain menawarkan layanan SEO, hosting WordPress Indonesia dan Web Hosting Indonesia,kami akan selalu memberikan pengetahuan baru untuk membantu memenuhi referensi Anda dalam mengoptimalkan potensi website.

Yuk segera berlangganan artikel kami, agar tidak ketinggalan tutorial dan artikel terbaru lainnya!

Leave your vote

466 Points
Upvote Downvote

Leave a Reply

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