Image LinkSEO On Page
Image LinkSEO Off Page
Image LinkTechnical SEO
Home WordPress Cara Membuat Breadcrumb di WordPress Terbaru 2026

Cara Membuat Breadcrumb di WordPress Terbaru 2026

Updated on March 24, 2026 . 7 min read

Wepotus.com – Cara membuat breadcrumb di WordPress bisa dilakukan dengan tiga pendekatan utama: tanpa plugin (kode manual), menggunakan plugin SEO modern (Yoast, Rank Math, AIOSEO), atau memanfaatkan fitur bawaan tema. Masing‑masing metode punya kelebihan dalam hal kecepatan, kemudahan, dan fleksibilitas SEO.​

Apa Itu Breadcrumb dan Kenapa Penting?

Breadcrumb adalah navigasi sekunder yang menampilkan posisi halaman di dalam struktur situs, misalnya: Beranda > Blog > Cara Membuat Breadcrumb di WordPress Terbaru 2026. Elemen ini biasanya muncul di atas judul artikel atau tepat di bawah header.​

Manfaat utama breadcrumb:

  • Memudahkan pengunjung berpindah naik ke kategori/halaman induk hanya dengan satu klik, sehingga mengurangi bounce rate.​
  • Membantu Google memahami hierarki konten dan URL, sehingga mendukung internal linking dan dapat memicu tampilan breadcrumb di SERP (rich result).​

Jenis Breadcrumb yang Relevan untuk WordPress 2026

Sebelum memilih cara membuat breadcrumb di WordPress, pahami dulu jenis breadcrumb yang umum digunakan:

  • Location-based / Hierarchy breadcrumb
    Menampilkan struktur halaman atau kategori, contoh: Beranda > Blog > SEO > Artikel. Ini paling umum untuk blog dan website bisnis.​
  • Category / Taxonomy breadcrumb
    Fokus pada kategori dan subkategori, sangat cocok untuk blog yang punya struktur kategori yang dalam, serta toko online WooCommerce.​
  • Attribute-based breadcrumb
    Populer di eCommerce, misalnya: Beranda > Laptop > Intel i7 > RAM 16GB. Untuk WordPress, tipe ini biasa dihasilkan oleh plugin toko online dan filter produk.​

Untuk kebanyakan situs WordPress 2026 (blog, company profile, portal berita), location-based dan category breadcrumb sudah cukup untuk UX dan SEO.

Cara Membuat Breadcrumb di WordPress Tanpa Plugin

Metode ini ideal untuk yang ingin website tetap ringan, menghindari terlalu banyak plugin, dan punya kontrol penuh lewat kode. Di 2026, praktik ini masih relevan terutama untuk tema custom atau child theme.​

1. Tambahkan Fungsi Breadcrumb di functions.php

Masuk ke:

  • Dashboard > Appearance > Theme File Editor.
Cara Membuat Breadcrumb di WordPress 2026
  • Pilih tema aktif (disarankan pakai child theme), lalu buka functions.php.

Tambahkan kode ini di bagian paling bawah:

php// Fungsi breadcrumb tanpa plugin
function get_breadcrumb() {

    // Ubah teks sesuai kebutuhan
    $home_text   = 'Beranda';
    $separator   = ' » '; // karakter pemisah
    $before_last = '<span class="breadcrumb-last">'; // sebelum item terakhir
    $after_last  = '</span>'; // setelah item terakhir

    echo '<nav class="breadcrumb" aria-label="Breadcrumb">';
    echo '<a href="' . home_url() . '">' . $home_text . '</a>' . $separator;

    if ( is_category() ) {

        single_cat_title();

    } elseif ( is_single() ) {

        $category = get_the_category();
        if ( ! empty( $category ) ) {
            $cat_link = get_category_link( $category[0]->term_id );
            echo '<a href="' . esc_url( $cat_link ) . '">' . esc_html( $category[0]->name ) . '</a>' . $separator;
        }
        echo $before_last . get_the_title() . $after_last;

    } elseif ( is_page() && ! is_front_page() ) {

        global $post;
        if ( $post->post_parent ) {
            $parent_id   = $post->post_parent;
            $breadcrumbs = array();

            while ( $parent_id ) {
                $page          = get_page( $parent_id );
                $breadcrumbs[] = '<a href="' . get_permalink( $page->ID ) . '">' . get_the_title( $page->ID ) . '</a>';
                $parent_id     = $page->post_parent;
            }

            $breadcrumbs = array_reverse( $breadcrumbs );
            foreach ( $breadcrumbs as $crumb ) {
                echo $crumb . $separator;
            }
        }
        echo $before_last . get_the_title() . $after_last;

    } elseif ( is_search() ) {

        echo $before_last . 'Hasil pencarian: "' . get_search_query() . '"' . $after_last;

    } elseif ( is_tag() ) {

        echo $before_last . 'Arsip tag: ' . single_tag_title( '', false ) . $after_last;

    } elseif ( is_author() ) {

        $userdata = get_userdata( get_query_var( 'author' ) );
        echo $before_last . 'Artikel oleh: ' . $userdata->display_name . $after_last;

    } elseif ( is_404() ) {

        echo $before_last . 'Halaman tidak ditemukan' . $after_last;

    } elseif ( is_home() || is_front_page() ) {

        echo $before_last . 'Blog' . $after_last;

    }

    echo '</nav>';
}

Fungsi ini sudah menangani berbagai kondisi: kategori, single post, page bertingkat (parent–child), hasil pencarian, tag, author, 404, dan halaman blog utama.​

2. Panggil Fungsi Breadcrumb di Template

Setelah fungsi aktif, tampilkan breadcrumb di posisi yang diinginkan.

