semanticarticleblogMahir3 mnt baca

Semantic: article Mendalam

Kriteria konten mandiri lewat tes sindikasi: blog post vs komentar, plus article bersarang yang benar.

Kenapa article Ada

Web modern tidak hanya dibaca di browser. Kontenmu disedot ke RSS reader, dirombak mode baca (reader mode), diindeks Google sebagai rich snippet, dan dibagikan ulang ke platform lain. Semua mesin itu butuh jawaban atas satu pertanyaan: mana unit konten yang mandiri di halaman ini? Jawabannya adalah article.

Tanpa article, mode baca sebuah situs berita harus menebak-nebak mana judul, mana isi, mana komentar. Dengan article, ia tinggal mengambil elemennya. Satu tag, efeknya ke seluruh ekosistem distribusi konten.

Tes Sindikasi: Kriteria "Mandiri"

Cara memutuskan apakah sesuatu layak jadi article: tes sindikasi. Tanyakan tiga hal:

Kalau konten ini disalin ke situs lain (RSS, agregator), apakah masih utuh maknanya?
Apakah ia punya judul/identitas sendiri yang membedakannya dari konten sekitar?
Apakah masuk akal untuk dibagikan sebagai satu unit (satu URL, satu kartu)?

Tiga-tiganya "ya"? Pakai article. Ada yang "tidak"? Pertimbangkan section atau div.

Contoh Sederhana: Kartu Blog Post

html

<article>
  <header>
    <h2>5 Kesalahan Menyeduh Kopi</h2>
    <p>Oleh Andi, 8 Oktober 2026</p>
  </header>
  <p>Kesalahan pertama: air terlalu panas...</p>
  <a href="/blog/5-kesalahan">Baca selengkapnya</a>
</article>

Kartu ini lolos tes sindikasi: disalin ke RSS reader tetap utuh, punya judul sendiri, dan layak dibagikan sebagai satu unit.

Contoh Realistis: Post + Komentar Bersarang

Fakta yang mengejutkan pemula: komentar juga article. Setiap komentar adalah unit mandiri (punya penulis, waktu, dan isi sendiri) yang terkait dengan article induknya. Caranya: sarangkan article di dalam article.

html

<article>
  <header>
    <h1>5 Kesalahan Menyeduh Kopi</h1>
    <p>Oleh Andi, 8 Oktober 2026</p>
  </header>
  <p>Isi lengkap artikel...</p>
  <footer>
    <p>Tag: <a href="#">seduh</a></p>
  </footer>

  <section>
    <h2>Komentar (2)</h2>
    <article>
      <header>
        <p><strong>Siti</strong>, 8 Oktober 2026 pukul 14.20</p>
      </header>
      <p>Nomor 3 relate banget, saya selalu pakai air mendidih!</p>
    </article>
    <article>
      <header>
        <p><strong>Budi</strong>, 8 Oktober 2026 pukul 15.05</p>
      </header>
      <p>Tambahan: grinder yang konsisten juga penting.</p>
    </article>
  </section>
</article>

Strukturnya bercerita dengan jelas: satu article induk (postingan), berisi satu section "Komentar", yang masing-masing komentarnya adalah article tersendiri. Mesin pencari paham komentar adalah konten terpisah, bukan bagian isi artikel.

Selain blog post dan komentar, yang lolos tes sindikasi: kartu berita di halaman arsip, kartu produk di katalog (punya nama, harga, deskripsi sendiri), postingan forum, dan widget cuaca.

Blog Post vs Komentar: Keduanya article?

Ya, dan ini sering membingungkan. Bedanya ada pada konteks, bukan tag-nya:

Blog post: article tingkat atas, biasanya satu per halaman (atau banyak di halaman arsip).
Komentar: article bersarang di dalam article post, dikelompokkan dalam section "Komentar".

Keduanya mandiri, keduanya bisa dibagikan (banyak platform punya permalink per komentar), jadi keduanya article.

Salah vs Benar

html

<!-- SALAH: hero banner bukan konten mandiri, ia milik halaman -->
<article>
  <h1>Selamat Datang di Toko Kami</h1>
  <p>Promo besar-besaran!</p>
</article>

<!-- BENAR: hero adalah bagian halaman, bukan unit tersendiri -->
<section>
  <h1>Selamat Datang di Toko Kami</h1>
  <p>Promo besar-besaran!</p>
</section>

html

<!-- SALAH: daftar komentar memakai div buta -->
<section>
  <h2>Komentar</h2>
  <div class="komentar">
    <p><strong>Siti:</strong> Bagus!</p>
  </div>
</section>

<!-- BENAR: tiap komentar adalah article mandiri -->
<section>
  <h2>Komentar</h2>
  <article>
    <header><p><strong>Siti</strong>, 8 Oktober 2026</p></header>
    <p>Bagus!</p>
  </article>
</section>

Catatan teknis: article boleh bersarang tanpa batas, tapi jangan berlebihan: sarang yang terlalu dalam (article dalam article dalam article) biasanya tanda pemodelan yang salah. Praktisnya: postingan > komentar sudah cukup dalam untuk kebanyakan kasus. Dan ingat, tiap article idealnya punya heading agar terdaftar di outline dokumen.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Halaman Arsip Blog

Buat halaman arsip dalam main: h1 "Arsip Blog", lalu tiga article kartu ringkas (tiap kartu: header berisi h2 judul + info penulis/tanggal, satu p cuplikan, satu link "Baca selengkapnya"). Tiap kartu harus lolos tes sindikasi: utuh bila disalin ke RSS reader. Kemampuan memodelkan unit konten mandiri adalah fondasi RSS, reader mode, dan SEO modern.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Arsip</title>
</head>
<body>
  <main>
    <!-- arsip di sini -->
  </main>
</body>
</html>

Open Sandbox