Karena banyaknya teman-teman pengguna wordpress yang mendapatkan warning terkait masalah skema data terstruktur breadcrumb data-vocabulary.org. Di lain sisi, mereka kebanyakan juga mengalami kesulitan untuk menemukan letak HTML yang error, lantaran template wordpress yang memang cenderung rumit dan njlimet dibandingkan dengan Blogger misalnya, sehingga agak kesulitan memperbaikinya.
Oleh karena itu, pada tulisan kali ini saya buatkan artikel yang menunjukkan bagaimana cara memperbaiki error tersebut khusus untuk blog wordpress ya. Untuk wordpress lebih mudah, karena kita hanya perlu mengopy paste patch-nya dan beres deh masalahnya.
Di artikel sebelumnya, saya sudah membahas panjang lebar terkait masalah ini dan bagaimana cara memperbaikinya secara manual dengan menelusuri bagian kode HTML mana yang mengalami error atau bermasalah, kemudian menambahkan tag-tag schema.org yang diperlukan.
Nah, kali ini, khusus pengguna wordpress telah saya buatkan kode PHP-nya yang dirancang untuk mengatasi error breadcrumb data-vocabulary.org secara otomatis tanpa perlu menelaah satu persatu kode html di template wordpress yang kita gunakan. Tinggal copy paste saja kodenya, warning akan langsung sirna selamanya.
Kode PHP WordPress
Adapun kode script PHP-nya adalah sebagai berikut ini:
<?php
$category = get_the_category();
$kategori = $category[0];
?>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo get_home_url(); ?>",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "<?php echo get_category_link( $kategori ); ?>",
"name": "<?php echo $kategori->name; ?>"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "<?php echo get_permalink(); ?>",
"name": "<?php echo get_the_title(); ?>"
}
}
]
}
</script>Jadi teman-teman dan Kakak-kakak sekalian hanya perlu menyalin kode di atas di dalam file header.php pada template yang kalian gunakan. Lokasinya di folder wp-content/themes/(template di sini). Letakkan kode di atas tepat sebelum tag penutup head (</head>), lalu simpan dan lihat hasilnya. Bisa kalian lihat dan tes perubahanya menggunakan Tool Rich Results Test.
Jadi pada dasarnya, selain menggunakan penulisan dengan tag microdata yang dapat disematkan pada kode HTML langsung seperti pada postingan sebelumnya. Markup schema.org juga bisa disisipkan melalui tag JSON-LD (JavaScript Object Notation for Linked Data), seperti yang kita bahas pada artikel ini.
Cukup sekian, semoga artikelnya bermanfaat buat teman-teman dan Kakak-kakak sekalian. 🙂
New Update
Selain mengaplikasikan (copy paste) kode di atas, kita juga harus tetap menghapus tag data-vocabulary yang menyebabkan warning atau error. Yaitu, dengan menemukannya di file php template wordpress yang digunakan. Jadi, kita perlu membuka satu persatu script php-nya, lalu cari kode sesuai yang terlihat pada warning Rich Results Test.
Cukup itu saja, setelah dihapus silakan cek sekali lagi. Maka warning yang berkaitan dengan data-vocabulary.org akan hilang.
Testimonial Pembaca
Dwi Aditya Herfiansyah
Mas, makasih atas sharingnya yah saya sudah coba terapkan dan langsung berhasil.
Ini saran aja mas buat temen temen yg mau ujicoba. btw Boleh di masukan kedalam postingan mas kalo berkenan 🙂
Sebaiknya, buat yang mau uji coba sebelum untuk menambahkan source code ini kedalam file html kamu, HAL PERTAMA yang perlu di lakukan adalah backup dlu file yg mau di edit jangan sampai saat anda edit dan percobaan anda gagal. Dan anda lupa mana yg sudah anda hapus tadi. HAL KEDUA jangan lupa clear cache setelah kamu update source code td dan ngecek di Rich Result Test, karena td juga ane kasusnya error pas udah clear cache baru keliatan hasilnya tp kadang ga perlu cache jg bisa jalan tergantung kondisi.:)
Semoga bermanfaat.
