Belajar HTML - Data dan Metadata Dokumentasi
Episode ini membedah metadata: meta charset dan viewport, deskripsi untuk SEO, Open Graph dan Twitter Card untuk berbagi, theme-color, serta favicon yang membentuk head yang lengkap.
#Pendahuluan
Elemen head adalah bagian dokumen yang paling jarang terlihat, tapi paling berpengaruh pada cara halaman ditemukan dan dibagikan. Episode 16 membahas data dan metadata dokumentasi: meta untuk charset dan viewport, deskripsi untuk hasil pencarian, Open Graph dan Twitter Card untuk berbagi di media sosial, serta favicon.
Metadata yang ditulis dengan benar menentukan bagaimana halaman tampil di hasil pencarian, di pratinjau tautan saat dibagikan, dan di tab browser. Ini pekerjaan kecil dengan dampak besar — dan sering dilupakan pengembang pemula.
#Meta Dasar
#charset dan viewport
Dua meta wajib yang sudah kalian kenal dari episode 2:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">charset="UTF-8" menetapkan pengkodean karakter sehingga semua huruf dan simbol terbaca benar. viewport membuat halaman menyesuaikan lebar perangkat — tanpa ini, halaman di ponsel tampak mengecil.
#Deskripsi untuk Hasil Pencarian
meta name="description" berisi ringkasan yang sering ditampilkan search engine di bawah judul hasil pencarian:
<meta name="description" content="Panduan lengkap belajar HTML dari dasar hingga siap produksi.">Tulis deskripsi 150 sampai 160 karakter, menyebutkan manfaat, dan menarik untuk diklik. Deskripsi yang tidak ada membuat search engine mengambil teks seadanya dari halaman.
#Open Graph dan Twitter Card
#Pratinjau Saat Dibagikan
Saat tautan dibagikan di media sosial, pratinjau — judul, gambar, deskripsi — diambil dari metadata Open Graph (og:) dan Twitter Card (twitter:):
<meta property="og:title" content="Belajar HTML">
<meta property="og:description" content="Panduan lengkap belajar HTML dari dasar.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://contoh.id/belajar-html">
<meta property="og:image" content="https://contoh.id/poster.png">
<meta name="twitter:card" content="summary_large_image">Atribut property (bukan name) dipakai untuk Open Graph. og:image sebaiknya berukuran minimal 1200 piksel lebar agar pratinjau tampil tajam.
#Verifikasi Metadata
Periksa metadata halaman mana pun lewat terminal:
curl -s https://contoh.id/belajar-htmlPerintah curl -s https://contoh.id/belajar-html menampilkan seluruh dokumen termasuk blok head — cara cepat melihat meta apa saja yang dikirim halaman tersebut.
#theme-color dan Favicon
#Warna Tab di Perangkat Mobile
meta name="theme-color" mengatur warna bilah browser pada sebagian perangkat mobile:
<meta name="theme-color" content="#2563eb">Pilih warna yang selaras dengan desain halaman. Atribut media bisa dipakai untuk memberikan warna berbeda bagi mode terang dan gelap.
#Favicon di Tab Browser
Favicon adalah ikon kecil yang tampil di tab. Hubungkan dengan link rel="icon":
<link rel="icon" href="favicon.ico" sizes="32x32">Gunakan format modern juga: link rel="icon" dengan file .svg atau png berukuran 32 piksel. Ikon ini juga dipakai saat halaman disimpan sebagai pintasan.
#Latihan: Head yang Lengkap
Susun head lengkap untuk sebuah halaman berbagi:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resep Rendang Sederhana</title>
<meta name="description" content="Resep rendang sederhana yang mudah diikuti di rumah dengan bumbu yang mudah didapat.">
<meta property="og:title" content="Resep Rendang Sederhana">
<meta property="og:description" content="Resep rendang yang bisa dicoba pemula.">
<meta property="og:type" content="article">
<meta property="og:image" content="https://contoh.id/rendang.png">
<meta name="theme-color" content="#7c2d12">
<link rel="icon" href="favicon.ico" sizes="32x32">
</head>
<body>
<h1>Resep Rendang Sederhana</h1>
<p>Ikuti langkah berikut untuk rendang yang empuk.</p>
</body>
</html>Setelah halaman siap, uji pratinjau berbaginya di validator Open Graph atau cukup bagikan tautannya. Periksa juga halaman produksi lain dengan curl -sI https://contoh.id untuk membandingkan header dan metadata yang mereka kirim.
#Kesalahan Umum dan Solusinya
#Deskripsi yang Terlalu Panjang
Search engine memotong deskripsi yang panjang. Jaga ringkas, 150 sampai 160 karakter, dengan kata kunci di awal.
#Og:image yang Kecil
Pratinjau dengan gambar kecil tampak pecah di media sosial. Gunakan gambar minimal 1200 piksel lebar.
#Penutup
Episode 16 melengkapi kepala dokumen kalian: meta charset dan viewport, deskripsi untuk hasil pencarian, Open Graph dan Twitter Card untuk berbagi, theme-color, serta favicon.
Inti yang harus dibawa pulang:
charsetdanviewportwajib di semua halaman.- Deskripsi yang ringkas meningkatkan klik dari hasil pencarian.
- Open Graph dan Twitter Card mengatur pratinjau saat tautan dibagikan.
theme-colormenyesuaikan warna bilah browser di mobile.- Favicon dihubungkan lewat
link rel="icon".
Di episode 17 selanjutnya kita akan membahas formulir lanjutan dan validasi browser — atribut validasi bawaan seperti required dan pattern, tipe input modern, serta Constraint Validation API lewat JavaScript.