Contoh di single.php (artikel):

  • Buka single.php.
  • Cari bagian judul (misal <h1 class="entry-title">).
  • Sisipkan kode berikut di atas judul:
php<?php if ( function_exists( 'get_breadcrumb' ) ) : ?>
    <div class="breadcrumb-wrapper">
        <?php get_breadcrumb(); ?>
    </div>
<?php endif; ?>

Contoh di page.php (halaman statis):

  • Buka page.php dan letakkan snippet yang sama sebelum judul halaman.

Contoh global di header.php (muncul di semua halaman kecuali beranda):

php<?php if ( function_exists( 'get_breadcrumb' ) && ! is_front_page() ) : ?>
    <div class="breadcrumb-wrapper">
        <?php get_breadcrumb(); ?>
    </div>
<?php endif; ?>

Dengan pola ini, cara membuat breadcrumb di WordPress terbaru 2026 tanpa plugin menjadi jelas dan terstruktur.​

3. Tambahkan CSS untuk Styling Breadcrumb

Agar tampilan breadcrumb rapi dan konsisten dengan desain modern 2026, tambahkan CSS:

  • Buka Appearance > Customize > Additional CSS, atau edit style.css.​

Gunakan CSS dasar berikut:

css.breadcrumb-wrapper {
    margin: 10px 0 20px;
}

.breadcrumb {
    font-size: 14px;
    line-height: 1.4;
    color: #666666;
}

.breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-last {
    font-weight: 600;
    color: #333333;
}

CSS ini mengatur jarak, ukuran font, warna link, efek hover, dan penekanan pada halaman yang sedang aktif sehingga breadcrumb mudah dibaca di desktop maupun mobile.​

Cara Membuat Breadcrumb di WordPress dengan Plugin SEO Terbaru 2026

Untuk user non-teknis, cara membuat breadcrumb di WordPress terbaru 2026 paling praktis adalah memakai plugin SEO modern yang sekaligus mengurus schema markup.

1. Yoast SEO (Update 2025–2026)

Yoast masih jadi plugin populer dengan fitur breadcrumb yang stabil.​

  • Aktifkan:
    Masuk ke Yoast SEO > Settings > Advanced > Breadcrumbs, aktifkan Enable breadcrumbs.​
  • Atur:
    • Separator (misal >).
    • Anchor text homepage.
    • Prefix untuk arsip, search, dan 404.​
  • Tampilkan:
    • Tambahkan di template:
      <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?>
      di single.php, page.php, atau header.php.​

Keunggulan: output sudah memakai schema JSON-LD sehingga mudah dibaca Google.​

2. Rank Math (Favorit untuk Tema Modern)

Rank Math banyak dipakai pada tema block dan builder modern di 2026.​

  • Aktifkan:
    Rank Math > General Settings > Breadcrumbs, aktifkan toggle Breadcrumbs.​
  • Atur label home, separator, tampilan judul terakhir, dan archive options.​
  • Tampilkan:
    • Shortcode [rank_math_breadcrumb] di konten.
    • Atau kode template:
      <?php if ( function_exists( 'rank_math_the_breadcrumbs' ) ) rank_math_the_breadcrumbs(); ?>.​

Keunggulan: integrasi bagus dengan Elementor, Gutenberg block, dan schema otomatis.

3. AIOSEO & Plugin Breadcrumb Khusus

All in One SEO juga menyediakan modul breadcrumb yang mudah diaktifkan:​

  • AIOSEO > Search Appearance > Breadcrumbs, aktifkan lalu atur prefix, separator, dan opsi home.​
  • Gunakan block, widget, shortcode [aioseo_breadcrumbs], atau PHP aioseo_breadcrumbs() di template.​

Alternatif 2026: Breadcrumb NavXT dan plugin sejenis, yang fokus breadcrumb saja dan menawarkan kontrol HTML sangat detail.​

Cara Membuat Breadcrumb di WordPress dari Fitur Bawaan Tema

Beberapa tema WordPress terbaru (terutama tema WooCommerce dan tema block modern) sudah membawa pengaturan breadcrumb di Customizer atau Site Editor.​

Langkah umum:

  • Buka Appearance > Customize (untuk classic theme) atau Appearance > Editor (Site Editor) untuk full site editing.
  • Cari pengaturan bertuliskan Breadcrumbs, Layout > Breadcrumbs, atau di bagian Blog/Single Post.​
  • Aktifkan tampilan breadcrumb dan atur:
    • Lokasi (di atas judul, di bawah header, di atas konten).
    • Separator.
    • Halaman mana saja yang menampilkan breadcrumb (single, page, archive).​

Jika tema sudah menyediakan breadcrumb, Anda bisa menghindari plugin tambahan dan cukup fokus pada pengaturan struktur kategori dan URL agar trail yang muncul tetap logis.

Best Practice SEO Breadcrumb 2026

Supaya cara membuat breadcrumb di WordPress benar‑benar optimal untuk SEO:

  • Gunakan satu sistem breadcrumb saja (plugin atau tema), jangan dobel.​
  • Pastikan struktur kategori dan halaman hierarkis, bukan acak, agar breadcrumb mudah dimengerti user dan bot.​
  • Tes tampilan di mobile dan desktop, pastikan tidak overflow dan masih terbaca di layar kecil.​
  • Cek schema breadcrumb dengan Rich Results Test atau alat inspeksi URL di Google Search Console.​

Dengan kombinasi panduan manual tanpa plugin (lengkap dengan fungsi, HTML/PHP, dan CSS) plus opsi plugin SEO terbaru, artikel “Cara Membuat Breadcrumb di WordPress Terbaru 2026” menjadi jauh lebih informatif dan bisa langsung dipraktikkan oleh pengguna pemula maupun developer.

Tagged with:
wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *

Panduan Lainnya