Metadata Best Practices

Delapan chapter sebelumnya membedah metadata satu per satu, dari pasangan title dan description sampai data terstruktur di body. Chapter penutup ini merangkum semuanya menjadi daftar praktik yang bisa langsung kita terapkan, lalu menutup dengan template head lengkap yang siap disalin ke proyek apa pun. Anggap ringkasan ini sebagai daftar periksa setiap kali kita meluncurkan halaman baru.

Sepuluh Praktik Terbaik #

1. Tulis title yang unik untuk setiap halaman — praktik 50-60 karakter, kata kunci di depan, nama situs di belakang.
2. Pasang meta description di setiap halaman — janji konkret sepanjang 150-160 karakter, tanpa penumpukan kata kunci.
3. Nyatakan canonical URL absolut di setiap halaman; halaman utama menunjuk dirinya sendiri.
4. Lengkapi tujuh property Open Graph — og:title, og:description, og:type, og:url, og:image, og:site_name, og:locale — dengan og:image berupa URL absolut 1200x630 piksel.
5. Pasang favicon multi-format: SVG modern lebih dulu, PNG 32x32 dan 192x192 sebagai cadangan, apple-touch-icon untuk iOS.
6. Nyatakan lang pada html setiap halaman; untuk situs multi bahasa, tambahkan hreflang yang dipasang bolak-balik.
7. Jaga charset UTF-8 dan viewport pada dua baris pertama head — dua baris wajib yang kita kenal dari Section Struktur Dokumen.
8. Tambahkan data terstruktur JSON-LD pada halaman penting seperti artikel dan halaman produk.
9. Tinggalkan metadata usang: meta keywords dan meta content-language tidak berpengaruh apa pun.
10. Audit berkala: buka halamannya di tab, periksa hasil pencarian, dan uji kartu berbagi dengan alat debug tiap platform.

Anjuran dan Larangan Cepat #

Template head Siap Salin #

Kita rangkai seluruh praktik di atas menjadi satu head utuh untuk artikel blog fiktif Kedai Kopi Siti:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cara Menyeduh Kopi V60 untuk Pemula — Kedai Kopi Siti</title>
  <meta name="description" content="Rasio, suhu air, dan langkah menyeduh V60 di rumah dalam 10 menit.">
  <link rel="canonical" href="https://kedaikopisiti.example.com/blog/v60-pemula/">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/ikon-apple.png">
  <meta property="og:title" content="Cara Menyeduh Kopi V60 untuk Pemula">
  <meta property="og:description" content="Rasio, suhu air, dan langkah menyeduh V60 di rumah dalam 10 menit.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://kedaikopisiti.example.com/blog/v60-pemula/">
  <meta property="og:image" content="https://kedaikopisiti.example.com/gambar/v60-pemula.jpg">
  <meta property="og:site_name" content="Kedai Kopi Siti">
  <meta property="og:locale" content="id_ID">
</head>
<body>
  <h1>Cara Menyeduh Kopi V60 untuk Pemula</h1>
</body>
</html>

Mari kita bedah lima belas baris head tersebut:

1. Baris 4-5 (charset dan viewport): dua baris wajib di posisi terdepan — tanpa keduanya halaman rawan salah tampil karakter dan tampil sempit di ponsel.
2. Baris 6 (title): kata kunci Cara Menyeduh Kopi V60 di depan, nama situs di belakang, total di bawah 60 karakter.
3. Baris 7 (description): janji halaman yang menyebut isi konkret — rasio, suhu, durasi 10 menit.
4. Baris 8 (canonical): URL absolut yang menunjuk versi utama artikel.
5. Baris 9-11 (favicon): SVG modern lebih dulu, PNG 32x32 sebagai cadangan, apple-touch-icon untuk layar beranda iOS.
6. Baris 12-18 (Open Graph): tujuh property pokok — og:url sama dengan canonical, og:image absolut dengan ukuran ideal.

Seluruh baris template di atas bekerja di tab browser, daftar hasil pencarian, dan kartu berbagi — tidak satu pun tampil di area halaman, sehingga demo render tidak mungkin menunjukkan efeknya. Salin template ini sebagai titik awal berkas milikmu, lalu periksa masing-masing tempat tampilnya sebelum halaman diluncurkan.

Ringkasan #

• Sepuluh praktik terbaik menutup seluruh section: title unik, description per halaman, canonical absolut, Open Graph lengkap, favicon multi-format, lang, charset dan viewport, JSON-LD, tanpa meta usang, plus audit berkala.
• Template head lima belas baris di atas dapat disalin sebagai titik awal setiap halaman baru.

Section Metadata dan SEO selesai. Section berikutnya membahas keseimbangan yang tidak boleh tertinggal saat kita mengejar mesin pencari: Accessibility dalam HTML — memastikan halaman yang sama juga nyaman bagi pembaca layar dan pengguna keyboard.