Microdata pada Blogger.com

Beranda / Trik Blogger / Microdata pada Blogger.com

Microdata pada Blogger.com

Sebuah hal yang menarik, ketika Blogger™ memasukkan format microdata dalam desain default template, namun belum tentu berlaku jika kita serta merta menggantinya dengan template bukan default BLogger™. Microdata — seperti juga microformat & RDFa — bermanfaat untuk menerjemahkan informasi yang disertakan dalam tag HTML dengan cara yang dapat dipahami oleh mesin penelusur. Kemungkinan besar hal ini juga bermanfaat sebagai salah satu variabel dalam memperbaiki struktur blog yang telah diterbitkan pada posting sebelumnya.

Sebagian kecil contoh telah kami berikan dalam penerapan navigasi breadcrumbs dengan microdata. Sedangkan secara keseluruhan, saya akan mencoba untuk menguraikan pada posting ini. 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.

Markah (markup) meta deskripsi blog

Oleh karena meta deskripsi telah dimasukkan dalam blog — tepatnya pada markah <b:include data='blog' name='all-head-content'/> — kemungkinan meta deskripsi microdata berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan microdata ini dapat diletakkan di bawah <body> atau di bawah pengkodean navbar.

<body expr:class='"loading" + data:blog.mobileClass'>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
        <!-- 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'>
          &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        <b:else/>
          &lt;meta content=&quot;Arsip  berdasarkan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        </b:if>
      </b:if>
    </div><!-- itemscope itemtype='http://schema.org/Blog' -->
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
        <!-- Add schema.org description on archive page -->
        &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
      </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>

  …

</body>

Catatan: kode yang diberi warna biru merupakan deskripsi yang akan ditampilkan pada pengujian rich snippets.

Markah `schema.org/Blog`

Apabila kita mengambil referensi berdasarkan template standar Blogger™, maka skema microdata Blog akan terlihat seperti di bawah ini.

<b:if cond='data:blog.pageType == "index"'>
  <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
    <meta expr:content='data:blog.title' itemprop='name'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
  </div>
</b:if>

Oleh karena alasan tertentu, maka markah itu saya kustomisasi, dimana sebagian diletakkan sebagai deskripsi (sub judul “Markah (markup) meta deskripsi blog”) & sisanya akan dikonfigurasi pada elemen lain, seperti pada elemen pembungkus. Detail akan ditunjukkan pada contoh pengkodean berikut ini.

<div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'>
  <header id='header-content'>
    <div class='head-wrap'>
      <div id='header-group'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
      </div>
      <div id='search'>
      </div>
      <nav id='main-menu'>
      </nav>
    </div>
  </header>

  …

  <footer id='footer-content'>
    <p>&amp;copy; 2012 Aris Asmara diberdayakan oleh Blogger.com</p>
  </footer>
</div>

Kustomisasi properti skema `name`, `url`, dan `about`

Kita dapat memasukkan format microdata melalui tag-tag tertentu, seperti <span> atau meta. Sedangkan properti skema Blog antara lain berisi name, url, dan about dapat dikonfigurasi melalui elemen header blog.

    <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>

Markah `schema.org/BlogPosting`

Bagi pengguna template default pasti sudah tidak asing lagi dengan markah berikut, karena ia sudah dimasukkan oleh perancang.

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.thumbnailUrl'>
      <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
 
  …
 
</b:includable>

Ketika kita melakukan uji coba terhadap struktur data, terdapat peringatan bahwa properti image_url, blogId, dan postId tidak termasuk dalam skema. Mengapa hal ini terjadi? Setelah kembali melihat beberapa properti yang dapat dimasukkan dalam skema BlogPosting pada schema.org, ternyata tidak satupun properti di atas digolongkan sebagai bagian skema BlogPosting. Oleh karena itu kita dapat menghilangkan atau melakukan konfigurasi ulang terhadap ketiga properti itu. Berikut merupakan konfigurasi untuk properti image_url.

