Microdata atau Microformat & RDFa adalah sebuah struktur data untuk menerjemahkan informasi dalam tag HTML melalui pedoman dan cara yang telah ditetapkan serta di pahami oleh mesin pencari. Microdata terdiri dari berbagai macam, seperti
Events, Articles, Aggregate Ratings, Customer Reviews, Images, Organization, Video, Product, dll.
Baiklah, sebelum saya menunjukkan beberapa contoh dari Schema.org microdata markup yang dapat Anda terapkan di blog pada Blogger, mari kita lihat lebih dekat di Google + Snippet.
Things you should know before you markup your blog with Schema.org microdata :
I think you all know by now that Google strongly recommend bloggers and webmasters to ‘use’ +Snippet with Schema.org microdata markups. Now, I want you to focus on what Google had said:
If the page is annotated with schema.org microdata, the +Snippet will use the name, image, and description properties found on any schema.org type.
I don’t have any problems with Schema.org’s name and image properties. It’s the use of Schema.org’s description property that perplexes me the most. I have gone through Schema.org’s documentations and is able to conclude that the description property is more or less similar with HTML meta description tag property. In another word, the property should be unique!
Now, you tell me. How in the world are we going to make descriptions of our blog posts unique?
Sebagai contoh penggunaan microdata adalah Navigasi Breadcrumbs yang mengindikasikan lokasi Home beserta Label tempat suatu artikel tersebut berada. Untuk membuat microdata, kalian dapat memanfaatkan layanan membuat microdata online pada
Microdata Generator .
- Lakukan registrasi, kemudian login.
- Pilih Thing Generators
- Pilih Tipe Schema.org apa yang akan anda terapkan
- Isi data yang dibutuhkan
- Pasang pada situs anda dengan cermat dan sesuai.
Cara Memasang Microdata di Blogger ( Penerapan saya ) :
Perlu menjadi catatan bahwa microdata yang dimaksud merujuk kepada schema.org, seperti Blog, BlogPosting, dan Comment. Kemudian hal-hal yang terkait dengan 'basa-basi publik', rating blog yang dibuat oleh pengelola sendiri tidak disertakan.
Sebagai catatan, harap optimalkan serta sesuaikan sendiri penggunaannya sesuai dengan template masing-masing. Mungkin terkadang strukturnya agak berbeda.
1.
Schema.org Blog > BlogPosting Types tutorialBlog type of Schema.org specifies that associated content is a Blog. Lebih spesifik, tipe BlogPosting menentukan bahwa konten terkait adalah artikel post itu.
- Copy kode berikut, letakkan dibawah kode
<body><b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<b:if cond='data:blog.pageName == ""'>
<!-- Add schema.org description on home page -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
<b:else/>
<!-- Avoid duplicate schema.org description on label and search page -->
<b:if cond='data:blog.searchLabel'>
<meta content="Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/>" itemprop="description"/>
<b:else/>
<meta content="Arsip berdasarkan <data:blog.pageName/>" itemprop="description"/>
</b:if>
</b:if>
</div><!-- itemscope itemtype='http://schema.org/Blog' -->
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<!-- Add schema.org description on archive page -->
<meta content="Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/>" itemprop="description"/>
</div><!-- itemscope itemtype='http://schema.org/Blog' -->
<b:else/>
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'>
<!-- Add schema.org description on item and static page -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
</div><!-- itemscope itemtype='http://schema.org/BlogPosting' -->
</b:if>
</b:if>
<div itemscope='itemscope' itemtype='http://schema.org/Blog'>
- Kemudian, tambahkan kode
<meta itemprop="interactionCount" content="FacebookLikes:8"/>
<meta itemprop="interactionCount" content="GooglePlus:3"/></div>sebelum kode penutup </body>
- Lalu, cari kode <div class='post h-entry' dan ganti kode tersebut menjadi :
<div class='post h-entry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'><b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
</b:if>Keterangan :
Biasanya kode yang dicari tersebut berada di bawah <b:includable id='post' var='post'>
- Kustomisasi properti skema name, url, dan about.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'>
…
<b:includable id='title'>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description' itemprop='about'><span><data:description/></span></p>
</div>
</b:includable>
…
</b:widget>
</b:section>
- Masukkan properti blogID dan postID dalam kode post author dengan cuplikan seperti berikut ini :
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:blog.blogId' itemprop='owns'/>
<meta expr:content='data:post.id' itemprop='owns'/>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:blog.blogId' itemprop='owns'/>
<meta expr:content='data:post.id' itemprop='owns'/>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
- Kemudian cari kode <h3 class='post-title entry-title'>, delete dan ubah menjadi <h3 class='post-title entry-title' itemprop='name'>
- Kemudian kita dapat pula menambahkan properti url yang ditunjukkan oleh markah di bawah ini.
<b:if cond='data:post.link'>
<meta expr:content='data:post.link' itemprop='url'/>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<meta expr:content='data:post.url' itemprop='url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
.....
</b:if>
-
Setting Properti articleBodySkema BlogPosting dengan properti ini telah terdapat pula pada template standar Blogger™ dengan peletakkan yang unik & menarik.
<b:if cond='data:blog.metaDescription == ""'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
Untuk
microdata Blog > Comment akan dijelaskan pada tutorial selanjutnya dan masih terkait serta berlanjutan dari tahapan tutorial ini. Gabung di grup
IdBloggers untuk bertanya seputar blogging.
Demikian, cara membuat microdata pada blogger untuk melihat hasilnya silahkan klik ilustrasi brikut untuk melakukan check pada hasil kinerja blog saya :
Demo Structured Data Testing Tool for Rich Snippet Webmaster Google in ArticleDemo Rich Snippet Testing for Homepage URLDemo in Label Blog
