Cara Marketer Indonesia Pasang BreadcrumbList Schema di Next.js untuk Naikkan CTR SERP 2026

TL;DR: BreadcrumbList Schema adalah markup terstruktur yang membuat jalur navigasi (Home > Kategori > Halaman) muncul di hasil pencarian Google, menggantikan URL mentah. Pasang di Next.js 15 melalui komponen JSON-LD yang dirender server-side di layout.tsx atau di page level, tanpa library tambahan. Praktik di proyek client saya menunjukkan kenaikan CTR organik 8-15% setelah breadcrumb tampil di SERP.

Saat membangun ulang situs Yuanita Sekar di awal 2026, satu hal kecil yang sering diabaikan tapi berdampak besar adalah breadcrumb di hasil pencarian. URL panjang seperti vitoatmo.com/artikel/marketer-indonesia-pasang-breadcrumblist-schema-nextjs-2026 tidak menarik untuk dipencet. Setelah memasang BreadcrumbList Schema, jalur navigasi muncul sebagai vitoatmo.com > Artikel > Cara Marketer Indonesia..., jauh lebih mudah dibaca dan dipercaya.

Yang menarik, perubahan ini bukan soal ranking. Halaman tidak naik posisi. Yang berubah adalah daya tarik klik. Tampilan rapi di SERP membuat pengguna lebih percaya dan klik lebih banyak.

Kenapa BreadcrumbList Schema Penting

BreadcrumbList memberi tiga manfaat sekaligus. Pertama, ia menggantikan URL teknis dengan jalur navigasi yang bermakna di hasil pencarian, membantu pengguna memahami struktur situs sebelum mengklik. Kedua, ia memperkuat sinyal hierarki konten ke Google, yang relevan dengan strategi topic cluster dan otoritas tematik. Ketiga, ia mempersiapkan situs untuk fitur SERP modern seperti AI Overview yang lebih mungkin mengutip halaman dengan struktur jelas.

Implementasi di Next.js 15

Berikut komponen BreadcrumbList yang dapat digunakan ulang di seluruh situs. Komponen ini menghasilkan JSON-LD yang valid menurut spesifikasi Schema.org dan Google Search Central.

Struktur komponen menerima array item dengan name dan url lengkap. Output adalah blok <script type="application/ld+json"> yang dirender di server, sehingga Googlebot membaca markup saat crawl pertama tanpa perlu eksekusi JavaScript.

Studi Kasus Yuanita Sekar

Yuanita Sekar adalah personal brand klien yang membangun otoritas di niche personal development Indonesia. Sebelum implementasi BreadcrumbList, halaman artikelnya muncul di SERP dengan URL mentah. Setelah implementasi pada Maret 2026, breadcrumb mulai dirender Google dalam waktu 9 hari. CTR di Google Search Console naik dari 2,1% ke 2,8% untuk kueri non-branded, atau kenaikan sekitar 33% pada baseline rendah. Ranking halaman tidak berubah signifikan selama periode tersebut, sehingga kenaikan murni dari peningkatan daya tarik klik.

Validasi dilakukan dengan Rich Results Test sebelum publish, dan pemantauan rendering ulang dilakukan 7-14 hari setelahnya melalui URL Inspection di Search Console.

Pertanyaan Umum

Apakah BreadcrumbList Schema menggantikan komponen breadcrumb visual?

Tidak. Schema adalah markup terstruktur untuk crawler, sedangkan breadcrumb visual adalah komponen UI untuk pengguna. Keduanya idealnya konsisten, dengan struktur dan urutan item yang sama.

Berapa lama sampai Google merender breadcrumb di SERP?

Praktik di proyek client saya menunjukkan 7-21 hari sejak markup dideteksi. Beberapa halaman lebih cepat, tergantung frekuensi crawl dan otoritas domain.

Apakah breadcrumb yang salah struktur berbahaya?

Bisa. Jika itemListElement tidak berurutan atau URL tidak valid, Google bisa mengabaikan markup secara diam-diam. Validasi via Rich Results Test wajib sebelum publish.

Apakah perlu pasang di setiap halaman?

Tidak. Cukup di halaman yang punya hierarki bermakna, seperti artikel, project detail, kategori, dan halaman level 2 ke bawah. Halaman beranda tidak butuh.

Bagaimana cara mengukur dampaknya?

Pantau CTR di Google Search Console untuk kueri yang halamannya sudah punya breadcrumb di SERP, bandingkan periode 28 hari sebelum dan sesudah implementasi.

Penutup

Breadcrumb bukan optimasi mewah. Ia adalah pekerjaan dasar yang sering dilewati karena hasilnya tidak terlihat di dashboard analytics utama. Yang muncul di SERP adalah jalur navigasi rapi, dan yang berubah adalah kepercayaan pengguna saat mengklik. Untuk situs Next.js, implementasinya hanya butuh satu komponen kecil dan satu pemanggilan di template. Hasilnya bertahan selama struktur situs tidak berubah.