July 28, 2017

Cara Memasang Microdata Schema Org di Template Blogger untuk SEO

July 28, 2017

Cara Memasang Microdata Schema Org di Template Blogger/Blogspot untuk SEO

SEBELUMNYA CB sudah share tentang Cara Memasang Micro Data Schema Markup di Template Blogger dengan cara simple dan cepat, yaitu dengan memasukkan kumpulan kode standar Schema Org untuk Blogger.

CB juga sudah share cara mengatasi semua error structured data saat dites di Webmaster Google.

Kali ini CB share cara memasang microdata schema markup di template blogger per elemen, atau di semua bagian template. Posting ini juga sekalian buat dokumentasi pribadi biar lebih mudah diakses.

Elemen Utama / Divisi Template Blogger: 

  • Body
  • Header
  • Menu
  • Content
  • Sidebar
  • Footer.
elemen desain template blogger website


Apa itu Schema Org atau Schema Markup?

Schema Org atau Schema Markup adalah rangkaian kode untuk memudahkan mesin pencari --terutama Google, Yahoo, dan Bing-- menemukan dan mengindeks blog atau postingan blog kita.

Microdata Schema Org di Template Blogger untuk SEO


Template-template terbaru biasanya sudah dilengkapi schema org atau microdata ini. Namun, jika belum ada --cek dulu di Structured Data Testing Tools, maka Anda lengkap saja dengan cara di bawah ini.

Structured Data Testing Tools

Cara Memasang Struktur Schema Microdata di Blogger/Blogspot

1. Template -> Edit HTML
2. Ganti kode <nav> atau kode navigasi menu blogger Anda dengan kode berikut ini:

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

3. Ganti kode <body> dengan kode ini:

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

4. Ganti kode <header> atau <header-wrapper> dengan:

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

5. Ganti kode <content-wrapper> atau <main-wrapper> dengan:

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

6. Ganti kode <div class='post hentry uncustomized-post-template' > dengan:

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

7. Ganti kode <article class='post hentry' expr:id='data:post.id'> dengan:

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

8. Cari dan ganti kode <div class='author-profile' itemprop='author' > dengan:

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

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

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

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

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

11. Ganti kode <div id='credit'> dengan kode:

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

12. Save!

NOTE
Jika setelah kode-kode di atas dipasangkan terjadi error, terutama karena kode no. 6 dan 7, maka lakukan perbaikannya di Cara Mengatasi Semua Error Structured Data.

Cara Gampang Memasang Struktur Microdata Schema untuk Pemula

Bagi Blogger pemula, cara di atas tentunya sangat ribet. Maka, CB sarankan gunakan cara mudah seperti CB cantumkan linknya di awal postingan ini.

Tapi, baiklah CB ulang saja kode dan cara pasangnya berikut ini

1. Tema/Template > Edit HTML
2. Copas kode berikut ini di bawah kode <body> atau <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>

<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:if>
</div>

Kode Alternatif
Kode berikut ini juga bisa digunakan, namun dipasangnya di bawah kode <b:includable id='post' var='post'>

<div class='post hentry uncustomized-post-template' itemscope='' itemtype='http://schema.org/Blog' property='blogpost' style='display:none;'>
<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'>CB Blogger</span>
<span itemprop='contentLocation'>Indonesia</span></div>

Demikian Cara Memasang Struktur Microdata Schema Org di Template Blogger/Blogspot untuk SEO. Good Luck & Happy Blogging! (www.contohblog.com).*

Referensi 
https://blog.kissmetrics.com/get-started-using-schema/
http://www.bloggerspice.com/2015/12/how-to-add-schema-markup-on-your-blogger-template.html

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

4 comments on Cara Memasang Microdata Schema Org di Template Blogger untuk SEO

  1. Min, kalau saya pakai cara yang perelemen dan cara gampang yang alternatif diatas nggak masalah kan bagi blog dan seo ? mohon tanggapannya. Terima kasih

    ReplyDelete
  2. tinggal satu lg yg datePublished & dateModified, saya mau pasang tp ragu takutnya tanggal jadi muncul di hasil pencarian. sdgkan sy sengaja umpetin tanggal krna bukan konten berita..

    ReplyDelete

Contact Form

Name

Email *

Message *