Breadcrumbs adalah elemen navigasi kecil yang biasanya terletak di bagian atas postingan blog. Selain membantu pengunjung mengetahui posisi mereka di dalam website Anda, breadcrumbs juga sangat disukai oleh mesin pencari seperti Google. Dengan menggunakan Breadcrumbs yang valid Schema.org, struktur artikel Anda akan muncul lebih rapi di hasil pencarian Google, yang tentunya dapat meningkatkan nilai SEO blog Anda.
Banyak template bawaan Blogger atau template lama belum menyertakan fitur ini secara otomatis. Oleh karena itu, dalam panduan kali ini kita akan belajar bagaimana cara memasang kode breadcrumbs yang sudah mendukung Schema Markup terbaru agar blog Anda lebih profesional dan SEO friendly.
Langkah 1: Menambahkan Kode CSS
Langkah pertama yang harus dilakukan adalah memberikan sentuhan tampilan agar breadcrumbs terlihat rapi dan tidak berantakan. Anda perlu menambahkan kode CSS berikut ini ke dalam template Anda.
Silakan buka dashboard Blogger, pilih menu Tema, klik tanda panah di samping Sesuaikan, lalu pilih Edit HTML. Cari kode </b:skin> atau </style> dan letakkan kode berikut tepat di atasnya:
/* CSS Breadcrumbs Simple */
.breadcrumbs {
padding: 10px 0;
margin-bottom: 20px;
font-size: 13px;
color: #666;
border-bottom: 1px solid #eee;
}
.breadcrumbs a {
color: #2c3e50;
text-decoration: none;
transition: all .3s;
}
.breadcrumbs a:hover {
color: #e67e22;
}
.breadcrumbs span {
margin: 0 5px;
}
Langkah 2: Memasang Kode Breadcrumbs HTML
Setelah menambahkan CSS, langkah selanjutnya adalah memasang struktur HTML breadcrumbs yang sudah mendukung Schema Markup. Tetap di halaman Edit HTML, cari kode <data:post.body/>. Biasanya kode ini ada lebih dari satu, silakan pilih yang berada di dalam lingkup postingan atau coba satu per satu.
Letakkan kode di bawah ini tepat DI ATAS kode <data:post.body/> atau di atas judul postingan <h1 class='post-title'>:
<b:if cond='data:view.isPost'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<span> » </span>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url' itemprop='item' expr:title='data:label.name'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta content='2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
<span> , </span>
</b:if>
</b:loop>
<span> » </span>
</b:if>
<span><data:post.title/></span>
</div>
</b:if>
Langkah 3: Simpan dan Verifikasi
Jika semua kode sudah terpasang, jangan lupa klik tombol Simpan (ikon disket) di pojok kanan atas. Sekarang buka salah satu artikel di blog Anda untuk melihat hasilnya. Anda akan melihat navigasi Home > Nama Label > Judul Artikel muncul di atas konten utama.
Untuk memastikan kode tersebut sudah terbaca dengan benar oleh Google, Anda bisa melakukan tes menggunakan tool resmi yaitu Google Rich Results Test. Masukkan URL postingan Anda dan pastikan tidak ada error pada bagian Breadcrumbs.
Demikian tutorial singkat mengenai cara memasang breadcrumbs valid schema markup di Blogger. Dengan menerapkan teknik ini, navigasi blog Anda menjadi lebih user-friendly dan struktur data blog Anda menjadi lebih baik di mata mesin pencari.