Breadcrumbs Baru Blogger Yang Valid Schema.org

  • Diterbitkan pada
  • January 23, 2020
  • Diposkan oleh
  • Eka Awaludin
Lokasi: Maja, Kabupaten Majalengka, Jawa Barat, Indonesia
Dengan meningkatnya penggunaan dan popularitas schema.org Google memutuskan untuk memfokuskan pengembangan kepada struktur data tersebut. Di postingan kali ini saya akan memberikan tutorial memasang Breadcrumbs baru yang valid schema.org. Namun sebelumnya saya juga akan memberikan tutorial buat yang udah memasang Breadcrumbs namun mendapatkan error di google search console. Yang sebelumnya breadcrumbs nya ada kode vocabulary.org nya pasti mendapatkan email yang memberitahukan kalau ada yang error di struktur data breadcrumbs nya seperti berikut ini:
data-vocabulary.org schema deprecated
Jangan panik manteman, disini saya akan berbagi tutorial cara memperbaikinya. Oke, mungkin dengan melihat gambar di bawah ini para master bisa langsung paham kode mana yang harus diganti.

vocabulary.org

schema.org

Gambar ini saya dapatkan langsung dari blog Google Webmasters.

Hapus Markup vocabulary.org Dan Ganti Dengan Markup schema.org

Saya akui kalau saya mendapatkan kode Breadcrumbs ini dari Google, tapi saya sudah lupa lagi sumbernya. Saya yakin kode ini di pakai oleh banyak orang, tidak menutup kemungkinan jika kalian juga memakai kode Breadcrumbs ini.
Oke pertama, di breadcrumbs kalian coba temukan kode seperti berikut ini:
Ganti Dengan kode di bawah ini.
Save template dan kita bisa melihat hasilnya di Rich Result Test atau di Structured Data Testing Tool. Jangan lupa memasukan halaman postingan kalian, jangan halaman homepage.
Hasil test dari Rich Result
Breadcrumb valid di Structured Data Testing Tool

Cara Memasang Breadcrumbs di Blog

Tutorial ini ditujukan untuk yang belum memasang Breadcrumbs sama sekali di blog nya. Pertama masuk ke Edit HTML, lalu sisipkan style ini di bagian style template kamu.
/* Breadcrumbs */
.breadcrumbs {
  overflow: hidden;
  padding: 8px 25px;
  text-transform: none;
  color: #fff;
  font-size: 13px;
  background-color: #4b515d;
}

.breadcrumbs a,
.breadcrumbs a:link {
  transition: all 200ms ease-in-out 0s;
  color: #ddd;
  text-decoration: none;
}

.breadcrumbs a:visited {
  color: #ddd;
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:visited:hover {
  color: #fff;
  text-decoration: underline;
}
Kemudian, cari kode berikut ini.
Kemudian tempel kode berikut ini sebelum atau di atas kode tersebut.
Dari pengalaman saya, kita akan menemukan dua buah kode seperti itu. Lewati kode yang pertama dan simpan kode di bawah ini setelah atau di bawah kode yang kedua.
Save template. Breadcrumb akan muncul di bawah postingan, kamu tinggal menyesuaikan nya seperti yang kamu inginkan. Mohon maaf apabila ada kekurangan, apabila ada yang kurang jelas dan ingin di tanyakan bisa di tulis di kolom komentar.
Click to Expand