Tahukah Anda tentang Apa itu Breadcrumbs? Cara Membuat Breadcrumbs Di Website? Bagi orang awam, istilah ini tentunya sangat asing. Begitu pun dengan para pemula dalam dunia website.
Lantas, sebenarnya apa itu breadcrumbs?
Secara harfiah, jika kata breadcrumbs dipisah dan diartikan ke dalam Bahasa Indonesia, maka artinya adalah remahan roti.
Namun, saat ini kita tidak sedang membicarakan tentang roti, melainkan website. Lalu apa hubungan breadcrumbs ini dengan website?
Breadcrumbs merupakan elemen penting dalam sebuah website. Bahkan seakan sesuatu yang wajib. Ini karena keberadaannya dapat mengoptimalkan sebuah website.
Melalui artikel ini akan dijelaskan lebih lanjut terkait apa itu breadcrumb. Kamu akan tau lebih detail tentang breadcrumbs, seperti apa hubungannya dengan website, manfaat, dan cara membuatnya .
Apa itu Breadcrumbs?
Jika diartikan secara harfiah pengertian breadcrumbs berarti remahan roti. Sejarah istilah breadcrumbs bermula dari dongeng “Hansel. and Gretel” milik Brothers Grimm.
Dalam cerita tersebut, Hansel dan Gretel pergi ke hutan. Namun keduanya memanfaatkan remahan roti yang mereka sebar di sepanjang jalan sebagai penunjuk jalan untuk pulang ke rumah.
Nah, berdasarkan dongeng tersebut breadcrumbs merupakan sebuah petunjuk yang memudahkan kita untuk navigasi ke halaman sebelumnya ataupun halaman utama.
Jadi, breadcrumbs ini ibarat sebuah alamat yang menunjukkan letak spesifik sebuah halaman dari menu navigasi pada website.
Sebenarnya kita sudah tak asing lagi dan sering melihat wujud dari apa yang disebut sebagai breadcrumbs, tetapi kita tidak tahu jika itu adalah yang disebut breadcrumbs.
Berdasarkan penjelasan tersebut, apakah sudah ada gambaran terkait apa itu breadcrumbs? Jika belum, mari lihat gambar dari sebuah portal berita yang menunjukkan sebuah breadcrumbs berikut ini.
Sekarang pasti sudah lebih jelas tentang apa itu yang disebut breadcrumbs. Nah, semakin panjang sebuah breadcrumbs menunjukkan bahwa semakin kompleks struktur konten dalam sebuah website.
Hal ini ibarat sebuah rumah. Jika kamu mempunyai rumah yang letaknya masuk-masuk ke dalam gang terpencil, maka kamu perlu menunjukkan alamat yang lengkap dan detail agar temanmu tidak tersesat dan dapat dengan mudah menemukan rumahmu.
Hal ini tentunya berbeda jika rumahmu ada di lokasi strategis, misalnya di pinggir jalan utama.
Kamu tak perlu menunjukkan alamat lengkap, cukup nama jalan dan nomor rumah, maka temanmu akan dengan mudah menemukan rumahmu.
Berdasarkan penjelasan di atas, dapat ditarik kesimpulan bahwa breadcrumbs merupakan sebuah alat bantu pada website yang memudahkan dan memungkinkan pengunjung untuk menjelajah website tersebut.
Adanya breadcrumbs memungkinkan pengguna untuk kembali ke halaman terdahulu, bahkan halaman utama dengan cepat dan mudah.
Untuk menemukan konten atau artikel dengan kategori yang sama dalam sebuah website, pengunjung tidak perlu repot kembali ke halaman utama dan melakukan penjelajahan ulang.
Pengunjung cukup mengklik breadcrumbs pada halaman mana yang ingin dikunjungi.
Manfaat Breadcrumbs Untuk SEO
Setelah menerima penjelasan dan mempunyai gambaran tentang breadcrumbs, lalu muncul pertanyaan lain.
Sebenarnya apa sih manfaat dari breadcrumbs ini selain untuk memudahkan pengunjung melakukan penjelajahan pada website?
Jawabanya adalah meningkatkan reputasi sebuah website. Ya, breadcrumbs mampu mengurangi bounce rate dan meningkatkan SEO pada website.
Bounce rate menunjukkan persentase pengunjung yang meninggalkan website setelah membuka satu halaman pada website tanpa melakukan tindakan apapun.
Persentase bounce rate yang tinggi tentunya tidak baik bagi sebuah website. Ini mengindikasikan bahwa kualitas konten dari website yang buruk atau pengunjung tidak dapat menemukan konten yang sedang dicari. Tentu saja hal ini tidak baik untuk reputasi sebuah website.
Adanya breadcrumbs mampu mengurangi bounce rate tersebut. Hal ini karena kemampuan breadcrumbs dalam mengindeks halaman sebuah website hingga hierarki navigasi paling rendah.
Akibatnya yang tertampil pada mesin pencarian Google merupakan konten yang benar-benar relevan sesuai dengan kebutuhan pengunjung.
Kemudian dalam hal mengoptimalkan SEO, adanya breadcrumbs memudahkan Google dalam memahami struktur dan hirarki sebuah website.
Ketika website memiliki struktur dan hirarki yang baik dan mudah dimengerti, maka Google secara otomatis akan menampilkan konten website tersebut sesuai dengan hasil pencarian yang relevan.
Semakin relevan sebuah konten dengan apa yang dicari oleh user, maka konten tersebut akan tampil paling atas dalam mesin pencarian Google.
Contohnya saja pada gambar di atas. Ketika melakukan pencarian dengan keyword “SEO 2021 Trend”, maka website tersebut muncul paling atas dalam mesin pencarian Google.
Jika diamati lebih lanjut, website Searchenginejournal.com dan wordstream.com tersebut menggunakan breadcrumbs dan konten yang ditampilkan benar-benar relevan dengan apa yang sedang dicari.
Jadi memang terbukti bahwa breadcrumbs dapat membantu mengoptimalkan SEO sebuah website. Apalagi bot dari mesin pencarian Google ini memang menyukai adanya breadcrumbs dalam sebuah website.
Jika kita perhatikan lebih lanjut lagi, setelah url domain dari website, yang tampil selanjutnya adalah breadcrumbs, baru setelahnya adalah url tautan dari konten.
Cara Membuat Breadcrumbs di Blogspot
Setelah mendapatkan sedikit gambaran tentang breadcrumbs dan manfaatnya, tentu saja timbul pertanyaan baru lagi. Bagaimana cara membuat breadcrumbs pada sebuah website?
Tenang saja, kali ini akan kita bahas bagaimana langkah membuat breadcrumbs pada website, baik yang berbasis Blogspot maupun WordPress.
Pertama, mari kita bahas cara membuat breadcrumbs pada Blogspot. Panduan ini akan menggunakan versi valid HTML5.
Alasannya agar blog yang dikelola tidak ketinggalan zaman. Dan tentunya versi baru ini lebih disukai oleh Google sehingga lebih ramah SEO. Berikut langkah-langkah membuat breadcrumbs pada website.
- Bukalah dashboard Blogger, kemudian pilih menu Tema, lanjut pilih lagi menu Edit HTML
- Salin dan tambahkan kode CSS di bawah ini sebelum kode ]]></b:skin> atau </style>
/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}
- Kemudian cari kode HTML post di bawah ini, yang fungsinya menampilkan breadcrumbs pada halaman konten
<b:includable id=’main’ var=’top’>…</b:includable>
- Setelah itu tempelkan kode di bawah ini setelah kode HTML post yang telah disebutkan tadi
<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<b:if cond=’data:blog.pageType == "static_page"’>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’tag’ title=’Home’>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond=’data:blog.pageType == "item"’>
<!– Breadcrumb Untuk Halaman Pos –>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<div class=’breadcrumbs’>
Anda di sini :
<span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’><a expr:href=’data:blog.homepageUrl’ itemprop=’url’ title=’Home’><span itemprop=’title’>Home</span></a></span>
<b:loop values=’data:post.labels’ var=’label’>
/ <span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’><a expr:href=’data:label.url + "?max-results=5"’ expr:title=’data:label.name’ itemprop=’url’><span itemprop=’title’><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’tag’ title=’Home’>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond=’data:blog.pageType == "archive"’>
<!– Breadcrumb Untuk Label Search dan Search Pages –>
<div class=’breadcrumbs’>
<span><a expr:href=’data:blog.homepageUrl’ title=’Home’>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == "index"’>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == ""’>
<span><a expr:href=’data:blog.homepageUrl’ title=’Home’>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href=’data:blog.homepageUrl’ title=’Home’>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
- Klik Simpan Tema untuk menerapkan perubahan yang telah dilakukan.
- Untuk mengetahui apakah breadcrumbs sudah benar-benar terpasang, bisa dengan mengeceknya pada Google Structured Data Testing Tool.
Cara Membuat Breadcrumbs di WordPress
Setelah mengetahui cara membuat breadcrums pada Blogspot, sekarang mari kita belajar cara membuat breadcrumb pada WordPress.
Jika ingin membuat breadcrumbs pada WordPress, ada 3 pilihan yang dapat dilakukan yaitu menginstal tema, menggunakan plugin, dan menggunakan Yoast SEO.
1. Menginstall Tema
Cara ini merupakan cara yang paling praktis. Kita tinggal menginstall tema yang sudah support breadcrumbs di dalamnya.
Tema untuk ecommerce biasanya sudah support breadcrumbs. Namun, jika tidak ingin menggunakan tema ecommerce, tema premium pun ada yang support breadcrumbs.
Tinggal pilih saja sesuai kebutuhan apakah lebih cocok menggunakan tema ecommerce atau menggunakan tema premium saja.
2. Menggunakan Plugin
Cara berikutnya yaitu dengan memasang plugin. Salah satu plugin yang mudah digunakan yaitu Breadcrumb NavXT. Berikut adalah caranya:
- Pertama, download dan install plugin NavXT
- Selanjutnya backup website atau
- Masuk ke menu Editor Template pada WordPress, kemudian pilih menu Appearance, lalu pilih Theme Editor.
- Kemudian tambahkan kode berikut ini pada Header.php (dalam Theme Editor)
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
- Klik Save
- Untuk mengatur tampilan breadcrumbs, maka masuklah ke menu Plugin, lalu pilih Breadcrumb NavXT, lalu klik Settings.
- Silakan atur se.ndiri breadcrumbs tersebut dan sesuaikan dengan kebutuhan website
3. Menggunakan Yoast SEO
Cara terakhir yaitu dengan menggunakan Yoast SEO yang merupakan plugin SEO WordPress yang sangat cocok untuk mengoptimalkan SEO website.
Plugin ini memiliki banyak fitur menarik yang dapat digunakan untuk mengoptimalkan SEO website. Salah satunya yaitu dengan breadcrumbs.
Nah, bagaimana cara menambahkan breadcrumbs melalui Yoast SEO, berikut Langkah-langkahnya:
- Pertama, terlebih dulu harus install plugin Yoast SEO
- Setelah plugin terinstall, masuk ke script template website dan pilih salah satu php, page.php, atau header.php dan letakkan kode berikut di bawahnya
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>
- Lalu save template
- Selanjutnya breadcrumbs dapat diaktifkan melalui menu SEO, kemudian pilih Search Appearance
- Lalu pilih Breadcrumbs dan pilih menu Enabled
Nah, proses membuat breadcrumbs dengan Yoast SEO telah selesai. Selanjutnya untuk melakukan pengaturan lebih lanjut bisa menggunakan menu terakhir tersebut.
Begitulah pembahasan mengenai breadcrumbs. Berdasarkan pembahasan artikel ini dapat disimpulkan bahwa breadcrumbs adalah salah satu elemen penting pada website.
Adanya breadcrumbs memberikan pengaruh baik pada website, yaitu dapat meningkatkan SEO website. Selain bermanfaat bagi website itu sendiri, breadcrumbs juga bermanfaat bagi pengunjung. Adanya breadcrumbs memudahkan pengunjung dalam melakukan penjelajahan pada website.
Melalui artikel ini dijelaskan pula mengenai Apa itu breadcrumb dan bagaimana cara membuat breadcrumbs pada website. Ternyata tidak sulit untuk membuat breadcrumbs pada website. Semoga artikel ini bermanfaat!
Hanya orang biasa yang berusaha memberikan informasi seakurat mungkin melalui blog sederhana ini.
