Cara Menambahkan Menu Navigasi Breadcrumbs Pada Website WordPress

Bila kamu ingin menambahkan menu navigasi tambahan pada situs WordPress, breadcrumbs adalah salah satu cara yang patut kamu pertimbangkan. Dengan fitur ini, pengunjung akan dapat dengan mudah mencari dan menemukan letak pos, laman, atau kategori pada situs kamu. Dan untungnya, memasang breadcrumbs pada WordPress sangat mudah untuk dilakukan.

Bila kamu mendengar kata breadcrumbs, rasanya mungkin akan sangat aneh, apalagi bila dihubungkan dengan fungsi navigasi pada sebuah situs. Ini wajar karena dalam bahasa Indonesia breadcrumbs artinya remah roti.

Lalu apa hubungannya remah roti dengan WordPress?

Istilah breadcrumbs atau breadcrumbs trail sendiri terinspirasi dari novel anak Jerman, Hansel and Gretel. Pada cerita tersebut, dua orang kakak beradik, Hansel dan Gretel, meninggalkan jejak dari remahan roti agar mereka bisa kembali ke rumah mereka dengan mudah.

Sama seperti kisah tersebut, breadcrumbs pada web design juga berfungsi untuk memudahkan user bernavigasi dengan meninggalkan ‘jejak’ yang menghubungkan pos hinggga ke homepage situs kamu. Pada artikel kali ini, saya akan membahas apa itu breadcrumbs dan bagaimana cara menggunakannya pada situs WordPress.

Apa itu breadcrumbs?

Dari penjelasan di atas, mungkin kamu sudah memiliki sedikit gambaran apa itu breadcrumbs?

Seperti pada situs ini, breadcrumbs biasanya digunakan sebagai menu navigasi tambahan untuk melengkapi menu navigasi utama. Dengan breadcrumbs, pengunjung dapat mengetahui di mana mereka berada dan kemana mereka bisa mencari semua yang berhubungan dengan apa yang mereka cari.

Untuk lebih jelasnya, kamu bisa melihat contoh breadcrumbs yang digunakan oleh bisablog. Bila kamu melihat bagian kiri atas sebelum judul pos ini, akan ada contoh breadcrumbs seperti berikut:

Dengan menu seperti ini, kamu dapat dengan mudah mengetahui di mana kamu berada. Pada contoh di atas, kamu berada pada salah satu pos pada bisablog yang berada pada kategori WordPress. Jadi bila kamu ingin melihat semua pos pada kategori tersebut, kamu akan dapat dengan mudah mencarinya.

Pada situs lain, breadcrumbs digunakan untuk mempermudah user dalam mengakses data pada struktur yang memiliki level atau tingkatan tertentu seperti folder tree pada OS Windows. Ambil contoh situs cloud storage Dropbox yang menyediakan menu navigasi berbentuk breadcrumbs agar user dapat berpindah-pindah dari satu folder ke folder lainnya dengan cepat dan mudah.

Penggunaan breadcrumbs yang paling umum dapat kamu jumpai pada semua situs jual beli online, mulai dari Amazon hingga situs ecommerce lokal seperti Lazada, Tokopedia, atau BukaLapak. Dengan kategori yang sangat variatif, memiliki menu navigasi yang dapat mempermudah calon pembeli adalah sebuah keharusan, dan bredcrumbs adalah fitur wajib yang tidak boleh ketinggalan.

Breadcrumbs dan SEO

Yum, SEO!

Selain bisa membantu pengunjung dan memberikan user experience yang baik, breadcrumbs juga bisa membantu mesin pencari Google untuk mengetahui struktur data pada sebuah website.

URL dengan struktur data yang baik dapat memudahkan user untuk mengetahui dengan cepat isi sebuah konten. Itulah kenapa Google mengupdate algoritma mereka agar bisa menampilkan struktur data dengan format semacam breadcrumbs pada hasil pencarian^[1], seperti contoh berikut ini,

Alasan lain kenapa breadcrumbs baik untuk SEO adalah faktor internal linking. Dengan menggunakan fitur ini, kamu secara otomatis menambahkan internal link berupa link ke semua laman yang tertera pada breadcrumbs. Meskipun tidak sepenting backlink, internal linking tetap berguna untuk menyebar link juice dan meningkatkan nilai page authority^[2].