<b:if cond='data:post.thumbnailUrl'>
  <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
</b:if>

Catatan: selain properti thumbnailUrl, kita dapat pula menandainya dengan properti image.

Sedangkan properti blogId dan postId — setahu saya — dulu berada pada elemen <post-footer>, tepatnya dalam kode post-author. Mungkin alasan pemindahan tersebut nantinya akan terkait dengan skema struktur data Product (red: hanya opini saya). Kembali ke pokok utama, untuk sementara properti blogId dan postId dihilangkan dari hirarki skema, namun akan dimasukkan kembali dalam kode post-author dengan konfigurasi sebagai berikut:

<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>

Catatan: untuk melihat apakah landasan properti tersebut benar atau keliru, mari kita amati pada http://schema.org/Person.

Properti `name` dan `url`

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link'>
    <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'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    <b:else/>
      <data:post.title/>
    </b:if>
  </b:if>
  </h3>
</b:if>

Penambahan markah skema BlogPosting pada tag entry-title bisa terdiri dari beberapa versi. Seorang blogger mungkin tetap pada properti tersebut, sedangkan yang lain menambahnya menjadi itemprop='name headline' atau merubahnya menjadi itemprop='headline'. Variasi itu tidak akan menimbulkan pesan peringatan, ketika di uji pada alat rich snippets. 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>

Catatan: itemprop='url' tidak akan ditampilkan pada halaman posting, sehingga diperlukan kostumisasi kembali jika ingin memunculkannya. Nah, masalah ini akan dibahas pada penggunaan elemen post-timestamp.

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 == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + 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='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

Saya rasa ini merupakan terobosan yang sangat baik dari perancang. Konfigurasi pengkodean di atas akan berperan untuk membantu pengelola blog, terutama yang sudah ‘menelurkan’ banyak posting. Apa alasanya? Coba kita perhatikan markah tersebut, penggunaan <b:if cond='data:blog.metaDescription == ""'> dan diiringi dengan itemprop='description articleBody' merupakan kata kunci agar duplikasi meta deskripsi posting tidak terjadi, jika penulis lupa memasukkan deskripsi pada editor posting atau tidak mengaktifkan meta deskripsi dalam setelan pengaturan pada preferensi penelusuran. Arti sederhananya mungkin adalah deskripsi posting akan diterjemahkan secara otomatis, meskipun penulis tidak memasukkannya. Namun jika meta deskripsi posting telah dimasukkan penulis, maka yang akan ditampilkan adalah hasil isian dari penulis posting tersebut.

Properti `articleSection`

Para blogger yang biasanya menambah beberapa elemen di bawah posting — elemen posting terkait — dapat memanfaatkan markah articleSection. Tetapi ia bukan articleBody, agar lebih jelas akan saya coba contohkan seperti yang ditunjukkan pada pengkodean berikut.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>
</b:if>

Properti `url` dan `datePublished` pada `post-timestamp`

Properti ini juga telah ditambahkan oleh perancang template Blogger™. Ketika sebuah halaman posting terbuka, maka judul posting — umumnya — tidak memiliki pranala (link). Oleh karena itu skema microdata dengan properti url dialihkan ke elemen post-timestamp. Dengan catatan pengelola blog belum melakukan perubahan struktur data pada entry-title (post-title).

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.timestamp/></span></abbr></a>
    </b:if>
  </b:if>
</span>

Catatan: ada yang merasa aneh pada kode yang berwarna biru? Hal itu hanya ‘latah’ saya untuk menghilangkan peringatan pada alat rich snippets ketika menguji struktur data blog ini.

Properti `discussionUrl`

Skema properti ini akan muncul jika dan hanya jika pengelola menampilkannya pada halaman indeks, sedangkan pada halaman posting atau halaman statis —biasanya— tidak ditampilkan. Meskipun ditampilkan, maka besar kemungkinan pengkodean dengan menempatkan itemprop='discussionUrl' akan sama pula.

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' itemprop='discussionUrl'>
        <data:post.commentLabelFull/>
      </a>
    </b:if>
  </b:if>
  </b:if>
