4 Cara Memasang Schema.Org di Blogger dengan Tutorial Lengkap

Oleh Arief Ghozaly

Kali ini saya akan berbagi tutorial bagaimana caranya membuat dan memasang Schema.Org di Blogger/Blogspot, didukung dengan tutorial lengkap dan mudah untuk diterapkan.

Diistilahkan, dinamakan, atau disebut Microdata Schema.Org adalah sebuah Schema Markup atau data terstruktur yang berfungsi agar mesin pencari mudah dalam melakukan Indexing (pengindeksan/penelusuran) terhadap blog atau Website yang dimiliki.

Singkatnya adalah suatu situs dapat dengan mudah menguasai halaman pertama Google hanya karena telah disisipkan, disematkan, atau dipasangkan Microdata Schema.Org.

Kalian bisa membaca penjelasan Schema.Org secara lengkap di artikel ini: Pengertian Schema.Org serta Fungsi dan Manfaatnya bagi Blog.

Bagi yang penasaran tentang Schema.Org, kalian bisa mengakses situs resminya di sini: Welcome to Schema.Org dan membaca penjelasan Google di sini: Developers Google - Structured Data dan di sini: Build, Test, and Release Structured Data.

Kalian juga bisa membaca keterangan terkait stuktur data Google di sini: Understand How Structured Data Works.

4 Cara Memasang Schema.Org di Blogger dengan Tutorial Lengkap

Pada artikel kali ini, ada 4 cara yang bisa kalian lakukan. Tentunya, setiap cara berbeda. Gak bisa digabung :)

1. Tutorial Pertama: Cara Memasang Schema.Org di Blogger

Login ke Blogger > Tema > Edit HTML

Simpan kode di bawah ini, di bawah kode <body> atau di bawah kode <body...>

<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if> <meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPAHAsU8q_Ktxow94F3zbAWNXyjznPsMfNsjSyUAeWKUIwas5Ey-CUZOueSy5J6BmtmJztkQqoFkrcHkQ-sM2-f0nKBy4Wid7Voxbbi1tEjsLiusP0jJMsQqpUEfEFa4aLKuK6T1qgoQQ/s1600/Kode-Blogger.png' itemprop='image'/>
</b:if>
</div>

Silakan ketuk tombol Save Template untuk menyimpan perubahan pada Blogger Template. Tutorial selanjutnya, di bawah!

2. Tutorial Kedua: Cara Memasang Schema.Org di Blogger

Ganti kode <nav> atau <nav... dengan kode ini:

<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

Lalu ganti kode <body> atau <body... dengan kode ini:

<body class='index' itemscope='' itemtype='http://schema.org/WebPage'>

Selanjutnya ganti kode <header> atau <header-wrapper> dengan kode ini:

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

Lalu ganti kode <content-wrapper> atau <main-wrapper> dengan kode ini:

<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Atau dengan kode ini:

<div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Selanjutnya, ubah kode ini:

<div class='post hentry uncustomized-post-template'>

dengan kode ini:

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Lalu temukan kode ini:

<article class='post hentry' expr:id='data:post.id'>

Silakan ganti kode di atas dengan kode ini:

<article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

Selanjutnya cari kode ini:

Baca Juga

<div class='author-profile' itemprop='author'>

Ganti kode di atas dengan kode ini:

<span class='fn author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

Ganti kode <div id='sidebar-wrapper'> dengan kode ini:

<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>

Ganti kode <footer id='footer-wrapper'> dengan kode ini:

<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Ganti kode <div id='footer-credit'> dengan kode ini:

<footer id='footer-credit' itemscope='itemscope' itemtype='http://data-vocabulary.org/copyrightHolder'>

Silakan ketuk tombol Save Template. Oke sudah selesai...!!

UPDATE!!

3. Tutorial Ketiga: Cara Memasang Schema.Org di Blogger

Selain dari kedua cara di atas, ada lagi cara lainnya. Cari kode ini:

<b:includable id="post" var="post">

Ganti kode di atas dengan kode ini:

