💡 ULASAN & REFERENSI • DIPERBARUI: 23 October 2026 • REDAKSI AZWINN

Implementasi Breadcrumbs Schema: Panduan Teknis & Kode JSON-LD

Implementasi Breadcrumbs Schema adalah penerapan struktur data berbasis schema.org (biasanya menggunakan format JSON-LD atau Microdata) pada halaman website untuk memperjelas hierarki navigasi bagi mesin pencari seperti Google. Dengan kode ini, Google dapat menampilkan jalur navigasi situs secara langsung pada hasil pencarian (SERP), yang terbukti meningkatkan rasio klik (CTR) dan membantu mesin pencari memahami struktur situs secara mendalam.

Secara teknis, penerapan breadcrumbs membutuhkan markup yang konsisten di setiap halaman turunan, mulai dari halaman beranda, kategori, hingga halaman produk atau artikel spesifik. Berikut adalah tabel perbandingan metode penerapan schema breadcrumbs yang umum digunakan oleh web developer:

Metode Schema Kelebihan Kekurangan Rekomendasi Penggunaan
JSON-LD Kode terpisah dari HTML, mudah dikelola, direkomendasikan Google. Tidak langsung terlihat di elemen DOM visual halaman. Sangat disarankan untuk semua CMS modern (WordPress, React, dll).
Microdata Menyatu langsung dengan tag HTML elemen navigasi. Membuat kode HTML lebih rumit dan rentan rusak saat perubahan desain. Hanya jika diperlukan oleh struktur template legasi tertentu.
RDFa Fleksibel untuk dokumen semantik kompleks. Jarang digunakan dalam pengembangan web standar saat ini. Tidak disarankan untuk situs web komersial standar.

Sintaks Kode JSON-LD BreadcrumbList

Format standar yang paling direkomendasikan oleh Google adalah JSON-LD karena diletakkan di dalam tag <script> pada bagian <head> atau di dalam tubuh dokumen HTML. Berikut adalah contoh penerapan nyata untuk halaman produk atau artikel:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Beranda",
      "item": "https://www.contoh.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Kategori",
      "item": "https://www.contoh.com/kategori"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Judul Halaman",
      "item": "https://www.contoh.com/kategori/halaman"
    }
  ]
}
</script>

Langkah-Langkah Implementasi Teknis

Untuk memastikan mesin pencari merayapi dan membaca struktur data breadcrumbs dengan benar, ikuti tahapan teknis berikut:

  1. Petakan Hierarki URL: Pastikan struktur URL situs Anda selaras dengan jalur navigasi visual (contoh: domain.com/kategori/sub-kategori/produk).
  2. Buat Elemen Visual Navigasi: Sediakan elemen UI breadcrumb di halaman web menggunakan HTML standar (misalnya menggunakan tag <nav> dan <ol>) agar pengguna dapat melihat jalur mereka.
  3. Sisipkan Skrip JSON-LD: Tambahkan skrip terstruktur sesuai contoh di atas, pastikan atribut position berurutan mulai dari angka 1 dan seterusnya tanpa loncatan.
  4. Validasi Menggunakan Tools Resmi: Uji halaman menggunakan Schema Markup Validator atau Google Rich Results Test untuk memastikan tidak ada error atau peringatan (warnings).

Troubleshooting dan Validasi Lapangan

Kendala yang sering terjadi saat implementasi meliputi ketidaksesuaian antara URL visual dengan properti item di dalam skrip, atau penomoran position yang terbalik. Pastikan setiap URL menggunakan protokol yang sama (HTTPS konsisten) dan tidak mengarah ke halaman yang menghasilkan pengalihan (redirect 301/302) yang berlebihan. Jika Google belum menampilkan breadcrumbs di SERP meskipun validasi lolos, hal tersebut umumnya disebabkan oleh waktu perayapan ulang (re-crawling) halaman yang memerlukan waktu beberapa hari hingga minggu.

🔍 Orang Lain Juga Mencari Ini