</span>

Properti `keywords`

Pengkodean dengan markah microdata BlogPosting dengan properti keywords secara sederhana dapat kita letakkan pada elemen post-labels.

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
     <a expr:href='data:label.url' rel='tag'><span itemprop='keywords'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>

Markah `schema.org/Comment`

Oleh karena kebanyakan para blogger menggunakan sistem komentar bersarang (threaded comments), maka konfigurasi hanya akan dilakukan di sekitar daerah judul komentar. Adapun properti yang dimanfaatkan sebagai markup adalah name dan interactionCount khusus pada jumlah komentar yang masuk. Menyisipkan atau memberi markup microdata pada sesi ini dibagi menjadi dua, yakni sebelum ada komentar (comments) & setelah ada komentar (threaded comments).

<b:includable id='comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;
  </b:if>
    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>

  …

  </div>
</b:includable>

<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;
  </b:if>
    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>

  …

  </div>
</b:includable>

Khusus bagi penggunaan komentar tidak bersarang, markup microdata yang dimanfaatkan adalah itemprop='UserComments' dengan tipe schema.org/UserComments. Sedangkan propertinya antara lain: commentText, commentTime, creator, dan replyToUrl serta dapat pula ditambahkan schema.org/Person sebagai bagian di dalam struktur schema.org/comment. Sedangkan penggunaan kode dengan latar berwarna kuning menjelaskan keterkaitan antara markah yang terkandung di dalam masing-masing tipe (itemtype), dimana mereka merupakan satu-kesatuan yang utuh.

Berdasarkan uraian yang sangat panjang di atas, format microdata dapat diterapkan beragam atau tergantung “pemberi markah”. Namun memberi sebuah markup terhadap data atau elemen tidak dapat dilakukan secara sembarangan, karena akan turut berpengaruh dalam menghasilkan markah yang semantik. Hal ini terkait pula dengan posting yang saya beri judul “Microdata pada Blogger.com”, sangat dimungkinkan terdapat kekeliruan atau kesalah-tafsiran, sehingga kritik dan saran sangat dibutuhkan untuk memperbaikinya. Seperti biasa Optimasi Blog selalu membuka formulir komentar lebar-lebar & seandainya telah ditutup pun kita masih bisa berbagi melalui halaman kontak. :)

Alat & Bahan bacaan

Berikut alat dan beberapa bahan bacaan yang mungkin akan menambah pengetahuan serta wawasan kita dalam memahami tentang struktur skema microdata.

Structured Data Testing Tool — Alat Webmaster Google.
Getting started with schema.org — schema.org.
Rich snippets (microdata, microformats, RDFa, and Data Highlighter) — Perkakas Webmaster: Tentang cuplikan kaya & data terstruktur.

20 komentar untuk “Microdata pada Blogger.com”

