Setelah kita mengenal macam-macam Rich Snippet silahkan baca disini : apa itu kartu rich
Tentu kita akan membahas memahami vocanullary nya agar bisa di terapkan di website kita nah seperti yang kita tahu dan sebagai catatan bahwasanya para penyedia layanan mesin pencari saat ini masih terus mengevaluasi penerapan fitur rich snippet di SERP nya.
Meksipun agan bisa menyisipkan data terstruktur tertentu untuk menarget tayangan salah satu rich snippet di SERP, Namun mesin pencarilah yang menentukan apakah data terstruktur kita ditayangkan atau tidak.
Mesin pencari seperti google bahkan menyatakan meninjau secara manual untuk menentukan apakah data terstruktur di sebuah website layak ditayangkan atau tidak.
Tujuan nya untuk meng antisipasi penyalahgunaan teknologi daya terstruktur untuk aktivitas spam.
Google bahkan menghapuskan fitur rich snippet personal beberapa waktu yang lalu, Rich snippet personal awalnya di tunjukkan untuk menayangkan nama dan foto kontributor atau penulis sebuah artikel. Namun ternyata banyak disalahgunakan sehingga ditiadakan.
Lantas, Bagaimana cara membuat data tersruktur di halaman website kita ? pembuatan data tesruktur di halaman web digunakan standart vocabulary Schema.org.
Vocabulary merupakan properti yang digunakan untuk memberikan keterangan tertentu pada konten web, Misalnya saja untuk kita membuat data terstruktur pada sebuah item ulasan produk kita gunakan vocabulary name, reviewRatting, rattingvalue, reviewcount, dan date published.
Ada macam ratusan vocabulary yang bisa agan pakai daftarnya : http://schema.org/docs/full.html
Dan pastinya tidak semua yang kita butuhkan, hanya yang sesuai dengan website kita yang akan kita pakai, melalui macam properti ini ada di vocabulary schema.org, selanjutnya agan bisa menggunakan data terstruktur menggunakan salah satu format berikut :
# Microdata : adalah metadata yang akan kita sisipkan langsung di dalam elemen HTML menggunakan atribut khusus, seperti itemscope, itemtype, dan itemprop, lalu kita menggunakan vocabulary schema.org untuk menyebutkan jenis property nya, jenis ini merupak format yang paling disarankan karena kompitable dengan HTML5 dan di dukung oleh berbagai mesin pencari berikut contoh kodenya :
Terlihat pada elemen HTML <div>, <h3>, <img>, <p>, disisipi dengan atribut microdata berserta nilai properti vocabulary nya.
# RFDA (Resource Description Framework in Attributes): Menyerupai format microdata, Namun beberapa atribut yang kita gunakan memakai nama yang berbeda, tidak semua kodenya didukung oleh mesin pencari berikut contoh :
# JSON-LD disingkat dengan : JavaScript Object Notation for Linked Data) : Metadata dikaitkan menggunakan kode JavaScript, tapi dalam tahap google jenis ini masih tahap uji coba berikut kode :
Berikut contoh untuk membuat daya terstruktur berformat microdata pada menu breadcrumb. Awalnya, jika belum diberi kode data terstruktur, menu breadcrumb umumnya kita tulis seperti ini :
Setelah kita mensisipkan kode data terstruktur berformat microdaya, maka hasilnya menjadi seperti ini :
Untuk memastikan apakah kita sudah menulis kodenya dengan benar maka kita gunakan tool Strukture Data Testing Tool dari google di Url berikut : https://search.google.com/structured-data/testing-tool?url#url
Caranya kita copy kode Microdata dan paste ke kolom kiri, kemudian Validasi di kolom kanan akan ditampilkan hasil pembacaan data oleh tool tersebut.
Jika nantinya kode sudah benar, maka akan mucul tulisan tidak ada masalah, nah jika ada kesalahan maka kita akan ditunjukan arahnya.
Untuk membuat kode data terstruktur bagi blog data jenis lain misalnya saja : Review, Artikel, Resep dan lain lain, pada prinsipnya Sama.
Seperti contoh yang diberikan pada kode microdata produk dan breadcrumb yang telah kita cobasebelumnya.
Nama Vocabulary nya dapat kita periksa pada Schema.org/docs/full.html.
Tentu kita akan membahas memahami vocanullary nya agar bisa di terapkan di website kita nah seperti yang kita tahu dan sebagai catatan bahwasanya para penyedia layanan mesin pencari saat ini masih terus mengevaluasi penerapan fitur rich snippet di SERP nya.
Meksipun agan bisa menyisipkan data terstruktur tertentu untuk menarget tayangan salah satu rich snippet di SERP, Namun mesin pencarilah yang menentukan apakah data terstruktur kita ditayangkan atau tidak.
Mesin pencari seperti google bahkan menyatakan meninjau secara manual untuk menentukan apakah data terstruktur di sebuah website layak ditayangkan atau tidak.
Tujuan nya untuk meng antisipasi penyalahgunaan teknologi daya terstruktur untuk aktivitas spam.
Google bahkan menghapuskan fitur rich snippet personal beberapa waktu yang lalu, Rich snippet personal awalnya di tunjukkan untuk menayangkan nama dan foto kontributor atau penulis sebuah artikel. Namun ternyata banyak disalahgunakan sehingga ditiadakan.
Lantas, Bagaimana cara membuat data tersruktur di halaman website kita ? pembuatan data tesruktur di halaman web digunakan standart vocabulary Schema.org.
Vocabulary merupakan properti yang digunakan untuk memberikan keterangan tertentu pada konten web, Misalnya saja untuk kita membuat data terstruktur pada sebuah item ulasan produk kita gunakan vocabulary name, reviewRatting, rattingvalue, reviewcount, dan date published.
Ada macam ratusan vocabulary yang bisa agan pakai daftarnya : http://schema.org/docs/full.html
Dan pastinya tidak semua yang kita butuhkan, hanya yang sesuai dengan website kita yang akan kita pakai, melalui macam properti ini ada di vocabulary schema.org, selanjutnya agan bisa menggunakan data terstruktur menggunakan salah satu format berikut :
# Microdata : adalah metadata yang akan kita sisipkan langsung di dalam elemen HTML menggunakan atribut khusus, seperti itemscope, itemtype, dan itemprop, lalu kita menggunakan vocabulary schema.org untuk menyebutkan jenis property nya, jenis ini merupak format yang paling disarankan karena kompitable dengan HTML5 dan di dukung oleh berbagai mesin pencari berikut contoh kodenya :
<div itemscope itemtype="http://schema.org/Product">
<h3 itemprop="name">Modern Web Design</h3>
<img itemprop="image" src="mwd.jpg" alt="modern web">
<p itemprop="description">Artikel ini Menjelaskan . . . </p>
...
...
</div>
Terlihat pada elemen HTML <div>, <h3>, <img>, <p>, disisipi dengan atribut microdata berserta nilai properti vocabulary nya.
# RFDA (Resource Description Framework in Attributes): Menyerupai format microdata, Namun beberapa atribut yang kita gunakan memakai nama yang berbeda, tidak semua kodenya didukung oleh mesin pencari berikut contoh :
<div vocab="http://schema.org/" typeof="Product">
<h3 property="name">Modern Web Design</h3>
<img src="mwd.jpg" alt="wavker blog">
<p property="description">Artikel ini Menjelaskan . . . </p>
. . .
. . .
</div>
# JSON-LD disingkat dengan : JavaScript Object Notation for Linked Data) : Metadata dikaitkan menggunakan kode JavaScript, tapi dalam tahap google jenis ini masih tahap uji coba berikut kode :
<script type="application/id+json"># Microformat : Metadata kita sisipkan lansgsung di elemen HTML menggunakan clas CSS khusus namun tidak semua kodenya didukung oleh mesin pecari, yang awalnya sih Microformat di pegang oleh Google, namun belakangan ini Google lebih menyarankan format microdata atau RDFa.
{
"@context":"http://schema.org",
"@type: product",
"name" : "wavker blog"
"description" : Artikel ini Menjelaskan . . ."
}
</script>
<div class="product">Untuk kompatibilitas di berbagai mesin pencari, sebaiknya kita gunakan format microdata untuk membuat kode data terstruktur.
<h3 class="fn" >Modern Web Design</h3>
<img class="photo" src="mwd.jpg" alt="Wavker Blog">
<p class="description">Artikel ini Menjelaskan . . .</p>
</div>
Berikut contoh untuk membuat daya terstruktur berformat microdata pada menu breadcrumb. Awalnya, jika belum diberi kode data terstruktur, menu breadcrumb umumnya kita tulis seperti ini :
<ol>
<li>
<a href="http://www.wavker.xyz/">Beranda</a> >
</li>
<li>
<a href="http://www.url.com/artikel1">artikel 1</a> >
</li>
<li>
<a href="http://www.url.com/artikel2">Artikel 2</a>>
</li>
<li>
Nama Artikel
</li>
<ol>
Setelah kita mensisipkan kode data terstruktur berformat microdaya, maka hasilnya menjadi seperti ini :
<ol itemscope itemtype="http://schema.org/BreadcrumbList">Dan terakhir item pada breadcrumb (item judul halam aktif) tidak perlu diberi link dan atribut microdata, karena untuk menunjukan ke pengunjung bahwa link nya saat itu tengah dibuka.
<li itemprop="itemlistElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www.wavker.xyz/"><span itemprop="name">Beranda</span></a>
<meta itemprop="position" content="1"> >
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www.wavker.xyz/artikel1"><span itemprop="name">Artikel 1</span></a>
<meta itemprop="position" content="2"> >
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item"
href="http://www.wavker.xyz/artikel2"><span itemprop="name">artikel2</span></a>
<meta itemprop="position" content="3"> >
</li>
<li>
wavker blog
</li>
</ol>
Untuk memastikan apakah kita sudah menulis kodenya dengan benar maka kita gunakan tool Strukture Data Testing Tool dari google di Url berikut : https://search.google.com/structured-data/testing-tool?url#url
Caranya kita copy kode Microdata dan paste ke kolom kiri, kemudian Validasi di kolom kanan akan ditampilkan hasil pembacaan data oleh tool tersebut.
Jika nantinya kode sudah benar, maka akan mucul tulisan tidak ada masalah, nah jika ada kesalahan maka kita akan ditunjukan arahnya.
Untuk membuat kode data terstruktur bagi blog data jenis lain misalnya saja : Review, Artikel, Resep dan lain lain, pada prinsipnya Sama.
Seperti contoh yang diberikan pada kode microdata produk dan breadcrumb yang telah kita cobasebelumnya.
Nama Vocabulary nya dapat kita periksa pada Schema.org/docs/full.html.
0 komentar