Pindah Markup Scheme.org Mengatasi Breadcrumb Error (data-vocabulary.org schema deprecated)

data-vocabulary.org merupakan layanan yang memberikan property untuk suatu website/laman sehingga website tersebut memiliki inforasi struktur data yang sesuai menurut mesin pencari, sehingga website kita akan lebih mudah dikenali. Akan tetapi beberapa hari belakangan ini beredar informasi mengenai penutupan sepenuhnya markup data-vocabulary.org oleh Google.

Himbauan oleh Google untuk beraslih ke Schema Markup

Penutupan yang dilakukan Google beralasan untuk mengupayakan peningkatan penggunaan dan popularitas dari schema.org dengan memfokuskan pada pengembangan Struktur Data Tunggal. Oleh karena itu, markup data-vocabulary.org tidak lagi memenuhi syarat dan akan ditutup sepenuhnya dari Google rich result mulai tanggal April 6, 2020.

       Menindaklanjuti hal tersebut, sejak 21 Januari 2020 waktu USA, Google Search Console (GSC) mulai menginformasikan hal tersebut, menghimbau untuk semua pemilik website yang menggunakan layanannya untuk pindah skema markup struktur data dari data-vocabulary.org ke schema.org sebelum batas akhir tangggal yang ditetapkan. Saya sendiri baru menyadari 2 Februari kemarin, karena kebetulan ingin mengamati perkembangan dari laman saya di Search Console dan menjumpai pesan valid with warning pada bagian Breadcrumb yang disebabkan oleh makrup data-vocabulary.org dengan tipe error "data-vocabulary.org schema deprecated". Ternyata hal ini sudah diinformasikan GSC jauh-jauh hari via email kepada saya bahwa ada issues yang harus diperbaiki pada laman saya (bisa dilihat pada gambar).

Notifikasi dari Google

Cara Pindah Skema Markup Schema.org Blogger

Untuk cara mengatasi error data-vocabulary.org pada Search Consol kita dihasurkan mengikuti kebijakan Google seperti yang saya sebutkan di atas, yaitu dengan beralih skema Breadcrumb dari markup data-vocabulary.org ke schema.org. Untuk caranya adalah sebagai berikut.

1. Masuk ke dashboard website agan, dan masuk ke edit tema/template (pada Blogger pilih edit HTML).
2. Cari dan temukan <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'> bisa dengan menggunakan fitur search (CTRL+F). untuk lebih mempermudah bisa mengeditnya di aplikasi editor, seperti Sublime Text atau Notpad++. Maka akan dijumpai 2 data-vocabulary.org pada bagian Breadcrumb, seperti pada gambar berikut.

   

   Mencari data-vocabulary.org

3. Kemudian, rubahlah markup data-vocabulary.org pada <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'> dengan markup schema.org. Lakukan hal yang sama di kode yang kedua.

<span itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>



Menggunakan Markup Schema.org

4. Jika sudah, Tambahkan kode berikut tepat dibelakang kode <span itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> yang tadi dirubah.

   <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

   Jangan lupa tambahkan kode penutup </span> mengikuti kode sebelumnya, sehingga akan terlihat seperti pada gambar.

   

   Menambah List Item Schema.org

5. List item wajib diikuti properti meta posisi, tambahkan properti posisi untuk konten dengan menambahkan kode berikut tepat di bawah kode <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
   Untuk bagian 1

   <meta itemprop='position' content='1'/>

   Untuk bagian 2, letakan kode berikut tepat di belakang <span itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'> (gambar menyusul)

   <meta expr:content='data:nomor+2' itemprop='position'/>

   Sehingga akan menjadi seperti pada gambar. Jika tidak ditambahkan kode tersebut, akan menyebabkan error yang menyebutkan posisi dari item harus spesifik.

   

   Menambah Script Meta Posisi

6. Terakhir simpan perubahan dengan klik save dan lihat hasilnya di Google Rich Result Test

Cara Beralih ke Schema.org Markup Di WordPress

Kemari sempat ada yang bertanya melalui komentar, bagaimana untuk mengganti data-vocabulary dengan markup yang baru yaitu schema.org pada WordPress untuk mengatasi warning dari Google Console. Komentarnya tidak saya publish sehingga kalian tidak dapat melihatnya, karena melanggar aturan dalam berkomentar di laman ini (tidak boleh menyertakan url hidup/mati). Akan tetapi, komentar agannya sudah saya tanggapi dan saya bantu mengenai bagian mana saja yang harus dirubah dan ditambahkan dengan menggunakan gambar berikut, yang saya kirim via email (agannya kebetulan menyertakan email juga). Gambar ini saya ambil dengan view page source (Ctrl+U) laman agannya.