Unknown15 Desember 2012 pukul 17.48
Masih bingung mas, hehe
oh iya mas klu menurut mas mana yg lbh SEO antara template bwaan blogger dgn template buatan sndiri? Trus ap saja yang jadi patokan suatu template itu SEO atau Tidaknya? Mkci
BalasHapus
Balasan
Unknown15 Desember 2012 pukul 18.44
@Polbeng Kidz — Seharusnya jika membicarakan tentang template jangan mencari SEO friendly tetapi cari atau buat template yang terstruktur dengan baik. Template bawaan Blogger™ sebenarnya sudah terstruktur, namun masih sulit untuk dikustomisasi apabila berkaitan dengan standarisasi. Kalau memilih antara template default dengan buatan sendiri, saya lebih memilih buatan sendiri. :D
Semua template yang dapat diakses pengguna dan dapat diindeks oleh mesin penelusur, pada dasarnya sudah SEO. Nah, tinggal bagaimana dengan struktur dan isinya. Tips untuk memilih template: waktu muat relatif cepat, memiliki struktur yang tetap (termasuk heading, seperti h1. h2,… ,h6), mudah dinavigasi oleh pengguna, mudah dikustomisasi, responsif dengan perangkat mobile, dan sejenisnya.
BalasHapus
Balasan
Unknown15 Desember 2012 pukul 20.31
mkci untuk jawaban nya mas OB, lengkap banget!
Terus apa pendapat mas mengenai template kloningan? Seperti kita ketahui sekarang ini banyak sekali template kloningan semisal duplikat dari template o-om.com, kolom-tutorial, dll
sekilas saya lihat template tersebut sangat mirip dgn aslinya! Semua yang mas blng diatas terpenuhi, tapi saya yakin template tersebut tdax akan sama dgan aslinya dari sisi penelusuran mesin pencari (kecepatan index). Mungkin ada beberapa elemen dari gadget telah dideklarasi sebelum nya tapi tidak ditampilkan, bukankah itu membazir scrift dan memperlambat loading template? Mungkin pengkloning template hanya meniru tampilan nya saja tapi kurang memahami kode css yg telah dideklarasikan! Jadi banyak kode yang hanya jadi penghias dalam tanda kutip. Apa pendapat mas melihat fenomena ini?
BalasHapus
Balasan
Unknown16 Desember 2012 pukul 19.25
BW sini gan
BalasHapus
Balasan
herman17 Desember 2012 pukul 14.55
haduuhgkurang ngerti niih gan ,hhee
BalasHapus
Balasan
DEMIAN17 Desember 2012 pukul 21.22
wiih hebat gan ,,thnks ya dah share ke kita kita,,hee
BalasHapus
Balasan
samsul18 Desember 2012 pukul 11.44
nice share gan...
BalasHapus
Balasan
Template Booklet22 Desember 2012 pukul 11.29
keren gan postingannya, keep posting ya...
BalasHapus
Balasan
Unknown24 Desember 2012 pukul 18.09
SEO is best way to increrase your website visibility in search engine. If you worried about your busines then contact SEO Company India.
BalasHapus
Balasan
akbar ilyas28 Desember 2012 pukul 08.41
sip masss keep share
BalasHapus
Balasan
hilda29 Desember 2012 pukul 09.56
ok makasih y brow infonya,
salam kenal aj y www.terapiotak.com
BalasHapus
Balasan
Tips Trik SEO Blogger Pemula29 Desember 2012 pukul 20.08
mas mohon pencerahannya..
saya memasang kode ini..

< div class='post hentry' itemprop='blogPosts' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

tapi kenapa muncul error :

Peringatan: Page contains property "reviewrating" which is not part of the schema.
Peringatan: Page contains property "reviewbody" which is not part of the schema.

di rich snippet...

blog saya : yousake.blogspot.com ..

mohon pencerahannya ya mas... saya tunggu selalu jawabannya
BalasHapus
Balasan
Bocah Poris Blog's6 Januari 2013 pukul 13.04
ane masih ada kesalahan nih bro pas ane cek di Rich Snippet
Peringatan: Page contains property "blogid" which is not part of the schema.
kesalahannya begitu kenapa ya>
BalasHapus
Balasan
Bocah Poris Blogs6 Januari 2013 pukul 13.09
udah berhasil bro sudah tidak ada peringatan ..
BalasHapus
Balasan
Unknown31 Januari 2013 pukul 21.51
Artikel ini yg saya carii. saya masih belajar blog nih master, nyari2 tips seo buat blog saya ditunggu postingan2 selanjutnya yahhh..
BalasHapus
Balasan

Tambahkan komentar

Komentar baru tidak diizinkan.

Markah (markup) meta deskripsi blog

Markah schema.org/Blog

Kustomisasi properti skema name, url, dan about

Markah schema.org/BlogPosting

Properti name dan url

Properti articleBody

Properti articleSection

Properti url dan datePublished pada post-timestamp

Properti discussionUrl

Properti keywords

Markah schema.org/Comment