Table of Contents
Schema Markup sudah banyak digunakan pada Website, tetapi hanya beberapa yang mengetahui tentang Schema Markup atau Rich Snippet. Jangan khawatir, disini penulis akan menjelaskan semua hal mengenai pentingnya Schema Website yang berguna untuk memperbaiki struktur halaman agar dapat cepat terbaca oleh Search Engine.
Apa itu Schema.org, Schema Markup atau Rich Snippet?
Dimulai sejak tahun 2011 ketika raksasa Search Engine seperti Bing, Google dan Yahoo berkolaborasi untuk membuat dan mendukung suatu set skema struktur data pada halaman web yang dikenal dengan nama Schema.org atau Schema Markup.
Schema Markup merupakan kode yang dapat diletakkan kedalam Website untuk membantu Search Engine agar dapat memberikan hasil yang informatif bagi penggunanya. Schema Markup menggunakan Microdata, berformat RDFa atau JSON-LD untuk menandai konten pada Blog dengan metadata.
Tipe Apa Sajakah yang didukung oleh Schema.org?
Schema Markup menggunakan Vocabulary yang sangat banyak termasuk format lama seperti Microformat, FOAF, GoodRelation, dan OpemCyc.
Tipe Snippet, Graph atau Rich Snippet pada Hasil Pencarian
- Snippet - Teks deskripsi yang tilihat dibawah link website/konten;
- Rich Snippet - Sangat dibutuhkan untuk membuat halaman website atau blog menjadi terstruktur. Jika Bot Search Engine dapat memahami konten pada suatu halaman web. Maka Bot tersebut akan menampilkan Rich Snippet pada hasil pencarian.
- Knowledge Graph - Sama seperti Rich Snippet. Jika Google memahami apa isi dari suatu halaman web, maka Google akan menampilkan kotak informasi disisi kanan pada Search Engine dengan syarat , Website tersebut harus terstruktur.
Cara Validasi Data Markup
Kalian dapat memvalidasi data markup dengan beberapa Tool Online berikut:
- Google Structured Data Testing Tool;
- Bing Markup Validator;
- Yandex Microformat Validator.
Cara Menggunakan Schema.org Markup di Blogger
- Buka dan masuk ke Blogger;
- Pada Dashboard Blogger, klik Theme, klik Dropdown Menu dan pilih Edit HTML;
- Cari kode
<nav> atau <nav dan ubah dengan kode berikut:
<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
- Cari kode
<body> atau <body dan ubah dengan kode berikut:
<body class='index' itemscope='' itemtype='http://schema.org/WebPage'>
- Cari tag
<header> atau <header dan ubah dengan kode berikut:
<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
- Cari elemen yang memiliki class
content-wrapper atau main-wrapper dan ubah dengan kode berikut:
<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
- Sekarang, cari kode berikut:
<div class='post hentry uncustomized-post-template'>
Dan ubah dengan kode berikut:
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
- Lalu, cari kode berikut:
<article class='post hentry' expr:id='data:post.id'>
Ubah dengan kode berikut:
<article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
- Cari kode berikut:
<div class='author-profile' itemprop='author' >
Ubah dengan kode berikut:
<span class='fn author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
- Cari tag
<div id='sidebar-wrapper'> atau <div id='sidebar-wrapper' dan ubah dengan kode berikut:
<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
- Cari Footer Section dengan kode
<footer id='footer-wrapper'> atau <footer id='footer-wrapper' dan ubah dengan kode berikut:
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
Jika kalian memiliki pertanyaan atau masalah, jangan ragu untuk menuliskannya pada kolom komentar. Jika artikel atau tema yang dibagikan ini bermanfaat, jangan lupa untuk dibagikan dengan teman seperjuangan. Terimakasih.
.png)
