Generator Schema dan HTML Breadcrumb
Buat data terstruktur BreadcrumbList dan HTML breadcrumb yang aksesibel (nav, ol, aria-current) dari daftar nama halaman dan URL. JSON-LD siap salin.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cold Brew Guide",
"item": "https://example.com/blog/cold-brew"
}
]
}
</script><nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav>Apa itu Generator Breadcrumb?
Generator ini mengubah daftar item breadcrumb (nama + URL, dari beranda hingga halaman saat ini) menjadi dua output: JSON-LD BreadcrumbList schema.org untuk mesin pencari dan markup HTML yang aksesibel untuk pengunjung.
Cara menggunakan Generator Breadcrumb
- Edit item-itemnya: satu baris per tingkat berisi nama dan URL absolutnya.
- Tambah atau hapus baris; baris terakhir adalah halaman saat ini dan boleh tanpa URL.
- Atur aria-label elemen navigasi dalam bahasa situs Anda.
- Salin blok JSON-LD dan HTML ke halaman Anda.
Contoh
Home → Blog → Cold Brew Guide
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav> Kapan menggunakan Generator Breadcrumb
Gunakan untuk halaman yang menampilkan jejak breadcrumb, terutama pada struktur situs yang dalam seperti toko online atau dokumentasi. Data terstrukturnya harus sesuai dengan breadcrumb yang terlihat di halaman. Atur pemisahnya dengan CSS alih-alih menambahkan karakter ke markup.
Cara kerja Generator Breadcrumb
Setiap baris yang tidak kosong menjadi ListItem dengan posisi berbasis 1, nama, dan URL item (dihilangkan jika kosong). HTML-nya berupa <nav aria-label> yang berisi daftar berurutan; item sebelumnya berupa tautan dan item terakhir mendapat aria-current="page", mengikuti pola breadcrumb WAI-ARIA. Nama dan URL di-escape HTML; URL relatif memicu peringatan karena data terstruktur sebaiknya memakai URL absolut.
Kasus Penggunaan Umum
- Menambahkan hasil kaya breadcrumb ke halaman kategori dan produk.
- Membuat HTML breadcrumb yang aksesibel untuk situs dokumentasi.
- Mengganti breadcrumb yang memakai pemisah teks biasa dengan markup semantik.
- Membuat markup untuk situs statis tanpa plugin breadcrumb.
Pertanyaan Umum
Apakah item terakhir memerlukan URL?
Tidak. Google mengizinkan halaman saat ini tanpa item; URL tetap disertakan di sini jika Anda mengisinya.
Apakah markup breadcrumb menjamin breadcrumb muncul di hasil pencarian?
Tidak. Markup ini membantu mesin pencari memahami struktur situs dan membuat hasil Anda layak menampilkan jalur bergaya breadcrumb, tetapi Google yang menentukan apa yang ditampilkan.
Bisakah satu halaman memiliki beberapa jejak breadcrumb?
Bisa, tambahkan satu BreadcrumbList per jejak jika halaman bisa dicapai melalui beberapa jalur.