Microformats2 untuk Website Pribadi - Membuat Halamanmu Dipahami Mesin

Ketika pertama kali menambahkan RSS feed dan Webmentions ke website pribadi, tampilan halaman bagi pengunjung manusia sebenarnya tidak berubah. Namun, di balik layar, halaman itu menjadi lebih mudah dipahami oleh tool lain. Microformats2 memakai gagasan yang sama: pertahankan HTML yang biasa dan mudah dibaca, lalu tambahkan kosakata kecil yang menjelaskan makna setiap bagian konten.

Ini bukan upaya mengubah website pribadi menjadi platform data yang rumit. Bayangkan saja kita memberi label yang jelas pada laci-laci di bengkel. Orang tetap bisa membuka lacinya seperti biasa, tetapi software tidak perlu lagi menebak tempat sekrup, kabel, atau alat ukur disimpan.

Apa yang Sebenarnya Dilakukan Microformats2?

HTML sudah menjelaskan struktur. Heading adalah heading, link adalah link, dan paragraf adalah paragraf. Namun, HTML belum tentu mengatakan bahwa sebuah blok tertentu mewakili seseorang, artikel, acara, atau balasan. Microformats2 menambahkan makna tersebut melalui nama class seperti h-card, h-entry, p-name, dan u-url.

Huruf pertama menunjukkan jenis nilainya. Class h-* menandai objek lengkap, p-* menandai plain text, u-* menandai URL, dt-* menandai tanggal atau waktu, dan e-* menandai konten HTML tertanam. Parser dapat mengumpulkan properti itu, sedangkan browser hanya menganggapnya sebagai class CSS biasa. Kemampuan hidup berdampingan dengan rapi inilah daya tarik utamanya.

Mulai dengan h-card untuk Identitasmu

Sebuah h-card menggambarkan orang atau organisasi. Di homepage pribadi, elemen ini dapat menghubungkan nama, foto profil, URL canonical, biografi singkat, dan link sosial. IndieWeb reader, contact tool, dan parser lain memperoleh representasi pemilik situs yang dapat diandalkan tanpa memerlukan API terpisah.

<section class="h-card">
  <img class="u-photo" src="/static/img/profile.jpg" alt="Portrait of Adam Muiz">
  <h2 class="p-name">Adam Muiz</h2>
  <p class="p-note">I write about the personal web, security, and self-hosting.</p>
  <a class="u-url" href="https://adammuiz.com/" rel="me">adammuiz.com</a>
</section>

Teks yang terlihat tetap bermanfaat meskipun tidak ada parser. Ini menjadi pengujian desain yang penting: Microformats2 seharusnya memperkaya halaman, bukan menjadi alasan untuk menyembunyikan identitas penting di metadata yang tidak pernah dilihat pembaca. Atribut rel="me" juga membantu menegaskan bahwa profil yang ditautkan dimiliki orang yang sama.

Jelaskan Artikel dengan h-entry

Untuk sebuah blog post, objek utamanya biasanya adalah h-entry. Properti di dalamnya dapat mengenali judul, tanggal publikasi, penulis, permalink, ringkasan, kategori, dan konten lengkap. Anggap saja seperti label pengiriman pada sebuah paket: paketnya tetap merupakan artikel, sedangkan label membantu berbagai sistem mengarahkan dan menafsirkannya secara konsisten.

<article class="h-entry">
  <h1 class="p-name">A Practical Guide to Microformats2</h1>
  <p>By <a class="p-author h-card" href="https://adammuiz.com/">Adam Muiz</a></p>
  <time class="dt-published" datetime="2026-08-09T18:00:00+07:00">9 August 2026</time>
  <a class="u-url" href="https://adammuiz.com/microformats2-personal-website/">Permalink</a>
  <div class="e-content">
    <p>The complete article belongs here.</p>
  </div>
</article>

Gunakan nilai ISO 8601 dalam atribut datetime, termasuk zona waktu jika waktunya penting. Tanggal yang dibaca manusia di antara tag dapat mengikuti bahasa dan gaya halaman. Pemisahan ini mencegah mesin salah membaca tanggal ambigu seperti 08/09/2026.

Pilih Properti Berdasarkan Makna, Bukan Tampilan

Kesalahan yang umum adalah menambahkan semua properti yang ditemukan dalam sebuah contoh. Mulailah dari informasi yang benar-benar dimiliki halaman. Untuk artikel, p-name, dt-published, p-author, u-url, dan e-content menjadi dasar yang berguna. Tambahkan p-category, u-photo, atau p-summary hanya jika elemen tersebut memiliki pasangan nyata di interface.

