Memperbaiki Error data-vocabulary.org schema deprecated

Error data-vocabulary.org schema deprecated
Error data-vocabulary.org schema deprecated

Buka email subuh tadi tiba-tiba dapat pemberitahuan berupa warning: data-vocabulary.org schema deprecated dari Google Search Console yang menyatakan bahwa website saya mengalami masalah penulisan skema struktur data breadcrumb. Isi dari pesan email tersebut adalah:

Search Console telah mengidentifikasi bahwa situs Anda terpengaruh oleh 1 Breadcrumb masalah:

Peringatan Teratas

Peringatan merupakan saran untuk penyempurnaan. Sebagian peringatan dapat meningkatkan tampilan Anda di Penelusuran; sebagian lagi dapat menjadi error di masa mendatang. Peringatan berikut ditemukan di situs Anda:

data-vocabulary.org schema deprecated

Sebaiknya perbaiki masalah tersebut jika memungkinkan agar situs Anda dapat memberikan cakupan dan pengalaman terbaik di Google Penelusuran.

Setelah saya amati dan selidiki, ternyata Google baru saja akan menghapus penulisan markup skema struktur data lama yang sebelumnya mengacu pada Data-vocabulary.org ke skema yang terbaru menurut Schema.org.

Menurut penjelasan tim Google, skema data terstruktur seperti schema.org atau data-vocabulary.org digunakan untuk memberitahukan (kepada search engine) mengenai struktur data di halaman website kita agar mudah dikenali. Misalnya saja, Google biasanya menampilkan hasil penelusurannya dengan struktur yang rapi, judul artikel dan nama kategori artikel di bawahnya.

Dengan alasan meningkatnya penggunaan dan popularitas schema.org Google kini memutuskan untuk hanya memfokuskan pengembangannya pada structured data (SD) tunggal. Pada tanggal 6 April 2020, markup data-vocabulary.org akan sepenuhnya dihilangkan dan tidak lagi memenuhi syarat untuk menikmati fitur Google rich result.

Sebagai persiapan untuk perubahan dan mulai hari ini (21 Januari 2020 / Waktu AS), Search Console Google akan melayangkan peringatan untuk semua pemilik website agar segera mengganti skema data-vocabulary.org dan beralih ke skema data Schema.org sebelum hari H pada bulan April nanti.

Format Data Terstruktur (Structured Data)

Google dalam hal ini menggunakan format data terstruktur data dan skema secara bergandengan guna memberikan informasi terkait halaman dan hal-hal yang tercantum dalam suatu halaman website. Informasi ini digunakan untuk dua tujuan utama, yaitu:

  • Memahami isi halaman sebuah website.
  • Mengaktifkan fitur dan peningkatan hasil pencarian khusus.

Apa itu format data terstruktur?

Format data terstruktur seperti JSON-LD, RDFa dan Microdata sengaja dibuat untuk mendefinisikan struktur tetap yang bisa digunakan oleh mesin pencari untuk menyimpan informasi data yang sifatnya deskriptif. Skema data ini kemudian diterapkan pada tag JSON dan HTML.

Jadi pada intinya, struktur data semacam ini digunakan oleh mesin pencari terutama Google untuk mempermudah dalam mendefinikasikan suatu website, misalnya kita menulis artikel tentang apa, kategorinya apa, penulisnya siapa, dan lain sebagainya. Dengan adanya informasi yang jelas ini, Google akan lebih mudah dalam menampilkan konten website kita di hasil penelusuran.

Nah, agar website kita dapat memenuhi syarat untuk ditampilkan dalam fitur Google rich reasult (hasil kaya Google), maka disarankan untuk mengubah data terstruktur dari data-vocabulary.org ke schema.org.

Sebagai contoh, di bawah ini adalah perbaikan yang baru saya lakukan subuh tadi dari semula data-vocabulary.org menjadi schema.org yang valid. Untuk mengecek hasil perbaikannya sukses atau tidak, kita bisa menggunakan tool yang disediakan Google bernama Rich Results Test.

Langkah awal yang harus kita lakukan adalah mencari letak bagian yang error-nya di mana (di bagian kode HTML yang mana). Dalam kasus yang saya alami adalah di bagian Breadcrumb. Kita bisa lakukan ujicoba untuk mengetahui salahnya menggunakan Rich Results Test.

Paste salah satu URL yang bermasalah, kemudian klik tombol TEST URL. Setelah itu akan terlihat hasilnya seperti screenshot di bawah ini:

Hasil pengujian Rich Results Test
Hasil pengujian Rich Results Test

Arahkan mouse pada tulisan kuning lalu klik tanda kaca pembesar, di situ akan terlihat HTML bagian mana yang error. Seperti screenshot di bawah ini:

Error struktur data
Tanda kuning adalah lokasi kode HTML error yang perlu kita perbaiki

Sekarang sudah jelas kan, bagian mana yang error. Langkah selanjutnya adalah mencari kode HTML tersebut di script blog atau website, kemudian tinggal kita benahi kesalahannya.

Gunakan Ctrl+F untuk mempermudah pencarian letak kode. Setelah ketemu, silakan ubah sesuaikan kodenya seperti contoh di bawah ini. Perhatikan baik-baik dan konsentrasi, kalau perlu copy paste kodenya di Notepad++ untuk memperjelas perbedaannya.

Masih menggunakan data-vocabulary.org

Sebelum
<div id="bread-crumbs" class="pt-3">
<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/" itemprop="url" title="Home">
<span itemprop="title"><i class="material-icons breadcrumbs-icon"></i> Home&nbsp;</span>
</a>
</span>&gt; 
<span>Flickr Photo & Video Downloader</span>
</div>

