Breadcrumb navigation adalah elemen navigasi sekunder yang menunjukkan lokasi pengguna dalam struktur website. Nama ini berasal dari dongeng Hansel dan Gretel yang meninggalkan jejak roti.

Apa Itu Breadcrumb Navigation?

Breadcrumb adalah deretan link yang biasanya muncul di bagian atas halaman, menunjukkan hierarki halaman dari homepage hingga halaman saat ini.

Contoh:
Home > Kategori > Subkategori > Artikel Saat Ini

Jenis-Jenis Breadcrumb

1. Location-Based

Berdasarkan struktur folder atau kategori website. Paling umum digunakan.

2. Attribute-Based

Berdasarkan atribut produk atau konten. Sering digunakan di e-commerce.

3. Path-Based

Menunjukkan jalur yang sebenarnya dilalui pengguna. Kurang umum digunakan.

Manfaat untuk SEO

1. Struktur Website yang Jelas

Breadcrumb membantu search engine memahami hierarki website.

2. Internal Linking

Menambah internal links yang relevan untukSEO.

3. Rich Snippets

Google bisa menampilkan breadcrumb di hasil pencarian.

4. Mengurangi Bounce Rate

Pengguna mudah kembali ke halaman sebelumnya.

Manfaat untuk User Experience

Navigasi yang Lebih Mudah

Pengguna bisa langsung ke kategori yang diinginkan.

Orientasi yang Lebih Baik

Pengguna tahu posisi mereka di website.

Mengurangi Klik yang Tidak Perlu

Tidak harus klik tombol back berulang kali.

Cara Implementasi

Schema.org Markup

{
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Home",
    "item": "https://example.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Kategori",
    "item": "https://example.com/kategori/"
  }]
}

CSS Tips

Gunakan separator yang jelas (>, /, atau »)
Warna berbeda dari teks utama
Font size lebih kecil dari heading

Kesimpulan

Breadcrumb navigation adalah elemen penting untuk SEO dan UX. Implementasi yang benar akan membantu pengguna dan search engine memahami struktur website Anda.

Breadcrumb Navigation: Manfaat untuk SEO dan User Experience