Jangan memilih p-* hanya karena sesuatu terlihat seperti teks. Permalink tetap merupakan URL sehingga tempatnya ada di u-url. Konten artikel yang kaya berada di e-content karena link, emphasis, daftar, dan code block di dalamnya penting. Semantic markup mirip dengan penamaan variable: ketepatan mempermudah integrasi berikutnya, sedangkan nama yang kabur meneruskan kebingungan ke hilir.

Hubungkan Microformats2 dengan Webmentions dan POSSE

Microformats2 semakin berguna ketika situs ikut serta dalam social web yang lebih luas. Webmention receiver dapat mengambil halaman pemberi link dan mencari h-entry untuk menentukan siapa penulisnya, apa isinya, dan apakah halaman itu merupakan reply, like, bookmark, atau repost. Properti seperti u-in-reply-to, u-like-of, dan u-repost-of membuat hubungan tersebut eksplisit.

Workflow POSSE juga dapat melakukan parsing pada source entry sebelum menyebarkannya ke platform lain. Daripada memelihara content schema kedua yang tertutup, publisher bisa mengambil judul, konten, gambar, dan canonical URL dari halaman publik. Microformats2 berperan seperti jaringan penghubung: ia tidak menggantikan RSS, Webmentions, atau IndieAuth, tetapi membantu bagian-bagian tersebut bertukar informasi yang lebih jelas.

Jaga Markup agar Mudah Dirawat

Tempatkan class Microformats2 di template yang memang sudah merender profil dan post. Hindari menduplikasi versi tersembunyi dari konten yang sama, karena salinan terlihat dan tersembunyi pada akhirnya akan berbeda. Jika CMS memiliki satu template artikel, perubahan kecil pada template dapat memperbaiki semua post lama dan baru.

Sebaiknya pisahkan pula styling class dari semantic class. Class seperti article-title dapat mengatur typography, sementara p-name menyampaikan makna. Keduanya boleh berada pada elemen yang sama. Dengan cara ini, redesign visual tidak mudah menghapus structured data secara tidak sengaja dan kosakatanya dapat bertahan ketika theme berganti.

Uji Apa yang Dilihat Parser

Halaman yang tampak benar di browser belum membuktikan bahwa strukturnya benar. Uji URL publik dengan Microformats parser di pin13.net/mf2. Periksa JSON hasilnya dan pastikan h-card atau h-entry yang diharapkan muncul bersama properti yang benar. Menguji halaman yang sudah deployed juga menemukan kesalahan template, cache, dan canonical URL yang mungkin tersembunyi dalam snippet lokal.

Setelah itu, lakukan pemeriksaan manusia. Nonaktifkan CSS atau periksa halaman dengan mempertimbangkan screen reader. Gambar tetap memerlukan alt text yang bermakna, urutan heading harus terjaga, dan link perlu masuk akal di luar konteks visualnya. Microformats2 meningkatkan keterbacaan mesin, tetapi tidak memperbaiki HTML yang tidak accessible. Semantics yang baik dimulai dari dokumen yang kokoh.

Terapkan Secara Bertahap

Kamu tidak perlu memberi markup pada seluruh arsip dalam satu malam. Mulailah dari h-card di homepage dan template utama h-entry. Validasi keduanya, amati bagaimana IndieWeb tool yang sudah ada menafsirkan halaman, lalu tambahkan properti reply, bookmark, event, atau review hanya ketika kebutuhan publishing memang memerlukannya.

Pendekatan bertahap ini seperti menata dapur sambil tetap memasak: beri label pada lemari yang paling sering digunakan, pastikan labelnya membantu, lalu lanjutkan satu rak demi satu rak. Tujuannya bukan memiliki kosakata sebanyak mungkin. Tujuannya adalah HTML tahan lama yang dapat dibaca manusia, dirender browser, dan dipahami tool independen tanpa meminta izin kepada platform pusat.

Kesimpulan

Microformats2 menawarkan peningkatan sederhana tetapi kuat untuk website pribadi. Dengan beberapa nama class yang dipilih secara teliti, profil menjadi h-card yang dapat dikenali dan post menjadi h-entry yang portabel. Situs tetap berupa HTML biasa, tetapi RSS reader, Webmention tool, IndieWeb client, dan integrasi masa depan memperoleh konteks yang lebih dapat diandalkan.

Mulailah dari konten yang terlihat, gunakan kumpulan properti bermakna yang paling kecil, lalu validasi hasil yang sudah dipublikasikan. Jika kamu telah memasang Microformats2 di situsmu, bagikan parser atau integrasi mana yang paling terbantu di kolom komentar. Contoh kecil dari website nyata bisa membantu orang lain membuat sudut web mereka lebih mudah dipahami.