Metadata HTML

May 1, 2025

Metadata adalah informasi tambahan tentang halaman web yang tidak ditampilkan langsung ke pengguna, tetapi sangat penting bagi:

Browser
Mesin pencari (Google, Bing, dll)
Media sosial (Facebook, Twitter, dsb)
Alat bantu (screen reader, aplikasi preview link, dsb)

Metadata ditulis di dalam tag <head> pada dokumen HTML.

Contoh Penulisan Metadata

<head>
  <title>Judul Halaman</title>
  <meta charset="UTF-8" />
  <meta name="description" content="Ini adalah deskripsi halaman." />
  <meta name="author" content="Nama Kamu" />
</head>

Fungsi Metadata

SEO (Search Engine Optimization)
Metadata seperti description dan keywords membantu mesin pencari memahami isi halaman.
Preview Sosial Media
Metadata khusus seperti Open Graph (og:title, og:image) digunakan saat halaman dibagikan di Facebook, WhatsApp, dll.
Encoding Karakter
Menggunakan meta charset="UTF-8" memastikan teks tampil dengan benar (terutama bahasa non-Inggris).
Responsivitas & Viewport
Metadata viewport penting untuk tampilan di perangkat mobile.
Identitas & Pemilik Halaman
Metadata author, copyright, application-name.
Kontrol Caching & Refresh
Bisa pakai metadata untuk mengatur refresh otomatis atau batas waktu cache.

Jenis-Jenis Metadata Umum

Tag Meta	Fungsi
`<meta charset="UTF-8">`	Mengatur encoding karakter
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	Supaya halaman responsif di HP
`<meta name="description" content="Deskripsi singkat halaman.">`	Deskripsi halaman untuk mesin pencari
`<meta name="keywords" content="html, belajar html, web">`	Kata kunci untuk SEO (tidak terlalu penting sekarang)
`<meta name="author" content="Nama Kamu">`	Nama pembuat konten
`<meta http-equiv="refresh" content="30">`	Reload halaman otomatis tiap 30 detik
`<meta name="theme-color" content="#ffffff">`	Mengubah warna tema tab di browser mobile

Metadata untuk Media Sosial (Open Graph & Twitter)

Untuk kontrol tampilan saat dibagikan di media sosial, gunakan metadata tambahan:

Open Graph (Facebook, WhatsApp, LinkedIn)

<meta property="og:title" content="Judul Artikel" />
<meta property="og:description" content="Ringkasan konten" />
<meta property="og:image" content="https://example.com/gambar.jpg" />
<meta property="og:url" content="https://example.com" />

Twitter Card

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Judul Artikel" />
<meta name="twitter:description" content="Deskripsi artikel" />
<meta name="twitter:image" content="https://example.com/gambar.jpg" />

Kesimpulan

Metadata tidak terlihat oleh pengguna, tapi sangat penting untuk SEO, media sosial, dan browser.
Metadata ditulis di dalam tag <head>.
Menambahkan metadata yang tepat bisa meningkatkan visibilitas dan profesionalitas halamanmu.

Kalau halaman web itu manusia, metadata itu KTP-nya. Nggak keliatan dari luar, tapi penting buat dikenali di mana-mana. 😄