Fungsi Schema.Org
Schema.org berfungsi untuk memudahkan Google untuk mengetahui semua bagian dalam blog kita seperti letak Header, Footer, Widget, Menu Navigasi, Kata yang sering di cari dalam blog, dan yang paling terpenting adalah isi postingan yang kita tulis.
Dengan kata lain, fungsi Schema.org adalah:
- Menandai setiap bagian blog agar Google kenal dan tahu secara pasti bentuk blog termasuk letak Header, Footer, Widget, Menu Navigasi, dan isi artikel bahkan ke detail yang lebih dalam (Rich Snippet)
- Membantu Google mengelompokkan kategori postingan yang kita buat ke dalam produk mereka. Misal kita posting lowongan kerja, maka mereka akan mengambil artikel kita dan meletakkannya ke dalam barisan lowongan kerja Google di mesin pencarian paling atas meskipun artikel kita masih baru dengan domain baru
- Mendapatkan Sitelink dengan lebih mudah. Sitelink adalah susunan menu yang berjejer di bawah nama blog pada mesin pencarian Google. Dulu banyak beredar berita hoax dikalangan Blogger yang mengatakan bahwa Sitelink hanya bisa di dapatkan oleh blog besar yang sudah terkenal. Padahal, faktanya Sitelink bisa didapatkan dengan mudah jika kita menerapkan semua Schema.org
A. Cara Menambahkan Schema.Org ke Dalam Blogger
Cara menambahkan Schema Markup ini sangatlah mudah, tugas kita hanyalah Cari, Copy, Paste:
- Cari kode dalam template menggunakan Ctrl+F
- Copy kode schema.org
- Lalu Paste kode schema.org ke dalam template blog
Mari kita mulai... Untuk mempermudah kalian dalam memahami letak kode yang diubah dan ditambah, saya akan memberi kode warna kuning untuk kode yang di cari di dalam blog, dan kode warna biru untuk kode Schema.org yang akan tanam di dalamnya.
1. Schema untuk Header Blogger
Cari kode <div id='header'> atau <div id='header-wrapper'> Lalu copy kode yang ada di bawah ini:
itemscope='itemscope' itemtype='http://schema.org/WPHeader'
Paste, hingga bentuknya menjadi seperti ini:
<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
2. Schema untuk Navigasi Blogger
Cari kode <nav atau <nav id='topnav'> Lalu copy kode yang ada di bawah ini:
itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'
Paste, hingga bentuknya menjadi seperti ini:
<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
3. Schema WebPage untuk Blogger
Cari kode <body> atau <body class='index'> Lalu copi kode yang ada di bawah ini:
itemscope='itemscope' itemtype='http://schema.org/WebPage'
Paste, hingga bentuknya menjadi seperti ini:
<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
4. Schema Blog untuk Blogger
Cari kode <div id='main-wrapper'> atau <div id='content-wrapper'> Lalu copy kode yang ada di bawah ini:
itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'
Paste, hingga bentuknya menjadi seperti ini:
<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
5. Schema Blog Posting untuk Blogger
Cari kode <div class='post hentry uncustomized-post-template'> Lalu copy kode yang ada di bawah ini:
itemscope='itemscope' itemtype='http://schema.org/BlogPosting'
Paste, hingga bentuknya menjadi seperti ini:
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
atau cari kode <article class='post entry' expr:id='data:post.id'> Lalu tambahkan kode schema hingga menjadi seperti ini
<article class='post entry' expr:id='data:post.id' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
6. Schema Person untuk Blogger
Cari kode <div class='author-profile' itemprop='author'> atau <span class='fn' itemprop='author'> Lalu copy kode yang ada di bawah ini:
itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'
Paste, hingga bentuknya menjadi seperti ini:
<span class='fn' itemprop='author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
7. Schema WP Sidebar untuk Blogger
Cari kode <div id='sidebar-wrapper'> Lalu copy kode yang ada di bawah ini:
itemscope='itemscope' itemtype='http://schema.org/WPSideBar'
Paste, hingga bentuknya menjadi seperti ini:
<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
8. Schema Footer untuk Blogger
Cari kode <footer id='footer-wrapper'> Lalu copy kode yang ada di bawah ini:
itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'
Paste, hingga bentuknya menjadi seperti ini:
<footer id='footer-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPFooter' role='contentinfo'>
B. Cara Menambahkan Schema Pelengkap
Setelah memasang Schema yang di atas, kita bisa menambahkan Schema Markup yang lainnya lagi selama tidak berbenturan dengan Schema yang sudah ada.
Misalnya, Schema yang sudah ada adalah Schema BlogPosting, maka kita bisa menambahkan Schema baru untuk Organization. Berikut langkah-langkahnya:
1. Schema Website untuk Blogger
- Cari kode //]]></script> menggunakan Ctrl+F
- Lalu letakkan kode berikut ini tepat di atas //]]></script>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "WebSite",
"@id":"#website",
"url": "https://www.saifullah.id",
"name": "Saifullah.id",
"author": {
"@type": "Person",
"name": "Saifullah"
},
"description": "Teman Terbaik Saat Butuh Informasi",
"publisher": "Saifullah",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.saifullah.id/?s={search_term_string}",
"query-input": "required name=search_term_string" }
}
</script>Ganti tulisan yang berwarna kuning sesuai dengan data alamat, nama, dan deskripsi Blog.
2. Schema Organisasi untuk Blogger
- Cari kode //]]></script> menggunakan Ctrl+F
- Lalu letakkan kode berikut ini tepat di atas //]]></script>
<script type='application/ld+json'>{"@context":"https:\/\/schema.org","@type":"Organization","url":"https:\/\/www.saifullah.id\/","sameAs":[],"@id":"https:\/\/www.saifullah.id\/#organization","name":"Saifullah","logo":"URL logo blog"}</script>Ganti tulisan yang berwarna kuning sesuai dengan data alamat, nama, dan URL gambar logo Blog
3. Schema Search Form untuk Blogger
- Cari kode //]]></script> menggunakan Ctrl+F
- Lalu letakkan kode berikut ini tepat di atas //]]></script>
<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "WebSite", "url": "https://www.saifullah.id/", "potentialAction": { "@type": "SearchAction", "target": "https://www.saifullah.id/?q={search_term}", "query-input": "required name=search_term" } }</script>Ganti tulisan yang berwarna kuning sesuai dengan data alamat Blog kalian
C. Cara Menambah Schema Sesuai Tema (Niche) Blogger
Tema (Niche) Blog sebaiknya berhubungan dengan Template yang digunakan, karena biasanya template tersebut sudah ditanam kode Schema.org di dalamnya.
Misalnya kita ingin memposting produk / barang / jasa alias ingin berjualan online di blog, maka gunakanlah Template yang mendukung untuk jualan.
Atau kita ingin posting Lowongan Kerja, maka sebaiknya menggunakan Template khusus untuk Posting Lowongan Kerja.
Tapi juka sudah terlanjur membeli template premium yang berbeda dengan Tema / Niche Blog kita tidak perlu khawatir juga, karena kita bisa menambahkan kode Schema.org ke dalam postingan.
Caranya mudah namun agak menambah kerjaan saat mengetik dan perlu diingat bahwa kode ini tidak ditanam dalam Template blog, melainkan di tanam dalam Postingan blog setiap kali membuat postingan baru.
1. Schema Job Postingan untuk Blogger Lowongan
Schema ini cocok untuk postingan lowongan kerja. Cara memasangnya:
- Buka Dashboard Blogger
- Klik POSTINGAN BARU
- Lalu tekan tombol pensil 🖉 dan pilih < > Tampilan HTML
- Kemudian masukkan kode di bawah ini dan edit sesuai isi lowongan kerja yang akan di posting.
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "JobPosting",
"title": "Posisi Yang Dibutuhkan",
"description": "Deskripsi Lowongan Kerja",
"hiringOrganization" : {
"@type": "Organization",
"name": "Nama Perusahaan",
"sameAs": "Alamat Website"
},
"industry": "Nama Industri",
"datePosted": "Tanggal Posting",
"validThrough": "Tanggal Berakhir Lowongan Dibuka",
"jobLocation": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"streetAddress": "Nama Jalan",
"addressLocality": "Nama Kota",
"postalCode": "Kode Post",
"addressCountry": "Kode Negara"
}
}, "baseSalary": {
"@type": "MonetaryAmount",
"currency": "Kode Mata Uang",
"value": {
"@type": "QuantitativeValue",
"minValue": Gaji Minimal,
"maxValue": Gaji Maksimal,
"unitText": "Dibayar setiap"
}
}
}
</script>Contohnya menjadi seperti ini:
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "JobPosting",
"title": "Kurir JNT",
"description": "Mengantar barang ke rumah pelanggan",
"hiringOrganization" : {
"@type": "Organization",
"name": "JNT",
"sameAs": "https://www.saifullah.id"
},
"industry": "Kurir Ekspedisi",
"datePosted": "2021-06-27",
"validThrough": "2021-07-01",
"jobLocation": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"streetAddress": "Jl. Ayani 2",
"addressLocality": "Pontianak",
"postalCode": "78113",
"addressCountry": "ID"
}
}, "baseSalary": {
"@type": "MonetaryAmount",
"currency": "IDR",
"value": {
"@type": "QuantitativeValue",
"minValue": 1300000,
"maxValue": 2500000,
"unitText": "MONTH"
}
}
}
</script>2. Schema Recipe untuk Blogger Resep
Schema ini cocok untuk postingan Resep Makanan, Minuman, Cemilan, dll. Cara memasangnya:
- Buka Dashboard Blogger
- Klik POSTINGAN BARU
- Lalu tekan tombol pensil 🖉 dan pilih < > Tampilan HTML
- Kemudian masukkan kode di bawah ini dan edit sesuai isi lowongan kerja yang akan di posting.
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "",
"image": "",
"description": "",
"keywords": "",
"author": {
"@type": "Person",
"name": ""
},
"prepTime": "",
"cookTime": "",
"totalTime": "",
"nutrition": {
"@type": "NutritionInformation",
"calories": ""
}
}
</script>Contohnya menjadi seperti ini:
<script type="application/ld+json"> {
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Nama Kue",
"image": "https://1.bp.blogspot.com/--_TR32bcE70/XdOT9OtizQI/AAAAAAAAB8Y/A89Ac-fZUUMltShGELNNb1YfcQHu-lJGACLcBGAsYHQ/s400/Cara%2BMenambahkan%2BSchema%2BMarkup%2BDi%2BBlog.jpg",
"description": "Deskripsi Kue Lengkap",
"keywords": "Kue Bakpao, Lumpia, Roti Bakar,",
"author": {
"@type": "Person",
"name": "Pembuat"
},
"datePublished": "2019-11-19",
"prepTime": "PT2M",
"cookTime": "PT1M",
"totalTime": "PT3M",
"nutrition": {
"@type": "NutritionInformation",
"servingSize": "30x30",
"calories": "3 cal",
"fatContent": "20 g"
}
}
</script>3. Schema Product untuk Blogger Online Shop
Schema ini cocok untuk postingan perdagangan barang dan jasa. Cara memasangnya:
- Buka Dashboard Blogger
- Klik POSTINGAN BARU
- Lalu tekan tombol pensil 🖉 dan pilih < > Tampilan HTML
- Kemudian masukkan kode di bawah ini dan edit sesuai isi lowongan kerja yang akan di posting.
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "",
"image": ""
}
</script>Contohnya menjadi seperti ini:
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Mesin Cuci",
"image": "https://1.bp.blogspot.com/--_TR32bcE70/XdOT9OtizQI/AAAAAAAAB8Y/A89Ac-fZUUMltShGELNNb1YfcQHu-lJGACLcBGAsYHQ/s400/Cara%2BMenambahkan%2BSchema%2BMarkup%2BDi%2BBlog.jpg",
"description": "Isi dengan deskripsi produk",
"brand": "Nama Brands"
}
</script>4. Schema Product untuk Buku / Novel
Schema ini cocok untuk postingan buku, novel, dan sejenisnya. Cara memasangnya:
- Buka Dashboard Blogger
- Klik POSTINGAN BARU
- Lalu tekan tombol pensil 🖉 dan pilih < > Tampilan HTML
- Kemudian masukkan kode di bawah ini dan edit sesuai isi lowongan kerja yang akan di posting.
{
"@context": "https://schema.org",
"@type": "DataFeed",
"dataFeedElement": [
{
"@context": "https://schema.org",
"@type": "Book",
"@id": "http://example.com/work/the_catcher_in_the_rye",
"url": "http://example.com/work/the_catcher_in_the_rye",
"name": "The Catcher in the Rye",
"author": {
"@type": "Person",
"name": "J.D. Salinger"
},
"sameAs": "https://en.wikipedia.org/wiki/The_Catcher_in_the_Rye",
"workExample": [
{
"@type": "Book",
"@id": "http://example.com/edition/the_catcher_in_the_rye_paperback",
"isbn": "9787543321724",
"bookEdition": "Mass Market Paperback",
"bookFormat": "https://schema.org/Paperback",
"inLanguage": "en",
...
},
...
]
}
],
"dateModified": "2018-09-10T13:58:26.892Z"
}
Kesimpulan
Sebagai seorang blogger, tugas kita tidak cukup hanya menulis artikel. Melainkan juga harus tahu bagaimana agar artikel tersebut mudah di index dan tersebar dalam mesin pencarian agar bisa menjangkau pembaca yang lebih luas.
Melalui Schema.org, blog atau website bisa dioptimalkan agar ramah terhadap mesin pencarian dan bisa bersaing dengan blog populer yang lebih dulu menginjakkan kali dalam dunia Blogging. Se,oga bermanfaat.