Schema.org adalah kegiatan kolaboratif komunitas dengan misi untuk membuat, memelihara, dan mempromosikan schema untuk data terstruktur di Internet, pada halaman web, dalam pesan email, danlainnya. Kosa kata Schema.org dapat digunakan dengan banyak encoding yang berbeda, termasuk RDFa, Microdata, dan JSON-LD. Kosa kata-kosa kata ini mencakup entitas, hubungan antara entitas dan tindakan, dan dapat dengan mudah diperluas melalui model ekstensi yang didokumentasikan dengan baik. Lebih dari 10 juta situs menggunakan Schema.org untuk markup halaman web dan pesan email mereka. Banyak aplikasi dari Google, Microsoft, Pinterest, Yandex, dan lainnya sudah menggunakan kosa kata ini untuk menggerakkan pengalaman yang kaya dan dapat diperluas.
Schema.org didirikan oleh Google, Microsoft, Yahoo, dan Yandex, kosa kata Schema.org dikembangkan oleh proses komunitas terbuka, menggunakan milis public-schemaorg@w3.org dan melalui GitHub. Kosa kata bersama memudahkan bagi para pengelola web dan pengembang untuk memutuskan pada suatu skema dan mendapatkan manfaat maksimal dari upaya mereka. Dalam semangat ini, para pendiri, bersama dengan komunitas yang lebih besar, telah berkumpul - untuk menyediakan koleksi skema bersama.
Untuk informasi lebih lanjut, kunjungi Schema.
Berikut ini struktur markup xml dasar Blogger.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:defaultwidgetversion='2' b:layoutsVersion='3' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Selects all elements - peritah yang berlaku untuk semuanya */
* {
box-sizing: border-box; /* Menyamakan ukuran box */
}
/* Blogger Reset - Menghilangkan style bawaan blogger dengan mengganti deklarasinya disini saya reset class section */
.section {
margin: 0; /* Jarak luar nol */
padding: 0; /* Jarak dalam nol */
}
/* CSS Container - Disini saya ingin membungkus Header, Main, Sidebar dan footer agak panjangnya maksimal 1140px; */
.container {
max-width: 1140px; /* Maksimal panjangnya */
margin: 0 auto; /* Jarak luar kanan dan kiri otomatis, atas dan bawah nol */
}
/* CSS Header */
.header {
background-color: #7F7F7F; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* CSS Main */
.main {
background-color: #FFC90D; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 70%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Sidebar */
.sidebar {
background-color: #7092BF; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 30%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Footer */
.footer {
background-color: #C7BFE6; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* Penambah media query berfungsi untuk tampilan responsive disini panjang main dan sidebar akan berganti pada break point lebar layar 767px: */
@media screen and (max-width: 767px) {
.main, .sidebar {
width: 100%; /* Panjang berubah manjadi 100% jika ukuran layar lebih kecil dari 767px */
}
}
]]></b:skin>
</head>
<body>
<div class='container'>
<header>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
</header>
<nav>
<b:section class='nav' id='nav' name='Menu' showaddelement='yes'/>
</nav>
<article>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</aside>
<footer>
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</aside>
</div>
</body>
</html>
Kita perlu menambahkan markup schema ke struktur tata letak berikut.
<body class='index' itemscope='itemscope' itemtype='http://schema.org/WebPage'> <header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'> <nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <article id='article-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'> <aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'> <footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
Berikut tata letak yang telah di tembahkan dengan markup schema.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:defaultwidgetversion='2' b:layoutsVersion='3' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Selects all elements - peritah yang berlaku untuk semuanya */
* {
box-sizing: border-box; /* Menyamakan ukuran box */
}
/* Blogger Reset - Menghilangkan style bawaan blogger dengan mengganti deklarasinya disini saya reset class section */
.section {
margin: 0; /* Jarak luar nol */
padding: 0; /* Jarak dalam nol */
}
/* CSS Container - Disini saya ingin membungkus Header, Main, Sidebar dan footer agak panjangnya maksimal 1140px; */
.container {
max-width: 1140px; /* Maksimal panjangnya */
margin: 0 auto; /* Jarak luar kanan dan kiri otomatis, atas dan bawah nol */
}
/* CSS Header */
.header {
background-color: #7F7F7F; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* CSS Main */
.main {
background-color: #FFC90D; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 70%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Sidebar */
.sidebar {
background-color: #7092BF; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 30%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Footer */
.footer {
background-color: #C7BFE6; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* Penambah media query berfungsi untuk tampilan responsive disini panjang main dan sidebar akan berganti pada break point lebar layar 767px: */
@media screen and (max-width: 767px) {
.main, .sidebar {
width: 100%; /* Panjang berubah manjadi 100% jika ukuran layar lebih kecil dari 767px */
}
}
]]></b:skin>
</head>
<body class='index' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div class='container'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
</header>
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<b:section class='nav' id='nav' name='Menu' showaddelement='yes'/>
</nav>
<article id='article-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
</article>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</aside>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</footer>
</div>
</body>
</html>
Silakan uji dengan menggunakan Blogger template editor untuk melihat perubahannya, jika ingin melihat struktur markup silahkan gunakan Google Structured Data Testing Tool.
No comments:
Post a Comment