Bayangkan Anda sedang berjalan-jalan di kebun binatang. Ketika sudah waktunya pulang, Anda justru tersesat dan tidak dapat menemukan pintu keluar. Tiba-tiba, di tengah jalan Anda melihat sebuah papan berisi peta sehingga Anda mengetahui letak pintu keluar tersebut mengacu pada dimana posisi Anda berada. Nah, breadcrumb melakukan hal serupa.
Istilah ini berasal dari dongeng Hansel dan Gretel, dimana terdapat dua anak yang menjatuhkan breadcrumbs (remah roti) untuk membentuk jejak kembali ke rumah mereka. Layaknya kisah tersebut, breadcrumb menawarkan pengguna untuk melacak navigasi ketika berselancar dalam sebuah situs web.
Dalam artikel ini, kami akan mengulas implementasi breadcrumb mulai dari pengertian, kelebihan, dan cara pembuatannya. Mari simak penjelasannya berikut ini.
Apa itu Breadcrumb?
Breadcrumb adalah elemen penting yang menunjukkan lokasi pengguna dalam sebuah situs web. Alat navigasi sekunder ini menspesifikasi hubungan antara suatu halaman (misal, produk) terhadap halaman dengan tingkat yang lebih tinggi (misal, kategori produk).
Umumnya, breadcrumb terletak pada atas halaman dan berbentuk tulisan kecil. Ia berupa tautan teks yang disusun secara horizontal dan dipisahkan oleh simbol “lebih besar dari” (>). Simbol ini menunjukkan tingkatan suatu halaman relatif lebih tinggi berdasarkan tautan di sebelahnya.
Anda biasanya dapat menemukan breadcrumb website yang memiliki konten dalam jumlah besar yang diatur secara hirarkis. Semakin panjang tulisannya, maka akan semakin kompleks konten dalam website tersebut.
Adanya breadcrumb memungkinkan pengguna untuk kembali ke halaman sebelumnya, bahkan halaman utama hanya dengan sekali klik saja. Dengan demikian, untuk menemukan konten dengan kategori yang sama dalam sebuah website, pengunjung tidak perlu repot kembali ke halaman utama dan melakukan penjelajahan ulang
Kelebihan Breadcrumb
Mungkin Anda masih berpikir bahwa breadcrumb tidak terlalu diperlukan dalam sebuah website. Jangan salah, banyak sekali manfaat yang perlu Anda ketahui dari elemen yang satu ini. Berikut kami rangkum penjelasannya menurut Smashingmagazine.com:
1. Ramah Pengguna
Tujuan utama breadcrumb adalah untuk menunjang kenyamanan pengguna. Elemen ini merupakan navigasi sekunder karena menunjukkan urutan struktur pada website multi-level. Alhasil, pengguna dapat menavigasi halaman yang sudah dibuka ke tingkat yang lebih tinggi secara mudah.
2. Tidak Mengganggu Tampilan
Bentuknya yang sederhana tidak memakan banyak ruang pada tampilan halaman sehingga muatan konten supaya tidak terlalu berat. Perlu dipahami bahwa memang terdapat website yang memiliki struktur yang kompleks dan detail. Namun, ini bukanlah sebuah masalah selama kontennya tidak terlalu berlebihan.
3. Meningkatkan User Experience
Anggap saja pengguna ingin kembali pada halaman tingkat yang lebih tinggi. Alih-alih menggunakan tombol Back pada browser atau navigasi utama situs web, pengguna kini cukup menggunakan breadcrumb sehingga jumlah klik akan lebih sedikit.
4. Meminimalisir Bounce Rate
Elemen ini bisa menjadi strategi yang bagus untuk menarik pengunjung. Misalkan pengguna tiba di halaman melalui pencarian Google. Breadcrumb mungkin menggoda pengguna untuk mengklik halaman tingkat yang lebih tinggi, apalagi jika sesuai dengan interest mereka.
Cara Membuat Breadcrumb
Pembuatan breadcrumb tergolong cukup mudah, kok. Anda dapat mengandalkan tema WordPress secara langsung atau menggunakan plug-in tambahan. Di bawah ini kami menyediakan tiga metode yang mudah diikuti dan dapat Anda pertimbangkan:
1. Tema WordPress
Meskipun biasanya hanya digunakan untuk mengontrol tampilan, tema bawaan dari WordPress juga dapat mempengaruhi fungsionalitas situs web Anda. Salah satu caranya adalah dengan menambahkan breadcrumb secara mudah dan cepat.
Anda cukup mencari tema WordPress yang sudah memiliki standar navigasi breadcrumb. Terlebih, sudah terdapat banyak opsi yang tersedia gratis pada themes directory WordPress, seperti SmartMag, Pixwell, GoodLife, dan lain sebagainya.
Namun, jika Anda mengembangkan situs web untuk sebuah perusahaan atau instansi, cara ini tidak disarankan. Sebaiknya gunakan plugin saja supaya hasilnya lebih praktis dan aplikatif.
2. Yoast SEO
Yoast SEO adalah salah satu plugin favorit pengguna WordPress dalam meningkatkan rangking mesin pencarian mereka dan mengoptimalkan konten yang ada. Salah satu fiturnya adalah alat navigasi yang satu ini.
Pertama, Anda harus menginstal dan aktivastikan Yoast SEO pada dashboard WordPress. Kemudian, masuk pada script template situs web Anda dan pilih salah satu menu, antara single.php , page.php , atau header.php yang tersedia pada template. Tambahkan kode sebagai berikut:
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>
Setelah disimpan atau melakukan update template, silahkan akses Advanced settings lalu aktifkan Breadcrumb support. Dari sana, Anda juga dapat mengontrol bagaimana tampilan strukturnya.
3. Secara Manual
Tema atau plugin yang sudah tersedia pada WordPress memang terkesan ramah pengguna dan mudah diakses. Namun, untuk beberapa pengembang yang sudah mahir, terkadang hal ini justru membatasi. Penggunaan kode akhirnya digunakan sebagai alternatif untuk membuat elemen yang lebih menarik.
Untuk membuat breadcrumb secara manual, terdapat dua hal yang perlu dilakukan. Anda harus menambahkan fungsi pada file functions.php untuk mengaktifkannya. Berikut kode yang bisa Anda gunakan:
function get_breadcrumb() {
echo ‘<a href=””’.home_url().’”” rel=””nofollow””>Home</a>’;
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 ‘“<em>’;
echo the_search_query();
echo ‘</em>”’;
}
}
Anda juga harus menempatkan kode pada file template tempat breadcrumb akan muncul, entah itu pada single.php atau header.php. Gunakan kode sebagai berikut:
<div class=”breadcrumb”><?php get_breadcrumb(); ?></div>
Memodifikasi file-file ini memang akan menampilkan breadcrumb pada situs Anda, tetapi tidak memungkinkan untuk mendesain atau mengatur tata letaknya. Oleh karena itu, cobalah untuk mengaplikasikan sedikit komponen CSS di dalamnya.
Kesimpulan
Breadcrumb merupakan salah satu komponen penting dalam pengembangan SEO website. Walaupun tampilannya kecil dan sederhana, ia dapat bermanfaat bagi pengguna ketika menjelajahi halaman. Selain itu, ia juga memudahkan mesin pencarian mengetahui struktur website Anda.
Cara termudah untuk memasangnya adalah melalui tema WordPress, plugin, atau secara manual. Ketiganya tidak memakan waktu lama dan tergolong mudah. Jadi, manakah metode yang cocok dan sesuai bagi Anda?
Kami harap artikel ini dapat membantu Anda mengoptimalkan SEO website Anda. Selamat mencoba dan semoga beruntung!
Sekawan Studio membuka jasa optimasi website untuk membantu meningkatkan visibilitas dan traffic di SERP Google. Untuk informasi lebih lanjut bisa kunjungi kontak website kami.
