Cara Membuat Breadcrumb di WordPress Tema Generatepress

Mustakim ID

Cara Membuat Breadcrumb di WordPress Tema Generatepress
Cara Membuat Breadcrumb di WordPress Tema Generatepress

Dalam dunia SEO, khususnya SEO onpage, Breadcrumb menjadi salah satu elemen penting yang harus diperhatikan dengan baik lho. Karena fitur ini dapat mempermudah user memahami posisi halaman web yang sedang mereka lihat.

Bagi pengguna theme Generatepress, fitur Breadcrumb ini biasanya ada pada fitur “elemen”. Masalahnya, kadang Breadcrumb yang ada di elemen theme tersebut suka hilang, baik karena tidak sengaja terhapus ataupun karena kesalahan lainnya.

Apabila hal tersebut sampai terjadi, kamu gak perlu panik.

Karena Breadcrumb di GeneratePress ini bisa dibuat dengan mudah. Kamu bisa gunakan bantuan plugin seperti Rankmath dan Yost.

Tapi apabila kamu belum memahami cara membuat Breadcrumb di WordPress, khususnya untuk tema Generatepress, kamu bisa baca artikel ini.

Di sini sudah saya tuliskan panduan lengkap cara membuat dan menambahkan Breadcrumb ke tema GeneratePress dengan mudah.

Yuk baca lanjut!

Apa itu Breadcrumb?

Buat kamu yang masih pemula dalam dunia website dan SEO, mungkin belum paham secara mendalam tentang Breadcrumb. Sebelum membuatnya, mari kita pahami dulu dari definisinya.

Breadcrumb adalah elemen navigasi pada sebuah website yang membantu pengguna mengetahui lokasi mereka dalam struktur situs. Biasanya, breadcrumb ditampilkan dalam bentuk jalur hierarki di bagian atas halaman, seperti:

Beranda > Kategori > Sub kategori > Halaman Saat Ini

Bagi kamu yang memanfaatkan website untuk kegiatan marketing online ataupun membuat website untuk tujuan apa pun, baiknya website yang kamu bangun itu menampilkan Breadcrumb.

Bukan cuma karena bagus dari sisi SEO, tapi hal ini juga membantu user melihat navigasi halaman yang sedang dia lihat.

Cara Membuat Breadcrumb di WordPress

Seperti yang sudah saya katakan sebelumnya, cara membuat Breadcrumb di WordPress ini bisa menggunakan beberapa cara. Mulai dari dengan menggunakan bantuan plugin ataupun tanpa menggunakan plugin.

Berikut beberapa cara yang bisa kamu gunakan:

1. Menggunakan Plugin Rankmath

Jika kamu menggunakan plugin Rankmath, coba ikuti langkah-langkah berikut:

Aktifkan dulu fitur Breadcrumb:

  • Login ke wp-admin
  • Pilih menu Rankmath
  • Pilih pengaturan umum
  • Klik Breadcrumb
  • Aktifkan (on) fitur Breadcrumb tersebut
  • Pilih karakter pemisah misalnya pakai », | atau – (pilih sesuai keinginan sendiri)
  • Tampilkan tautan beranda » On
  • Label beranda pilih On
  • Tautan beranda » https://hallokim.com/ gunakan sesuai dengan domain blog atau web yang kamu miliki
  • Untuk fitur lainnya, biarkan default saja
  • Klik simpan

Menambahkan Breadcrumb ke tema Generatepress:

  • Login ke wp-admin
  • Pilih tampilan » Generatepress
  • Aktifkan fitur elements
Cara Membuat Breadcrumb di WordPress Tema Generatepress
  • Kemudian pilih lagi menu tampilan » elements
  • Klik add new elements di bagian atas kanan
  • Klik Choose element type » Hook » Create
  • Add new hook: Breadcrumb.
  • Salin fungsi Breadcrumb (kotak warna biru) dan masukan ke kolom editor
  • Setting:
    • Hook : generate_before_entry_title
    • Execute PHP: on
  • Display Rules:
    • Location: Pos » All Pos
  • Klik tombol Terbitkan

Breadcrumb selesai dibuat dan ditambahkan pada theme Generatepress. Silahkan kamu refresh halaman blognya, pasti Breadcrumb sudah muncul.

2. Menggunakan Plugin Yoast

Apabila kamu menggunakan plugin Yost SEO, kamu juga bisa membuat Breadcrumb di WordPress dan menambahkannya ke tema GeneratePress dengan mudah. Silahkan kamu ikuti langkah-langkah berikut:

Aktifkan Breadcrumb:

  • Login ke WP-admin
  • Pilih dan klik Yost
  • Klik pada menu SEO » tampilan pencarian » Breadcrumb
  • Pada menu pengaturan breadcrumbs, setting seperti ini:
    • Enable Breadcrumbs: Aktif
    • Tebalkan Laman terakhir: Regular
  • Kemudian taksonomi yang akan ditampilkan pada breadcrumbs untuk jenis konten, pilih:
    • Pos (post): Kategori
  • Klik tombol Simpan Perubahan.

Menambahkan Breadcrumb ke Tema Gemeratepress:

  • Pilih menu tampilan » Pilih elements
  • Klik add new element » Choose element type » Hook » Create
  • Add new hook: Breadcrumb
  • Salin fungsi Breadcrumb di bawah ini dan masukan ke kolom editor
  • Setting:
    • Hook : generate_before_entry_title
    • Execute PHP: on
  • Display Rules:
    • Location: Pos » All Pos
  • Klik terbitkan
  • Selesai

