Jika diterjemahkan dari asal katanya dalam bahasa Inggris, breadcrumb artinya adalah remah roti. Namun, dalam search engine optimization (SEO), breadcrumb adalah elemen pada website yang berfungi sebagai navigasi.
Fungsi breadcrumb untuk memberitahukan posisi pengunjung saat berada di website. Contoh breadcrumb: home » technology » judul halaman.
Dalam SEO sendiri breadcrumb sangat penting karena memudahkan bot untuk merayapi dan indeks halaman.
Namun sayangnya di theme generatepress tidak ada fitur breadcrumb.
Jadi, Anda harus membuat sendiri. Bagaimana? Artikel ini akan menunjukkan cara membuat breadcrumb di GeneratePress dalam 4 langkah mudah.
Penting: Tutorial ini ditujukan untuk pengguna Generatepress Premium saja, karena menggunakan salah satu modul yang hanya tersedia di Generatepress Premium. Modul tersebut adalah modul Elemens.
Berikut cara mengaktifkan modul elements GeneratePress:
- Dari dashboard Admin WordPress tekan Tampilan, kemudian klik GeneratePress.
- Pada dasboard GP Premium scroll sedikit, pilih Elements kemudian klik Aktivate.
Cara Membuat Membuat Breadcrumb di GeneratePress
1. Breadcrumb SEO Rank Math
Rank Math menyediakan fitur breadcrumb secara gratis kepada pengguna nya. Jadi, kita akan menggunakan Rank Math untuk membuat breadcrumb di GeneratePress:
- Pergi ke Rank Math > Pengaturan Umum > Breadcrumbs
- Aktifkan fungsi Breadcrumbs
- Salin kode atau kode pendek Breadcrumbs yang disediakan oleh Rank Math
- Pergi ke Tampilan > Elements > Tambahkan Element Baru > Choose Element Type as Hook
- Beri nama elements Breadcrumb, Paste kode Breadcrumb dari Rank Math
- Pada Settings Hook pilih generate_before_content dan centang Execute PHP
- Pada Display Rules pilih All Singular
Lalu klik simpan - Publikasikan
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>Cek breadcrumb apakah sudah tampil dengan cara buka satu artikel di blog kamu. Nanti muncul tepat sebelum konten, biasanya di atas judul.
Sekarang kita percantik breadcrumb nya.
- Pilih Tampilan > Costumize
- Tambahkan CSS
- Paste kode berikut dan simpan:
.rank-math-breadcrumb p { padding: 10px 10px 10px 35px; margin-left: -30px; background: #fafafa; color: #5f5f5f; font-size: 14px; box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important; }2. Breadcrumb Yoast SEO
Jika Anda pengguna Yoast SEO, jangan berkecil hati. Yoast SEO juga menyediakan breadcrumb gratis. Berikut ini cara pasang breadcrumb di GeneratePress menggunakan Yoast SEO:
- Pergi ke Yoast SEO > Search Appearance > Breadcrumbs > Enable Breadcrumbs
- Pilih Post untuk ditampilkan di Breadcrumbs sebagai kategori. Untuk yang lain biarkan saja
- Pergi ke Tampilan > Elements > Tambahkan Element Baru > Choose Element Type as Hook
- Beri nama breadcrumb Yoast SEO
- Paste kode di bawah
- Pada Settings Hook pilih generate_before_content dan centang Execute PHP
- Pada Display Rules pilih All Singular
Lalu klik simpan - Publikasikan
<?php if ( function_exists('yoast_breadcrumb') ) { ?> <div class="grid-container grid-parent"> <div class="page-header"> <?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?> </div> </div> <?php } ?>Percantik breadcrumb dengan kode CSS breadcrumb Yoast SEO berikut:
#breadcrumbs { padding: 10px 10px 10px 35px; margin-left: -30px; background: #fafafa; color: #5f5f5f; font-size: 14px; box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important; }3. Breadcrumb All In SEO
Cara membuat breadcrumb di GeneratePress menggunakan All in SEO sedikit berbeda dengan cara-cara sebelumnya. Karena All In SEO gratis tidak menyediakan nya. Maka dari itu, Anda perlu plugin tambahan.
- Buka Plugin > Tambah Baru
- Cari plugin Breadcrumb NavXT
- Instal dan Aktifkan plugin
Setelah menginstal plugin, ikuti tutorial nya:
- Pergi ke Appearance > Elements > Add New Element > Select Element Type as Hook
- Berikan Judul
- Salin dan Tempel Kode Breadcrumbs SEO All in One seperti di bawah
- Buka Setting Hook dan pilih Hook ditampilkan di generate_before_content
- Centang Execute PHP
- Pada Display Rules pilih All Singular
- Lalu klik simpan
- Publikasikan
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div>Secara default judul utama untuk breadcrumb adalah nama situs yang tertulis di Settings > General sehingga kita dapat mengubah nama Site Title di breadcrumb menjadi Home dengan menggunakan kode berikut. Untuk ini, Anda perlu menginstal Plugin Code Snippets
- Sekarang pergi ke Snippets > Add New
- Copy dan Paste kode berikut
- Tekan tombol Aktifkan
add_filter('bcn_breadcrumb_title', 'my_breadcrumb_title_swapper', 3, 10); function my_breadcrumb_title_swapper($title, $type, $id) { if(in_array('home', $type)) { $title = __('Home'); } return $title; }Gunakan kode CSS ini untuk mempercantik breadcrumb all in seo:
.breadcrumbs { padding: 10px 10px 10px 35px; background: #fafafa; color: #5f5f5f; font-size: 14px; box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important; }4. Breadcrumb Slim SEO
Cara membuat breadcrumb di GeneratePress selanjutnya adalah dengan menggunakan plugin slim SEO. Ikuti paduan berikut ini sampai selesai
- Install Slim SEO
- Pergi ke Appearance > Elements > Add New Element > Choose Element Type as Hook
- Copy dan paste shortcode Slim SEO [slim_seo_breadcrumbs]
- Beri nama breadcrumb Slim SEO
- Pada Settings Hook pilih generate_before_content dan centang Execute Shortcodes
- Pada Display Rules pilih All Singular
- Publikasikan
Percantik breadcrumb slim SEO dengan CSS berikut:
.breadcrumbs { padding: 10px 10px 10px 35px; margin-bottom: 15px; background: #fafafa; color: #5f5f5f; font-size: 14px; box-shadow: rgba(23, 43, 99, .14) 0 7px 28px; }Kesimpulan
Plugin SEO manakah yang Anda gunakan untuk membuat breadcrumb di GeneratePress.
Dan apakah artikel ini membantu? Berikan jawabnya pada kolom komentar.