17.36
Ancer Afri
microdata
Microdata merupakan perkembangan bahasa markup yang masih termasuk kedalam machine-readable metadata (mesin pembaca metadata) untuk menguraikan konten web. Tag HTML, Microdata dan Microformat adalah bahasa markup unik yang saling melengkapi satu sama lain dan ketiganya sangat membantu mesin pencari dalam merayapi halaman-halaman web. Diantara ketiganya, microdata merupakan perkembangan bahasa markup terbaru yang keberadaannya memberikan persaingan selaras terhadap microformat yang menggunakan standar RDFa. Dalam penggunaannya, sebenarnya para webmaster bebas untuk menentukan format markup-nya, boleh menggunakan microformat saja, microdata saja atau menggunakan keduanya. Namun webmaster terutama Google menyarankan penggunaan kedua format tersebut.
Microdata adalah bagian dari spesifikasi HTML5. Namun juga tergantung pada perubahan kosakata dan atribut baru dalam penerapan metadata. Dan itu tidak dibatasi untuk setiap jenis tertentu dari konten web, untuk dapat menjelaskan konten unik yang tidak mampu ditangani oleh Microformat. Selanjutnya, microdata dapat menggunakan notasi DOM, yang dapat membuat parsing metadata lebih mudah.
Ada dua standar kosakata microdata yang digunakan saat ini yaitu kosakata dari data-vocabulary.org dan kosakata dari schema.org.
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.
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.
Read more: http://www.impoint.info/2013/09/membuat-microdata-di-blogger.html#ixzz3a1TGq5Vt
Dilarang copy paste artikel tanpa menggunakan sumber link - DMCA Protected
Follow us: @ravdania on Twitter | pemakan.worell on Facebook
0 komentar:
Posting Komentar