Tinggal buka halaman blog kamu, lalu cek apakah Breadcrumb sudah tampil atau belum. Jika tidak muncul, ulangi lagi langkah di atas, pastikan sudah sesuai urutannya.

3. Menggunakan Script Breadcrumb

Kamu bisa membuat breadcrumb di WordPress tanpa plugin dengan menambahkan kode PHP secara manual ke dalam file tema. Berikut adalah langkah-langkahnya:

3.1. Tambahkan Script Breadcrumb di functions.php

Buka file functions.php di tema WordPress kamu, lalu tambahkan kode berikut:

function custom_breadcrumb() {
    if (!is_home()) {
        echo '<nav class="breadcrumb">';
        echo '<a href="' . home_url() . '">Beranda</a> &raquo; ';
        
        if (is_category() || is_single()) {
            the_category(', ');
            if (is_single()) {
                echo " &raquo; ";
                the_title();
            }
        } elseif (is_page()) {
            echo the_title();
        } elseif (is_archive()) {
            echo post_type_archive_title();
        } elseif (is_search()) {
            echo 'Hasil pencarian untuk: "' . get_search_query() . '"';
        }
        
        echo '</nav>';
    }
}

3.2. Panggil Breadcrumb di header.php atau single.php

Sekarang, panggil fungsi breadcrumb ini di dalam file header.php, single.php, atau page.php, tergantung di mana kamu ingin breadcrumb muncul. Tambahkan kode berikut:

<?php custom_breadcrumb(); ?>

3.3. Tambahkan CSS untuk Styling Breadcrumb (Opsional)

Agar breadcrumb tampil lebih rapi, tambahkan CSS berikut ke dalam file style.css:

.breadcrumb {
    font-size: 14px;
    margin-bottom: 15px;
}
.breadcrumb a {
    text-decoration: none;
    color: #0073aa;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

Dengan cara ini, kamu bisa menampilkan breadcrumb di WordPress tanpa perlu menggunakan plugin.

Fungsi dan Manfaat Breadcrumb Bagi SEO Website

Breadcrumb bukan hanya membantu navigasi pengguna, tetapi juga memiliki manfaat besar untuk SEO.

1. Fungsi Breadcrumb dalam Website

Breadcrumb berfungsi sebagai elemen navigasi yang menunjukkan struktur halaman dalam hierarki website. Contohnya:

Beranda » Blog » SEO » Fungsi Breadcrumb untuk SEO

Fungsi utama breadcrumb:

  • Memudahkan navigasi – Pengguna dapat berpindah ke halaman sebelumnya dengan lebih cepat.
  • Menampilkan struktur halaman – Menjelaskan posisi halaman dalam website.
  • Membantu pengindeksan oleh Google – Mesin pencari lebih mudah memahami hubungan antar halaman.

2. Manfaat Breadcrumb untuk SEO

2.1. Meningkatkan User Experience (UX)

Pengguna bisa dengan mudah memahami struktur website dan kembali ke kategori yang lebih tinggi tanpa perlu menekan tombol “Back”. UX yang baik dapat mengurangi bounce rate, yang berpengaruh positif terhadap SEO.

2.2. Mempercepat Crawling oleh Google

Google menyukai struktur website yang jelas. Dengan breadcrumb, Googlebot bisa lebih cepat mengindeks halaman dan memahami hubungan antar kategori dalam website.

2.3. Menambah Tampilan Rich Snippet di SERP

Google sering menampilkan breadcrumb di hasil pencarian sebagai pengganti URL. Ini membuat tampilan website lebih menarik dan meningkatkan click-through rate (CTR).

Contoh Breadcrumb di Google SERP:
Beranda > Blog > SEO
Ini lebih bersih dan jelas dibandingkan URL panjang seperti:
domain.com/kategori/subkategori/judul-artikel/

2.4. Mengurangi Bounce Rate

Breadcrumb membantu pengguna menemukan halaman relevan lainnya dalam website. Jika mereka tidak menemukan informasi yang dicari, mereka lebih cenderung berpindah ke halaman lain daripada langsung keluar dari website.

2.5. Memperkuat Internal Linking

Breadcrumb secara otomatis menambahkan tautan internal ke kategori dan halaman lainnya, yang dapat membantu distribusi link juice untuk meningkatkan peringkat halaman di Google.

Kesimpulan

Jadi, Breadcrumb itu adalah fitur navigasi yang akan memberitahukan kepada user letak halaman yang sedang dia lihat saat itu.

Dari hal inilah Breadcrumb dianggap penting dalam dunia SEO. Bahkan praktisi SEO expert memasukkan fitur ini sebagai fitur wajib yang harus ada pada sebuah halaman web.

Cara membuat Breadcrumb di WordPress bisa dilakukan dengan banyak cara. Saya menulis 3 panduan di artikel ini. Ini yang menurut saya paling mudah dan praktis. Bisa dilakukan dengan menggunakan plugin Rankmath maupun Yoast.

Adapun jika kamu tidak ingin menggunakan plugin karena khawatir memakan banyak resource hosting kamu juga bisa menggunakan script Breadcrumb. Di atas sudah saya tulis juga panduan lengkapnya.

Silahkan dibaca seteliti mungkin. Buat yang sudah membaca artikel ini, saya ucapkan terima kasih dan semoga bermanfaat.

"Ingin dibuatkan konten artikel seperti ini? Order di sini yuk!"

Tags

Related Post

Order artikel SEO di Hallokim sekarang! Ada promo menarik hari ini!