Hasil pengujian

data-vocabulary.org schema deprecated
Terdapat error peringatan data-vocabulary.org schema deprecated

Setelah dikonversi menjadi schema.org yang valid

Sesudah
<div id="bread-crumbs" class="pt-3">
<span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item" title="Home"><span itemprop="name">
<i class="material-icons breadcrumbs-icon"></i> Home&nbsp;</span></a>
<meta itemprop="position" content="1"></span></span>&gt; 
<span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="https://pastedownload.com/flickr-downloader/" itemprop="item" title="Flickr Photo &amp; Video Downloader">
<span itemprop="name">Flickr Photo &amp; Video Downloader</span></a>
<meta itemprop="position" content="2"/>
</span></span></div>

Hasil Pengujian Schema.org (Valid)

Valid schema.org
Valid schema.org

Hasil Validasi Search Console

Validasi search console
Validasi dimulai, tanda-tanda berhasil.

Di situ saya telah mengonversi sekaligus menambahkan dua tag baru yaitu, <meta itemprop=”position” content=”1″ /> dan <meta itemprop=”position” content=”2″ />. Silakan dilihat baik-baik dan dipahami, bagaimana perubahannya dari yang sebelum dan sesudahnya. Mudah bukan?.

Cara di atas bisa digunakan baik untuk Blogger, WordPress, website PHP atau bahkan static website biasa. Karena di sini kita hanya main-main pada bagian tag HTML-nya saja. Selamat mencoba….

Update Pengguna WordPress

Khusus bagi kalian yang menggunakan WordPress, sudah dibuatkan artikel khusus untuk memperbaikinya. Bisa kalian baca Memperbaiki Error Breadcrumb data-vocabulary.org Khusus WordPress

31 thoughts on “Memperbaiki Error data-vocabulary.org schema deprecated”

    • Ubah yang error dan tambahkan ini itemscope=”itemscope” itemtype=”http://data-vocabulary.org/Breadcrumb”. Sesuai contoh di atas urutannya.

      Balas
    • Di bagian HTML-nya Pak. Cari kode htmlnya yang error di blog lalu ubah (sesuai contoh di atas) menurut schema.org. Bisa kan?

      Balas
  1. Saya terima email yang sama persis gan…..
    Agan ini hebat banget, baru dapat masalah justru bisa mengkonversikan menjadi postingan yang bagus. Sukses buat blog ini. Terima kasih banyak..

    Balas
      • yang penting cara mengkonversinya ya gan? apa diganti satu per satu, apa kode ini—itemscope=”itemscope” itemtype=”http://data-vocabulary.org/Breadcrumb”–harus ditambahkan dan kalo ditambahkan letaknya di mana? sebab yang eror kan semua kode yang diberi warna kuning gan? mohon pencerahannya

        Balas
  2. hallo gan, saran biar lebih jelas sebaiknya kode script yang udah di edit nya di warnai, jadi gak bingung kode mana aja yang sebelum dan sesudah di tambahkan kode script nya.

    Balas
    • Kalau WP, biasanya script php yang mengatur bagian halaman posting tunggal adalah single.php. Tergantung dari kerumitan template yang digunakan. Tips, bisa gunakan Notepad++ untuk membuka semua file php-nya lalu cari dengan Find All in All Opened Documents.

      Balas
  3. Untuk pengguna wordpress tinggal tunggu update plugin yoast seo aja 🙂 . Benar tidak kak soalnya ini saya tau info dari blog sebelah.

    Balas
  4. gan uda aku rubah tapi kok masih ada beberapa artikel yang kena ya di index webmastertools?
    padahal hasil test ok..

    Balas
    • Kalau hasil tes oke, maybe pengaruh di cache Kak. Coba klik validasi sekali lagi, biasanya akan langsung clear. Jika masih ditolak, coba amati seksama URL yg bermasalah tersebut.

      Balas
  5. Saya juga masih bingung gan. karena struktur di blog saya yang error kok beda ya, sehingga apa yang harus saya tamabahkan atau ubah saya kurang paham. Maklum saya pemula. Sama dengan teman lain, halaman yang eror juga ada beberapa? Mohon pencerahan, apakah srana untuk mas delta buana ini:…

    Ubah yang error dan tambahkan ini itemscope=”itemscope” itemtype=”http://data-vocabulary.org/Breadcrumb”. Sesuai contoh di atas urutannya…
    berlaku untuk semua?

    Tambahannya kok masih tetap datavocabulary.org, bukan schema.org?

    Mohon pencerahannya ya gan

    Matur suwun

    Balas
    • Mohon maaf Kak, memang dalam tutorial ini diajarkan untuk praktek dan belajar sendiri secara langsung, jadi tidak hanya sekedar copy paste terus clear masalahnya. Tapi ada kode-kode khusus yang harus benar-benar dipahami dan tidak asal-asalan. Tujuannya agar pembaca paham maksudnya dan suatu saat jika terjadi masalah bisa memperbaiki sendiri tanpa perlu bayar atau menyewa jasa orang lain.

      Dari contoh url postingan Anda yang ada di dutajatim, saya menemukan error ini:
      <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

      Silakan itu diperbaiki dan disesuaikan seperti yang ditulis pada artikel ini, bagian:

      Setelah dikonversi menjadi schema.org yang valid

      Kalau masih bingung, silakan paste di sini kode bloggernya mulai dari <div class='breadcrumbs'>…..sampai…..</div>

      Balas
  6. Assalamualaikum mas kok saya beda ya eror nya sperti dibwah ni gmana ya?

    (Home)

    yg saya kasih tutup kurung itu

    Balas

Leave a Comment