Metadata yang Bermanfaat

Head yang sehat bukan head yang paling penuh, melainkan head yang setiap barisnya punya pekerjaan jelas. Sepanjang section ini kita telah mengisi head dengan charset, viewport, title, description, canonical, robots, favicon, Open Graph, dan structured data. Nama metadata lain masih beredar pada templat-templat lama; sebagian berguna, sebagian sekadar warisan yang menambah payload tanpa efek. Chapter penutup ini merangkum prioritasnya dan merakit head final yang layak dipakai ulang.

Metadata yang Berdampak Nyata #

Berikut metadata yang layak dibawa setiap halaman produksi, dalam urutan pemasangannya di head:

• charset dan viewport: fondasi pengodean dan tampilan; dua baris terdepan.
• title dan description: wajah halaman pada tab, bookmark, dan hasil pencarian.
• canonical: menegaskan alamat utama di tengah variasi URL.
• robots: mengendalikan halaman yang masuk indeks; hanya pada halaman yang membutuhkannya.
• favicon dan apple-touch-icon: identitas visual dari tab hingga layar utama.
• Open Graph: kartu pratinjau berbagi di media sosial.
• structured data: kualifikasi rich results bila kontennya memenuhi jenisnya.

Metadata yang Sering Dipakai tanpa Manfaat #

Sebagian metadata tetap dipakai bukan karena berguna, melainkan karena tertinggal di templat. Tabel berikut merangkum yang paling sering dijumpai:

Meta keywords menarik dicermati: tag ini pernah diyakini mengangkat peringkat, padahal sejak 2009 Google membuangnya dari perhitungan. Menumpuk keyword justru memamerkan daftar target kepada pesaing tanpa imbal hasil apa pun. Generator pun serupa: barisnya aman dihapus dari templat mana pun.

theme-color dalam Satu Baris #

Satu metadata kecil yang pantas dipertahankan adalah theme-color: name dengan content berupa warna CSS yang valid. MDN menjelaskannya sebagai warna yang disarankan untuk menghias tampilan halaman atau antarmuka di sekelilingnya, misalnya bar alamat pada browser mobile. Satu baris, tanpa biaya, dengan efek yang langsung terlihat pada perangkat pendukungnya.

Checklist Head yang Rapi #

Sebelum halaman dipublikasikan, lewati checklist berikut:

• charset di baris pertama head, disusul viewport, lalu title.
• description satu per halaman, panjangnya dalam rentang lazim 150-160 karakter.
• canonical self-referencing dengan alamat lengkap.
• noindex hanya pada halaman yang memang tak boleh terindeks; robots.txt tidak menggantikannya.
• favicon SVG plus ICO; apple-touch-icon bila audiens memakai iOS.
• Open Graph dengan og:image 1200x630; structured data bila jenis kontennya cocok.
• Hapus metadata warisan yang tidak terbaca siapa pun.

Contoh Head Final #

File berikut merakit seluruh section ini menjadi satu head utuh untuk halaman katalog Toko Budi. File favicon.svg dapat disalin dari Chapter Favicon ke samping halaman ini:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Kopi dan Alat Seduh Lengkap — Toko Budi</title>
  <meta name="description" content="Katalog biji kopi dan alat seduh dari Toko Budi Surabaya. Pilih biji Gayo, Robusta Lampung, atau alat V60 untuk pemula.">
  <link rel="canonical" href="www.example.com/katalog/">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#1a6b54">
  <meta property="og:title" content="Katalog Kopi dan Alat Seduh Lengkap — Toko Budi">
  <meta property="og:type" content="website">
  <meta property="og:url" content="www.example.com/katalog/">
  <meta property="og:image" content="www.example.com/gambar/katalog.jpg">
  <meta property="og:description" content="Katalog biji kopi dan alat seduh dari Toko Budi Surabaya.">
</head>
<body>
  <h1>Katalog Kopi dan Alat Seduh</h1>
  <p>Head yang rapi adalah head yang kecil: setiap barisnya punya tugas yang jelas.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Ikon huruf B pada tab, dengan teks "Katalog Kopi dan Alat Seduh Lengkap — Toko Budi"
  - Pada browser mobile: bar antarmuka berwarna hijau #1a6b54
  - Pada hasil pencarian dan kartu berbagi: judul, cuplikan, dan gambar katalog

Mari kita telaah peran setiap baris penting di atas:

1. Baris 4-5: fondasi — charset di baris pertama, disusul viewport.
2. Baris 6-7: wajah pencarian — title 47 karakter dan description satu halaman.
3. Baris 8-9: alamat utama dan ikon SVG.
4. Baris 10: theme-color hijau toko.
5. Baris 11-15: kartu Open Graph untuk pratinjau berbagi.

Head final di atas merangkum seluruh section: kecil, terurut, dan setiap barisnya beralasan. Dengan metadata yang tepat, halaman siap dibaca manusia dan mesin; langkah berikutnya di section Accessibility menuntaskan keterbacaan bagi seluruh pengunjung, termasuk yang memakai teknologi bantu.

Referensi resmi untuk pendalaman:

• MDN Web Docs — meta name
• MDN Web Docs — Elemen meta
• Open Graph protocol
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Kopi dan Alat Seduh Lengkap — Toko Budi</title>
  <meta name="description" content="Katalog biji kopi dan alat seduh dari Toko Budi Surabaya. Pilih biji Gayo, Robusta Lampung, atau alat V60 untuk pemula.">
  <link rel="canonical" href="www.example.com/katalog/">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#1a6b54">
  <meta property="og:title" content="Katalog Kopi dan Alat Seduh Lengkap — Toko Budi">
  <meta property="og:type" content="website">
  <meta property="og:url" content="www.example.com/katalog/">
  <meta property="og:image" content="www.example.com/gambar/katalog.jpg">
  <meta property="og:description" content="Katalog biji kopi dan alat seduh dari Toko Budi Surabaya.">
</head>
<body>
  <h1>Katalog Kopi dan Alat Seduh</h1>
  <p>Head yang rapi adalah head yang kecil: setiap barisnya punya tugas yang jelas.</p>
</body>
</html>