Memperbaiki data-vocabulary.org Schema Deprecated pada Google Search Console di Blogger

Baru-baru ini, banyak sekali yang mendapatkan peringatan tentang data-vocabulary.org Schema Deprecated khususnya bagi pengguna Blogger. Sebenarnya saya sudah telat untuk membahasnya. Tetapi, apa salahnya untuk membagikan hal yang mungkin bisa bermanfaat bagi orang lain. Informasi ini awalnya saya dapatkan dari Mas Rinaldo - salah satu rekan Blogger saya. Dia mengatakan bahwa masih banyak yang mengalami hal ini.

Jadi, apakah maksud dari peringatan ini? Bagaimana cara memperbaiki masalah data-vocabulary? Apa efek samping jika kita mengabaikannya? Maka dari itu, disini kita akan membahasnya.

Peringatan tersebut bermaksud untuk memberitahukan Google Webmaster bahwa Google lebih menyukai struktur data schema.org daripada data-vocabulary.org. Berikut adalah sedikit kutipan yang saya ambil dari Official Google Webmaster Central Blog:

Structured data schemas such as schema.org and data-vocabulary.org are used to define shared meaningful structures for markup-based applications on the Web. With the increasing usage and popularity of schema.org we decided to focus our development on a single SD scheme. As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.

Artinya, seluruh Website atau Blog yang menggunakan data-vocabulary.org Schema Markup untuk kedepannya tidak lagi memenuhi syarat fitur Google Rich Results. Untuk masalah peringkat SEO dan faktor lain, menurut Official Blog tidak akan berdampak apapun. Maka dari itu, alangkah baiknya bagi kita pemilik Website atau Blog untuk mengikuti perkembangan zaman dan teknologi.

Untuk memastikan apakah kalian mendapatkan masalah ini atau tidak, kalian dapat mengunjungi Google Search Console. Jika kalian mendapatkan peringatan, berarti kalian harus memperbaikinya.

Cara Memperbaiki Masalah data-vocabulary.org Schema Deprecated

Sebenarnya, bagi para Developer, hal ini adalah masalah yang sangat ringan. Kalian hanya perlu mengubah data-vocabulary.org Schema menjadi schema.org Structured Data.

Berikut adalah contoh kode dari kebanyakan tempalate Blogger (Blogspot):

<b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
        <div class='breadcrumb'>
            <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                <a expr:href='data:blog.homepageUrl' itemprop='title'>Home</a>
            </span>
            
            <b:loop values='data:post.labels' var='post'>
                <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                    <a expr:href='data:blog.homepageUrl' itemprop='title'>Home</a>
                </span>
            </b:loop>
        </div>
    </b:if>
</b:loop>

Disini, kita dapat mengubah data-vocabulary.org dengan schema.org:

<b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
        <div class='breadcrumb'>
            <span itemscope='' itemtype='http://schema.org/Breadcrumb'>
                <a expr:href='data:blog.homepageUrl' itemprop='title'>Home</a>
            </span>
          
            <b:loop values='data:post.labels' var='post'>
                <span itemscope='' itemtype='http://schema.org/Breadcrumb'>
                    <a expr:href='data:blog.homepageUrl' itemprop='title'>Home</a>
                </span>
            </b:loop>
        </div>
    </b:if>
</b:loop>

Untuk mengubahnya, ikutlah panduan berikut:
Masuk ke Blogger, pilih menu Theme (Tema) > Edit HTML.
Tekan tombol CTRL + F pada Keyboard dan cari kode: <b:includable id='breadcrumb' var='posts'>
Salin dan pastekan kode berikut tepat dibawah kode: <b:includable id='breadcrumb' var='posts'> dan hapus semua kode yang ada di dalamnya:

<b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:view.isPost'>
        <nav id='breadcrumb'>
            <a class='home' expr:href='data:blog.homepageUrl'><data:messages.home/></a>
            <b:if cond='data:post.labels'>
                <a class='label' expr:href='data:post.labels.first.url'><data:post.labels.first.name/></a>
            </b:if>
        </nav>

        <script type='application/ld+json'>
            {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"<data:messages.home/>","item":"<data:blog.homepageUrl.canonical/>"},{"@type":"ListItem","position":2,"name":"<b:if cond='data:post.labels'><data:post.labels.first.name/></b:if>","item":"<data:post.labels.first.url.canonical/>"},{"@type":"ListItem","position":3,"name":"<data:post.title/>","item":"<data:post.url.canonical/>"}]}
        </script>
    </b:if>

    <b:if cond='data:view.isPage'>
        <script type='application/ld+json'>{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"<data:messages.home/>","item":"<data:blog.homepageUrl.canonical/>"},{"@type":"ListItem","position":2,"name":"<data:post.title/>","item":"<data:post.url.canonical/>"}]}</script>
    </b:if>
</b:includable>

Selanjutnya adalah mengatur Style untuk Breadcrumb. Salin dan pastekan kode CSS berikut kedalam Template. Jika sudah, klik tombol Save Theme:

#breadcrumb a:not(:first-child)::before {
    content: '/';
    margin: 0 5px;
}

Cara Verifikasi Perbaikan Masalah data-vocabulary

Ketika kalian sudah melakukan perubahan diatas, kunjungi Google Search Console. Klik pada peringatan dan tekan tombol Validate Fix. Perbaikan tersebut akan membutuhkan sedikit waktu.

Selain itu, kalian juga dapat mengujinya dengan menggunakan Rich Results Test Tool dari Google.

Semoga artikel ini bermanfaat dan dapat memperbaiki/menyelesaikan masalah data-vocabulary yang kalian hadapi. Terimakasih.