Dan sebagai informasi, baik breadcrumbs maupun internal linking sama-sama masuk dalam daftar faktor penentu ranking Google versi Backlinko.

Menambahkan breadcrumbs pada website WordPress

Ada beberapa cara yang bisa kamu gunakan untuk menambahkan menu navigasi breadcrumbs pada situs WordPress. Cara yang paling mudah tentunya dengan menggunakan plugin seperti Yoast SEO dan Breadcrumbs NavXT.

Untuk kamu yang ingin melakukannya secara manual, ada tutorial sederhana untuk menampilkan breadcrumbs pada WordPress tanpa plugin dari Paulund.co.uk yang bisa kamu gunakan. Dengan tutorial ini, kamu bisa memperlihatkan kategori pos yang sedang dibaca.

Untuk tutorial yang lebih advanced, kamu bisa membacanya di artikel breadcrumbs tanpa plugin dari thewebtaylor.com.

Menambahkan Breadcrumbs dengan plugin Yoast SEO

Yoast SEO adalah plugin yang sangat luar biasa terutama dalam menyediakan berbagai macam tools dan fitur untuk SEO. Namun tidak hanya itu, plugin ini juga memiliki banyak fitur lain yang tidak melulu soal SEO, seperti fitur file editor di mana kamu bisa membuat dan mengedit file .htaccess atau robot.txt dengan mudah.

Langkah pertama yang harus kamu lakukan adalah memastikan kamu sudah mengaktifkan opsi Advanced Setting Page. Cukup masuk ke menu Yoast SEO dan klik tab Features kemudian ubah status Advanced Setting Page menjadi Enabled. Setalah diaktifkan, akan ada beberapa menu baru yang muncul.

Untuk menambahkan breadcrumbs pada situs WordPress, masuk ke menu Yoast SEO » Advanced dan aktifkan menu Enabled Breadcrumbs.

Menambahkan kode breadcrumbs Yoast SEO pada tema WordPress

Setelah kamu mengaktifkan fitur breadcrumbs, bisa jadi fitur ini belum bisa terlihat langsung hasilnya. Beberapa tema sudah memiliki support terhadap fitur yang ditawarkan Yoast SEO ini. Seperti tema Vintage yang saya gunakan sudah kompatibel sehingga saya tidak perlu lagi melakukan pengaturan khusus untuk menampilkan breadcrumbs.

Bila setelah diaktifkan breadcrumbs tidak muncul pada tema yang kamu gunakan, maka kamu perlu menambahkannya secara manual.

Untuk melakukannya, kopi kode berikut dan salin pada file single.php dan/atau page.php tepat di atas judul. Opsi lain yang bisa kamu gunakan adalah menambahkan kode berikut tetap di bagian paling akhir dari file header.php.

<?php if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Sebagai contoh, saya akan menambahkan fitur breadcrumbs dari Yoast SEO pada tema default WordPress, twentyseventeen.

Sebelum kita mulai, ada baiknya kamu membackup WordPress terlebih dahulu. Bila perlu, buat tema anak (child theme) agar kamu dapat dengan mudah melakukan perubahan tanpa harus khawatir mengganggu situs kamu yang sebenarnya.

Untuk menambahkan breadcrumbs pada pos, saya hanya perlu menambahkan kode di atas ke dalam file single.php. Caranya? Masuk ke dasbor WordPress dan masuk ke menu Appearance » Editor lalu cari file single.php.

Di sinilah part yang agak tricky karena kamu harus tahu sedikit mengenai struktur web dalam PHP agar breadcrumbs dapat muncul pada tempat yang kamu inginkan. Setiap tema memiliki struktur masing-masing dan contoh pada tema twentyseventeen ini mungkin akan berbeda pada tema yang kamu gunakan.

Berikut adalah contoh kode breadcrumbs yang saya masukan pada tema twentyseventeen. Perhatikan bahwa saya menghilangkan tag <?php dan ?> karena kode tersebut sudah berada pada blok kode PHP.

Setelah selesai, tambahkan juga kode tersebut pada page.php bila kamu ingin breadcrumbs muncul pada laman WordPress. Bila sudah, silahkan lihat sendiri hasilnya

Menambahkan breadcrumbs dengan plugin Breadcrumb NavXT

Alternatif lain bila kamu tidak menggunakan plugin Yoast SEO adalah dengan menggunakan plugin khusus breadcrumbs seperti Breadcrumb NavXT.

