Meta Tag dan SEO Dasar

Kenapa head Penting untuk SEO?

Isi <head> tidak terlihat pengunjung, tapi dibaca mesin pencari dan browser. Meta tag yang benar menentukan judul di hasil Google, deskripsi cuplikan, dan tampilan saat link dibagikan ke WhatsApp atau Twitter.

Tiga Meta Tag Wajib

Setiap halaman harus punya tiga ini:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Judul Halaman yang Jelas</title>
</head>

• charset="UTF-8": encoding karakter. Tanpa ini, huruf seperti é atau emoji bisa tampil sebagai kotak aneh.
• viewport: memberi tahu browser HP untuk merender halaman selebar layar perangkat. Tanpa ini, halaman tampil zoom-out kecil di HP.
• <title>: judul tab browser dan judul di hasil pencarian Google.

Meta Description

<meta name="description" content="Belajar HTML dari nol sampai mahir dengan tutorial bahasa Indonesia yang santai dan contoh kode yang bisa langsung dicoba.">

Deskripsi ini sering dipakai Google sebagai cuplikan di bawah judul hasil pencarian. Bikin 120-160 karakter, menjelaskan isi halaman, dan mengundang diklik. Tiap halaman sebaiknya punya description yang unik.

Aturan Menulis title yang Baik

• Panjang 50-60 karakter (lebih dari itu kepotong di Google).
• Kata kunci penting di depan.
• Tiap halaman title-nya beda.

<!-- Kurang baik -->
<title>Home</title>

<!-- Baik -->
<title>Belajar HTML dari Nol | Learn OmniDev</title>

Open Graph: Tampilan Saat Dibagikan

Saat link dibagikan ke WhatsApp, Telegram, atau Twitter, tampil preview dengan gambar dan deskripsi. Itu dikendalikan meta tag Open Graph:

<meta property="og:title" content="Belajar HTML dari Nol">
<meta property="og:description" content="Tutorial HTML bahasa Indonesia, santai tapi lengkap.">
<meta property="og:image" content="https://situsmu.com/cover.jpg">
<meta property="og:url" content="https://situsmu.com/html">
<meta property="og:type" content="website">

Gambar og:image idealnya 1200x630 piksel. Tanpa Open Graph, preview link tampil polos tanpa gambar, dan itu menurunkan minat orang untuk klik.

Catatan teknis: Setelah mengubah meta tag, preview lama bisa masih tersimpan di cache WhatsApp/Twitter. Pakai validator resmi (misalnya Twitter Card Validator) untuk memaksa refresh cache. Jadi kalau preview tidak berubah, belum tentu kodemu salah.

Meta Robots

<meta name="robots" content="index, follow">

Memberi instruksi ke crawler: index berarti "halaman ini boleh masuk hasil pencarian", follow berarti "ikuti link di halaman ini". Untuk halaman yang tidak ingin muncul di Google (misalnya halaman admin), pakai noindex.

Contoh head Lengkap

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar HTML dari Nol | Learn OmniDev</title>
  <meta name="description" content="Tutorial HTML bahasa Indonesia dari nol: struktur dokumen, form, tabel, sampai proyek mini.">
  <meta name="robots" content="index, follow">

  <meta property="og:title" content="Belajar HTML dari Nol">
  <meta property="og:description" content="Tutorial HTML bahasa Indonesia, santai tapi lengkap.">
  <meta property="og:image" content="https://situsmu.com/cover.jpg">
  <meta property="og:type" content="website">
</head>

SEO teknis memang dalam, tapi fondasi HTML-nya cuma ini. Sisanya (konten berkualitas, kecepatan) menyusul belakangan.