Cara Memasang Breadcrumbs JSON-LD untuk Blogger

breadcrumbs pada situs panduanim.com

Breadcrumbs adalah peta tautan yang ada pada halaman web dan menunjukkan hirarki pada teknik penggunaan navigasi suatu situs web. Breadcrumbs pada umumnya terletak di atas bagian konten situs web secara horizontal, berfungsi untuk menyediakan tautan kembali ke suatu halaman tertentu (misal kategori atau halaman), sehingga dengan cara memasang breadcrumbs ini diharapkan memudahkan pengguna untuk bisa mendapatkan petunjuk dari menu dan susunan situs web tersebut. Contoh yang mungkin sering kita lihat adalah seperti ini:

Home > Category > Blogging

Nah, dari sedikit contoh diatas. Kita tahu bahwa konten yang sedang ditampilkan saat mengakses situs tersebut memiliki sebuah category tertentu dan dengan kategori khusus yaitu Blogging. Pengguna yang sedang mengakses situs kita barangkali 'kepo' dan suka dengan tulisan yang kita buat, dengan kata lain mereka akan mencari konten lain yang memiliki kategori yang sama.

Fungsi Breadcrumbs

Dengan cara memasang breadcrumbs, pengguna yang sebelumnya tidak tahu mengenai halaman yang tidak ingin mereka lihat, maka mereka akan dapat dengan menemukan halaman untuk kembali atau entah kembali ke satu atau dua langkah dan mulai dari awal. Breadcrumbs sendiri bukan merupakan elemen khusus yang urgent dan harus ada di sebuah situs web, jadi nggak ada breadcrumbs pun sebenarnya juga tidak masalah.

Untuk membuat dan memasang breadcrumbs di Blogger sendiri sebenarnya ada beberapa cara. Kalian bisa memakai cara yang diberikan oleh Schema.org melalui penamaan selector pada struktur HTML, tapi kebanyakan orang kurang suka untuk mengedit sesuatu yang ribet. Maka, metode memasang breadcrumbs dengan JSON-LD ini bisa menjadi solusi yang bisa diterapkan tanpa harus ribet edit sana-sini.

For your information, kalian yang sedang mengalami masalah Data Vocabulary Schema Deprecated Breadcrumbs juga dapat mengikuti tutorial ini. Karena, cara ini sudah memakai struktur breadcrumbs dengan schema terbaru yang tentunya valid dan tidak error.

Cara Memasang Breadcrumbs dengan JSON-LD

1. Langkah yang pertama, sobat silahkan buka dashboard blogger milik sobat. Kemudian, arahkan ke menu Theme > Edit HTML

2. Cari kode berikut
<b:includable id='post' var='post'>
3. Sudah ketemu? Kalo sudah, silahkan copy dan paste kode berikut tepat dibawah <b:includable id='post' var='post'>
<b:includable id='postBreadcrumbs' var='post'>
<!-- Post Breadcrumbs -->
<b:if cond='data:view.isPost'>
<script type='application/ld+json'>{
&quot;@context&quot;: &quot;http://schema.org&quot;,
&quot;@type&quot;: &quot;BreadcrumbList&quot;,
&quot;itemListElement&quot;: [{
&quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: 1,
&quot;item&quot;: {
&quot;name&quot;: &quot;<data:messages.home/>&quot;,
&quot;@id&quot;: &quot;<data:blog.homepageUrl.canonical/>&quot;
}
},{
&quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: 2,
&quot;item&quot;: {
&quot;name&quot;: &quot;<b:if cond='data:post.labels'><data:post.labels.first.name/></b:if>&quot;,
&quot;@id&quot;: &quot;<data:post.labels.first.url.canonical/>&quot;
}
},{
&quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: 3,
&quot;item&quot;: {
&quot;name&quot;: &quot;<data:post.title/>&quot;,
&quot;@id&quot;: &quot;<data:post.url.canonical/>&quot;
}
}]
}</script>
</b:if>
<b:if cond='data:view.isPage'>
<script type='application/ld+json'>{
&quot;@context&quot;: &quot;http://schema.org&quot;,
&quot;@type&quot;: &quot;BreadcrumbList&quot;,
&quot;itemListElement&quot;: [{
&quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: 1,
&quot;item&quot;: {
&quot;name&quot;: &quot;<data:messages.home/>&quot;,
&quot;@id&quot;: &quot;<data:blog.homepageUrl.canonical/>&quot;
}
},{
&quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: 2,
&quot;item&quot;: {
&quot;name&quot;: &quot;<data:post.title/>&quot;,
&quot;@id&quot;: &quot;<data:post.url.canonical/>&quot;
}
}]
}</script>
</b:if>
</b:includable>
4. Langkah terakhir, silahkan simpan. Selesai!

Jika kalian ingin memastikan bahwa breadcrumbs sudah berhasil dipasang, kalian bisa memakai Rich Result Test dari Google.

Terima kasih!

Baca juga

Post a Comment