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
Tidak ada komentar:
Posting Komentar