<div expr:content='data:post.title' itemprop='name alternateName'/>
<div expr:content='data:post.url' itemprop='url'/>
<div expr:content='data:blog.homepageUrl' itemprop='additionalType'/>
<div expr:content='data:post.thumbnailUrl' itemprop='image thumbnailUrl'/>
<span itemprop='description'><data:post.body/></span>
<span itemprop='author editor'><data:post.author/></span>
<span itemprop='datePublished dateCreated'><data:post.timestamp/></span>
<span itemprop='version'><data:blog.title/></span>
<span itemprop='contentLocation'>Indonesia</span></div>

Silakan ketuk tombol Save Template. Oke!

4. Tutorial Keempat: Cara Memasang Schema.Org di Blogger

Tutorial No. 4 ini saya dapatkan langsung dari Kompi Ajaib - Adhy Suryadi. Sumbernya ada di bawah, ya!

Pada langkah pertama, hapus semua koding Schema.Org yang ada di dalam blog kecuali Schema.Org untuk Breadcrumb.

Simpan kode di bawah ini, di bawah kode <article class='post'>

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<script type='application/ld+json'>{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.canonicalUrl/>"
},
"headline": "<data:view.title.escaped/>",
<b:if cond='data:blog.metaDescription'>"description": "<data:blog.metaDescription.escaped/>",<b:else/>"description": "Silahkan kunjungi postingan <data:view.title.escaped/> untuk membaca artikel selengkapnya dengan klik link di atas.",</b:if>
"datePublished": "<data:post.timestampISO8601/>",
"dateModified": "<data:post.lastUpdatedISO8601/>",
"image": {
"@type": "ImageObject",<b:if cond='data:post.firstImageUrl'>"url": "<b:eval expr='resizeImage(data:post.firstImageUrl,1280,&quot;1280:720&quot;)'/>",<b:else/>"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQIi41N1ORFEwnn7LUwzw_YDMepXNuPoeh08qjSHhKVwkic6U__PHN04sM5lR4dgl8mOGVSpwUhplqMwf85gPnkj8DTOIxPEhCssF0ZI65XO8Je4_cZO-_k9dLfcoifZn3xKPALN-zsQ/s1280/no-thumbnail.jpg",</b:if>
"height": 720,
"width": 1280
},
"publisher": {
"@type": "Organization",
"name": "<data:blog.title/>",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPAHAsU8q_Ktxow94F3zbAWNXyjznPsMfNsjSyUAeWKUIwas5Ey-CUZOueSy5J6BmtmJztkQqoFkrcHkQ-sM2-f0nKBy4Wid7Voxbbi1tEjsLiusP0jJMsQqpUEfEFa4aLKuK6T1qgoQQ/s1600/Kode-Blogger.png",
"width": 600,
"height": 60
}
},
"author": {
"@type": "Person",
"name": "<data:post.author/>"
}
}</script>
</b:if>

Silakan ketuk tombol Save Template. Oke!

Perhatikan!

Jika ingin mencoba tutorial memasang struktur data Schema.Org ini, harap perhatikan 3 poin di bawah ini:

Koding yang harus diganti mungkin berbeda yang ada di dalam Blogger Template milik kalian. Jadi, sesuaikan saja.
Tutorial ini bisa membuat Blogger Template menjadi Error. Perlu di-Backup untuk menghindari hal-hal yang gak diinginkan.
Blog saya - Kode Blogger - menggunakan tutorial No. 1 di atas.

Demikianlah tutorial bagaimana caranya membuat dan memasang Schema.Org di Blogger/Blogspot, didukung dengan tutorial lengkap dan mudah untuk diterapkan.

Sumber:

https://kodebloggerku.blogspot.com/
https://www.kompiajaib.com/2019/06/ld-json-script-schemaorg-blogposting.html
https://www.contohblog.com/2015/12/cara-memasang-schema-org-markup-di-blogger.html
https://newjohnywuss.blogspot.com/2016/04/cara-pasang-schema-org-structured-data-blog.html
https://www.komunikasipraktis.com/2015/10/cara-pasang-microdata-schema-blog.html

Arief Ghozaly Konten kreator artikel (writer/creator) sejak 2015.