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
— kemungkinan meta deskripsi microdata berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan microdata ini dapat diletakkan di bawah
atau di bawah pengkodean navbar.
…
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.
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.
…
Kustomisasi properti skema name
, url
, dan about
Kita dapat memasukkan format microdata melalui tag-tag tertentu, seperti
atau meta. Sedangkan properti skema Blog
antara lain berisi name
, url
, dan about
dapat dikonfigurasi melalui elemen header blog.
…
itemprop='about'
>Markah schema.org/BlogPosting
Bagi pengguna template default pasti sudah tidak asing lagi dengan markah berikut, karena ia sudah dimasukkan oleh perancang.
itemprop='blogPost'
itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> 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
.
Catatan: selain properti
Sedangkan properti thumbnailUrl
, kita dapat pula menandainya dengan properti image
.blogId
dan postId
— setahu saya — dulu berada pada elemen 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:
itemscope='itemscope' itemtype='http://schema.org/Person'> Catatan: untuk melihat apakah landasan properti tersebut benar atau keliru, mari kita amati pada http://schema.org/Person.
Properti name
dan url
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.
…
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.
itemprop='description articleBody'
> itemprop='articleBody'
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.
>
…
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
).
>
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.
itemprop='discussionUrl' >
Properti keywords
Pengkodean dengan markah microdata BlogPosting
dengan properti keywords
secara sederhana dapat kita letakkan pada elemen post-labels
.
,
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).
itemscope='itemscope' itemtype='http://schema.org/Comment'> itemprop='name'
>
itemprop='comment'
itemscope='itemscope' itemtype='http://schema.org/Comment'> itemprop='name'
>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.
itemprop='comment'