ara Membuat Breadcrumb di Website. Saat membicarakan website, rasanya SEO sudah jadi satu paket yang tak terpisahkan. Wajar saja karena dengan SEO, website Anda bisa meraih traffic dan konversi yang tinggi. Nah, ada banyak hal nih yang bisa Anda lakukan untuk membuat website Anda semakin SEO-friendly. Salah satunya dengan cara membuat breadcrumb di WordPress.
Breadcrumb merupakan link navigasi yang ada di setiap website. Fungsinya supaya pengunjung lebih mudah menemukan halaman yang mereka tuju. Namun, meski fungsinya tidak jauh berbeda dengan menu navigasi, keberadaan breadcrumb ini penting sekali lho untuk website Anda.
Bukan hanya sebagai navigasi, melainkan ada fungsi lain dari breadcrumb yang bisa memberikan efek luar biasa terhadap SEO website Anda. Lantas, apa yang membuat breadcrumb ini penting sekali untuk website? Yuk, cari tahu jawabannya lengkap dengan cara membuat breadcrumb di website.
Mengapa Breadcrumb Penting untuk Website?
Breadcrumbs adalah sekumpulan navigasi atau tautan yang terletak di bagian atas halaman web yang membantu pengguna melacak lokasi mereka dalam struktur situs web dan memudahkan mereka untuk kembali ke halaman sebelumnya atau ke halaman utama situs web.
Nama “breadcrumbs” merujuk pada dongeng Hansel dan Gretel di mana karakter melemparkan remah roti sebagai jejak agar dapat kembali ke rumah mereka. Breadcrumbs biasanya terdiri dari serangkaian tautan teks horizontal yang menunjukkan jalur lengkap dari halaman utama situs web ke halaman saat ini.
Meski fungsinya mirip seperti menu, breadcrumb punya tujuan yang berbeda yaitu supaya pengunjung tahu di halaman mana mereka berada sekarang. Selain itu, breadcrumb juga bisa membantu pengunjung untuk kembali ke satu atau langsung ke dua halaman sebelumnya.
Namun, seperti yang sudah disinggung, breadcrumb ini tidak fungsinya hanya navigasi semata. Lebih dari itu, breadcrumb bisa memberikan efek yang positif untuk website Anda, terutama dari segi SEO-nya. Dengan kata lain, keberadaan breadcrumb ini disukai tidak hanya oleh pengunjung, tapi juga Google. Nah, untuk lebih lengkapnya, Anda bisa melihat penjelasan berikut ini.
1. Menurunkan Angka Bounce Rate
Dalam dunia SEO, bounce rate sudah jadi patokan apakah konten dan website Anda berkualitas atau tidak. Apakah strategi SEO yang diterapkan berhasil atau tidak?
Semakin tinggi angka bounce rate sama saja dengan semakin banyak orang yang menganggap kalau website Anda tidak bisa memenuhi kebutuhan maupun keinginan mereka. Artinya, ada yang salah dan harus diperbaiki dari website Anda. Namun, untungnya ini bisa diatasi dengan cara membuat breadcrumb di WordPress.
Breadcrumb membantu pengunjung untuk mengakses halaman yang dituju dengan lebih mudah. Sehingga mereka bisa menemukan konten yang diinginkan. Jika konten yang ditampilkan tidak sesuai dengan kebutuhan mereka, pengunjung tinggal klik breadcrumb dan masuk ke halaman sebelumnya, tanpa harus keluar dari website.
Nah, kalau begini angka bounce rate pun bisa ditekan dan mendukung pencarian user atau pengunjung di website Anda.
2. Meningkatkan User Experience
Anda tentu sudah membaca sebelumnya bagaimana breadcrumb bisa memudahkan pengunjung dalam mengakses halaman di website Anda.
Memang betul sudah ada menu navigasi di bagian header website. Namun, yang harus Anda ketahui adalah menu navigasi membantu pengunjung untuk masuk ke section website, bukan ke halaman tertentu.
Misalnya, di website Bikin.Website ada menu Blog. Nah, menu ini hanya akan membantu Anda untuk masuk ke section blog dari website Bikin.Website.
Jika Anda klik salah satu halaman di section blog dan tidak menemukan yang diinginkan, Anda harus mengklik tombol back pada browser. Atau mengklik kembali menu Blog untuk kembali ke awal.
Yang mana, ini akan memberikan experience yang buruk ke user atau pengunjung karena prosesnya yang ribet. Berbeda dengan breadcrumb yang menampilkan jejak halaman yang sedang Anda klik.
Sehingga, kalaupun pengunjung tidak menemukan konten yang dibutuhkan, mereka tinggal klik satu atau dua halaman sebelumnya.
3. Meningkatkan Ranking Website
Sebagai penguasa internet, Google seringkali mengingatkan pada tiap pemilik website supaya selalu mengutamakan user experience.
Itulah mengapa kemudian banyak sekali faktor user experience yang sangat mempengaruhi SEO. Intinya, kalau mau SEO-friendly, ya harus sepaket dengan website yang user-friendly.
Nah, menampilkan hirarki melalui breadcrumb dari website Anda adalah salah satu cara untuk meningkatkan user experience.Â
Seperti yang sudah disebutkan sebelumnya, pengunjung bisa mengetahui posisi halaman di mana informasi yang mereka butuhkan berada.Â
Selain itu, dengan adanya breadcrumb, Google bot pun akan lebih dimudahkan dalam menganalisa struktur website Anda dan memasukkan semua informasi yang relevan di hasil pencarian.
Sehingga, ini bisa memberikan pengaruh yang baik untuk ranking website pada hasil pencarian.
Cara Membuat Breadcrumbs di WordPress
1. Membuat Breadcrumbs di WordPress Menggunakan Plugin
Sudah ada banyak plugin breadcrumb di WordPress yang bisa Anda install dan langsung gunakan. Nah, salah satunya adalah plugin Breadcrumb NavXT yang akan kita gunakan dalam contoh kali ini.
Cara install-nya pun sangat mudah, kok. Kalau begitu, langsung ikuti langkah-langkah berikut ini, yuk!
- Login ke akun administrator WordPress Anda.
- Pilih menu Plugins pada menu bar. Lalu, klik Add New di bagian atas.
- Cari plugin Breadcrumb NavXT pada search bar. Lalu, klik Install Now > Activate pada plugin Breadcrumb NavXT.
- Klik menu Settings > Breadcrumb NavXT pada menu bar.
- Atur setting-an breadcrumb untuk website Anda. Atau bisa biarkan dalam keadaan default.Â
- Kalau sudah, klik Save Changes.
Langkah 2 – Memasang Breadcrumb di WordPress
Setelah plugin berhasil ter-install dan sudah di-setting sesuai dengan kebutuhan serta keinginan Anda, selanjutnya kita akan men-setting breadcrumb ini di website.
Nah, untuk tahapan ini, kita akan masuk ke menu Appearance. Namun, perlu digarisbawahi tidak semua tema support breadcrumb.
Jika Anda ingin membuat breadcrumb di WordPress dengan cara yang kami bagikan, Anda bisa menggunakan tema yang sudah support seperti Astra. Kalau begitu, langsung masuk ke tahapan berikut ini, yuk!
- Pilih menu Appearance > Customize pada menu bar.
- Pilih menu Breadcrumb.
- Pada tab General, pilih posisi breadcrumb sesuai keinginan di bagian Header Position. Misalnya di sini kami memilih posisi After header.
- Akan muncul setting-an lanjutan di bawahnya. Untuk bagian Breadcrumb Source bisa pilih Breadcrumb NavXT.Â
- Sedangkan, untuk bagian Separator dan Alignment bisa sesuaikan dengan keinginan Anda.
- Scroll halaman ke bawah, Anda akan menemukan bagian Display Settings. Silahkan klik pada halaman yang tidak ingin Anda pasang breadcrumb.
- Jika sudah, klik tab Design di bagian atas. Lalu, sesuaikan pengaturan untuk tampilan dari breadcrumb website sesuai keinginan.
- Jika semua sudah sesuai, klik Publish.
Langkah 3 –Â Gunakan Plugin SEO
Sebenarnya kamu tidak perlu repot lagi untuk membuat breadcrumb jika menggunakan plugin Optimasi SEO seperi Rankmath Seo dan Yoast Seo kamu tinggal lakukan beberapa setting di plugin tersebut, dan tinggal meletakkan script yang sudah mereka sediakan.
2. Membuat Breadcrumbs di WordPress Tanpa Plugin
Sebelum eksekusi tutorial ini, ada baiknya kamu melakukan backup data, mana tau terjadi kesalahan yang tidak kamu ketahui. Untuk backup data kamu baca Cara Backup dan Restore WordPress Dengan UpdraftPlus.
- Bukalah editor tema kamu, bisa kamu akses melalui tampilan>penyunting tema>functions.php
- copy dan letakkan script dibawah ini.
/**
* Fungsi untuk menampilkan breadcrumbs
* ditaruh di functions.php
* https://trenpedia.com/
*/
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>"';
}
}3. Terakhir, kamu tinggal copy <?php get_breadcrumb(); ?> di single.php atau page.php.
Script diatas adalah script sederhana yang dapat kamu gunakan di wordpress. Untuk penyesuaian atau mempercantik tampilan, kamu dapat menambahkan css, tapi menurut saya itu sudah lebih dari cukup.
Jika sudah berhasil, maka tampilan breadcrumb akan seperti gambar dibawah ini.
Script css untuk mempercantik tampilan breadcrumb. sebagai contoh saja ya.
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}jika kamu menggunakan css kamu dapat memanggil breadcrumb dengan menggunakan script dibawah ini.
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>Script diatas terdapat pemanggilan class breadcrumb yang mana itu merupakan ccs yang telah kita buat sebelumnya. letakkan sript diatas di tempat yang sama yaitu single.php atau page.php
Silahkan kamu kembangkan lagi jika dirasa masih kurang, itu saja dulu tutorial cara membuat breadcrumb wordpress tanpa plugin atau mengguanakan script
3. Membuat Breadcrumbs di WordPress Menggunakan Tema
Penjelasan mengenai hal ini, kami sajikan secara lebih lengkap di artikel “Tema WordPress SEO Friendly“. Apabila anda membutuhkan tema sebagaimana disampaikan dalam artikel tersebut, anda dapat menghubungi kami untuk memperoleh harga jual tema WordPress murah.
Cara Membuat Breadcrumbs di Blogspot/Blogger
1. Cara Memasang Breadcrumb di Blogger Menggunakan Microdata HTML Schema.org
Kelebihan dari cara ini yaitu Breadcrumbnya akan muncul di halaman dan dapat memberikan informasi navigasi halaman tidak hanya kepada mesin pencari tetapi juga pengunjung blog. Adapun kekurangannya yaitu proses pemasangannya yang tahapannya lebih panjang.
Ikuti langkah berikut ini untuk membuatnya,
1. Buka Edit HTML Tema blog mu
2. Cari kode <b:includable id=’comment-form’ var=’post’>
3. Letakkan kode berikut ini DI ATAS <b:includable id=’comment-form’ var=’post’>
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.pageType == "item"'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'> <span itemprop='name'>Home</span></a> <meta content='1' itemprop='position'/> </span> <svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg> <b:loop index='num' values='data:post.labels' var='label'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:label.url + "?&max-results=16"' expr:title='data:label.name' itemprop='item'> <span itemprop='name'><data:label.name/></span> </a> <meta expr:content='data:num+2' itemprop='position'/> </span> <b:if cond='data:label.isLast != "true"'> <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg> </b:if> </b:loop> <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg> <span><data:post.title/></span> </div> </b:if> </b:loop> </b:if> </b:includable>
Apabila sebelumnya sudah ada kode sejenis, silahkan ganti dengan kode diatas ya.
4. Letakkan CSS berikut ini DI ATAS kode <style> atau ]]></b:skin>
/* Breadcrumb */ .breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap} .breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400} .breadcrumbs a:hover{color:#11589D} .breadcrumbs svg{width:16px;height:16px;vertical-align:-4px} .breadcrumbs svg path{fill:#666}
5. Letakkan kode berikut ini di lokasi yang kamu ingin kan untuk menampilkan Breadcrumb,
<b:include data='posts' name='breadcrumb'/>
Biasanya, Breadcrumb dimunculkan di bagian atas artikel. Untuk itu, kamu dapat meletakkannya di bawah kode <b:includable id=’main’ var=’top’>.
6. Simpan Tema
2. Cara Memasang Breadcrumb di Blogger Menggunakan JSON-LD
Untuk yang satu ini, cara pemasangannya cukup mudah dan tanpa menggunakan HTML ataupun CSS apapun yang berpengaruh pada halaman blog. Hanya saja, Breadcrumb ini tidak tampil di halaman blog. Jadi, hanya mesin pencari saja yang dapat mengakses navigasinya.
Cara membuatnya seperti berikut ini,
1. Buka Edit HTML Tema blog
2. Cari kode <data:post.body/>
3. Letakkan script berikut ini dibawahnya
-
<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'> { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if> ] }</script>
4. Simpan Tema
Validasi Breadcrumb
Setelah kamu memasang Breadcrumb, pastikan bahwa Breadcrumb tersebut dapat dibaca oleh mesin pencari. Salah satu caranya adalah dengan memanfaatkan Google Search Console. Ikuti langkah berikut ini,
1. Buka Google Search Console
2. Uji salah satu alamat URL artikel blog mu
3. Apabila breadcrum valid, maka akan muncul tampilan seperti ini
4. Kamu dapat melihat detailnya yang kurang lebih seperti ini,
5. Apabila sudah sesuai, maka Breadcrumb situs mu sudah valid dan terstruktur dengan baik
Selain menggunakan Google Search Console, kamu juga dapat memvalidasinya menggunakan Google Rich Result.
Penutup
Seperti itulah cara membuat Breadcrumb di Blogger untuk optimalisasi SEO blog mu. Semoga artikel ini bisa bermanfaat ya.