Dengan 600,000 lebih instalasi aktif dan rating yang cukup tinggi, plugin open source ini banyak menjadi rekomendasi dari para master WordPress.

Setelah terpasang dan aktif, kamu hanya perlu memasukan kode berikut ke dalam file single.php, page.php, atau header.php,

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Sebagai contoh, berikut adalah kode yang saya masukan ke dalam file single.php dari tema twentyseventeen:

Perhatikan contoh di atas dan contoh sebelumnya menggunakan Yoast SEO. Bila sebelumnya saya meletakan kode Yoast SEO di bawah kode /* Start the Loop */, maka kali ini saya meletakan kode Breadcrumb NavXT di atasnya. Kedua cara ini akan sama-sama meletakan breadcrumbs tepat di atas judul dan metadata pos (seperti tanggal dan nama pengarang).

Menambahkan breadcrumbs dengan plugin WP Breadcrumb

Tadinya saya hanya akan membuat tutorial dengan dua plugin di atas saja. Tapi setelah mencoba banyak plugin khusus breadcrumbs, plugin ini menawarkan sesuatu yang unik yang tidak saya temukan pada plugin lain yang saya coba.

Salah satu kelemahan dua plugin yang saya sebutkan sebelumnya adalah adanya langkah manual yang harus kamu lakukan. Meskipun Yoast SEO dapat langsung bekerja pada beberapa tema, plugin lainnya mengharuskan kamu meletakan kode tertentu agar breadcrumbs dapat muncul pada pos atau laman. Yang paling sulit dari semua ini adalah persoalan teknis di mana kamu harus meletakan kode tersebut agar breadcrumbs bisa muncul di tempat yang kamu inginkan. Dan untuk kamu yang tidak familiar dengan PHP, langkah ini bisa cukup menyulitkan.

Di sinilah kelebihan plugin buatan Sygnoos yang berbasis di Armenia ini. Dengan WP Breadcrumb kamu dapat menambahkan breadcrumbs dengan mudah tanpa harus mengerti koding.

Bila kamu tertarik, pasang WP Breadcrumb kemudian aktifkan.

Untuk membuat breadcrumbs baru, masuk ke menu Breadcrumb Builder » Add Breadcrumb. Setelah itu, cukup ikuti 3 langkah mudahnya mulai dari memilih tema, mengedit fitur breadcrumbs, dan terakhir memilih letak breadcrumbs pada situs WordPress.

Seperti kamu lihat pada gambar di atas, breadcrumbs dapat kamu letakan di mana saja, header, footer, dan di antara konten. Kamu bahkan bisa meletakan breadcrumbs di beberapa tempat sekaligus.

Setelah selesai, simpan breadcrumbs yang telah kamu buat dan lihat hasilnya langsung. Tidak perlu lagi mengutak-atik tema dan menambahkan kode ke dalamnya secara manual.

Penutup

Seperti hikmah pada cerita Hansel and Gretel, meninggalkan jejak remah roti agar dapat pulang dan tidak tersesat di hutan adalah ide yang bagus. Kecuali kalau remah roti tersebut terlanjur dimakan hewan lebih dulu yah!

Pada desain web, memberikan pengunjung menu navigasi yang baik akan membantu mereka agar tidak tersesat di antara tumpukan konten website.

Meskipun begitu, tidak semua website membutuhkan breadcrumbs.

Fitur ini akan sangat berguna bila kamu memiliki  dengan kategori yang bertumpuk-tumpuk dan terdiri dari beberapa tingkatan seperti yang lumrah terjadi pada situs belanja online.

Trus kenapa bisablog pake’ breadcrumbs? Padahal kan ga’ penting banget tuh kayaknya!

Haha…betul juga sih.

Blog seperti bisablog atau blog lain yang sejenis mungkin tidak akan begitu merasakan manfaat dari breadcrumbs. Ini karena semua pos yang ada pada bisablog dapat dengan mudah dicari melalui menu utama ataupun search bar. Tapi fitur ini dapat ditambahkan dengan mudah dan hanya perlu diatur satu kali saja. Dan melihat manfaat SEOnya, kenapa tidak?

Apakah kamu juga menggunakan breadcrumsbs? Bila ada saran atau pertanyaan, jangan segan untuk mengirimkan komentar kamu yah!