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.
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 tutorial
Blog 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>
<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>- Masukkan properti blogID dan postID dalam kode post author dengan cuplikan seperti berikut ini :
<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>
<span class=post-author vcard>- Kemudian cari kode <h3 class=post-title entry-title>, delete dan ubah menjadi <h3 class=post-title entry-title itemprop=name>
<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 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>
<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 articleBody
Skema 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 Article
Demo Rich Snippet Testing for Homepage URL
Demo in Label Blog
Posting Komentar