Tema NOUI pada Blogger memiliki tampilan minimalis dan modern, namun tidak menyertakan fitur breadcrumb secara bawaan. Oleh karena itu, untuk membantu Google dalam mengenali struktur halaman dan meningkatkan SEO, kita dapat menambahkan fitur breadcrumb secara manual, disertai dengan JSON-LD agar terbaca sebagai struktur terstruktur (structured data).
Langkah-Langkah Penerapan:
1. Menambahkan HTML Breadcrumb Manual
Tambahkan HTML berikut secara manual di bagian atas setiap postingan atau halaman statis Anda (di Editor Post). Gunakan format seperti:
<div id="custom-breadcrumb">
<nav class="breadcrumb_template mb-2 flex w-full flex-row items-center justify-start text-sm">
<a href="https://rezalubis.com/">Home</a> ›
<a href="https://rezalubis.com/search/label/Pendidikan%20Islam">Pendidikan Islam</a>
</nav>
</div>Anda dapat menyesuaikan link dan label kategori sesuai kebutuhan.
2. Menambahkan Kode JSON-LD untuk Breadcrumb
Untuk memastikan breadcrumb dikenali oleh Google, tambahkan skrip berikut ke dalam widget HTML atau footer:
<script>
document.addEventListener("DOMContentLoaded",function(){
let t=[],e=1,n=document.querySelector("#custom-breadcrumb nav")||document.querySelector(".breadcrumb_template");
if(n){
n.querySelectorAll("a").forEach(l=>{
t.push({
["@type"]:"ListItem",
position:e++,
name:l.textContent.trim(),
item:l.href
});
})
}
t.push({
["@type"]:"ListItem",
position:e,
name:document.title,
item:window.location.href
});
const s={
["@context"]:"https://schema.org",
["@type"]:"BreadcrumbList",
itemListElement:t
},
c=document.createElement("script");
c.type="application/ld+json",
c.textContent=JSON.stringify(s),
document.head.appendChild(c);
});
</script>3. Penanganan Fallback (Jika Tidak Ada Custom Breadcrumb)
Kode di atas akan otomatis membaca struktur breadcrumb dari elemen dengan class `breadcrumb_template` atau `#custom-breadcrumb`. Jika pengguna lupa menambahkan breadcrumb manual, sistem akan tetap memunculkan struktur dari Label default, sehingga Google tetap dapat membaca struktur artikel Anda.
4. Uji Coba
Pastikan untuk menguji setiap halaman Anda menggunakan [Google Rich Results Test](https://search.google.com/test/rich-results) untuk melihat apakah struktur breadcrumb terbaca dengan benar.
5. Catatan Tambahan
- Pastikan Anda tidak menduplikasi JSON-LD breadcrumb jika ada lebih dari satu versi.
- Hindari menyisipkan kode JSON ganda dalam satu halaman untuk mencegah error.
Penutup:
Dengan menerapkan panduan ini, blog berbasis tema NOUI akan lebih optimal dalam struktur SEO dan dapat memberikan navigasi yang lebih jelas kepada pembaca.