Petunjuk Singkat Pindah Markup

Sebenarnya dengan mengikuti gambar di atas, agan sudah bisa melakukannya. Karena kebetulan HTML pada bagian ini tidak terlalu berbeda jauh antara Blogger dan WordPress. Baiklah, untuk cara detilnya jika agak kesulitan memahami gambar di atas, bisa ikuti langkah berikut.

1. Masuk dan buka editor template
2. Kemudian cari dan temukan kode data-vocabulary dengan menekan Ctrl+F untuk memunculkan form search. Maka akan ditemukan 2 buah kode sama seperti di Blogger

   

   Mencari data-vocabulary.org

3. Jika sudah ketemu, langkah pertama ganti url http://data-vocabulary.org/BreadCrumb dengan https://schema.org/BreadCrumbList, lakukan pada keduanya. Untuk lebih jelasnya lihat gambar.

   

   Mengganti markup data-vocabulary.org

4. Jika sudah, letakan kode berikut ini tepat di belakang tag span yang tadi dirubah dengan schema.org, dan jangan lupa untuk tambahkan kode penutupnya. Lakukan hal yang sama pada bagian ke-2. Sehingga akan terlihat seperti gambar.

   <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

   

   Menambahkan List Item

5. Kemudian, tambahkan tag meta mengenai posisi dari konten. Letakan kode sebelum kode penutup dari tag span yang pertama pada bagian tersebut, atau letakan tepat di depan kode <span itemprop='title'> juga boleh, lakukan pada kedua bagiannya. Namun, pada bagian ke-2 perlu diingat, di bagian ke-2 pada kode content harus dirubah, tidak lagi "=1" tapi diganti menjadi ="2". Lebih jelasnya bisa lihat gambar.

   <meta itemprop='position' content='1'/>

   Peletakan Opsi ke-1

   Peletakan Opsi ke-2

6. Terakhir, simpan perubahan dan lihat hasilnya.

Sekarang Markup laman sudah menggunakan skema schema.org dan sekarang agan bisa mengajukan validasi ke Google Search Console agar dilakukan perayapan ulang ke laman agan. Proses perayapan akan berlangsung beberapa hari, minggu, hingga bulan tergantung antrian dan jumlah konten website agan.

NB*

---

• Jika setelah merubah markup data-vocabulary.org ke schema.org muncul error Either "name" or "item.name" should be specified, jangan keburu panik, tarik napas dan tenangkan diri, hahaha. Hal tersebut dikarenakan di markup yang baru (Schema.org) menghendaki item propertinya menggunakan kode "name" dan tidak mendukung kode "title" seperti yang didukung di markup sebelumnya (data-vocabulary.org). Untuk menghilangkan error tersebut, lakukan hal berikut.
  
  1. Kita kembali ke kode HTML dari Breadcrumbs yang telah dirubah tadi, kemudian cari datemukan kode <span itemprop='title'>. Jumlah kode tersebut ada 2.
  
  2. Jika sudah ketemu, rubahlah kata "title" menjadi "name" pada keduanya sehingga menjadi <span itemprop='name'>.
  3. terakhir, simpan perubahan dan uji kembali pada Google Rich Result Test.
• Untuk mengecek hasil pada Google Rich Result Test, pastikan agan menginput link artikel/postingan bukan alamat beranda dari blog/web agan. Karena Google Rich Result Test hanya bekerja/bertugas mengecek properti konten dimiliki dalam postingan blog/web agan. sehingga jika menginput alamat beranda blog akan menampilkan pesan galat Page not eligible for rich results known by this test karena memang halaman beranda tidak memuat properti konten yang akan diuji oleh Google Rich Result Test
• Jangan lupa, jika hasil Google Rich Result Test sudah beres, lakukan pengajuan validasi ke Google Console agar dilakukan perayapan ulang sehingga pesan warning pada postingan agan dicabut.

Sekian tulisan saya mengenai Pindah Markup Scheme.org Untuk Mengatasi Breadcrumb Error "data-vocabulary.org schema deprecated". Apabila ada kesukaran atau kesalahan dalam tulisan saya mohon informasikan melalui kolom komentar atau akun sosial media saya. Terimakasih, semoga bermanfaat.