Meta Tags & SEO — HTML

Coba share link artikel ke WhatsApp. Kadang muncul preview cantik (gambar besar + judul + deskripsi), kadang muncul polos cuma URL saja. Bedanya bukan dari…

Coba share link artikel ke WhatsApp. Kadang muncul preview cantik (gambar besar + judul + deskripsi), kadang muncul polos cuma URL saja. Bedanya bukan dari isinya — tapi dari meta tags-nya. Tag-tag yang user gak pernah liat di halaman, tapi mesin pencari (Google), social media (Twitter, WhatsApp), dan browser baca buat ngerti "halaman ini tentang apa". Invisible tapi krusial banget.

🤔 SEO dimulai dari meta tags. Halaman tanpa <meta description> = Google ngambil paragraf random buat preview di hasil search, sering jelek. Halaman tanpa <meta og:image> = link kamu di-share kelihatan polos tanpa preview. 5 menit nulis meta tags = ratusan klik bonus.

Meta Tag yang Wajib Ada

Tiap halaman HTML butuh minimal charset + viewport + <title>:

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

charset="UTF-8" — agar huruf dan simbol tampil dengan benar
viewport — agar halaman responsif di perangkat mobile

Meta Tag untuk SEO

<meta name="description"
      content="Belajar HTML dan CSS dari nol sampai mahir.">
<meta name="keywords" content="html, css, belajar, web">
<meta name="author" content="Nama Kamu">

Meta Tag untuk Media Sosial (Open Graph)

Mengontrol preview saat link di-share di WhatsApp/Twitter/LinkedIn:

<meta property="og:title" content="Judul Halaman">
<meta property="og:description" content="Deskripsi halaman">
<meta property="og:image" content="https://url-gambar.jpg">

Tag <title> juga sangat penting — ini yang muncul di tab browser dan hasil pencarian Google.

🎭 Analogi sehari-hari

Meta tag = stiker label di kardus paket. Tidak terlihat saat paket dibuka (tidak tampil di halaman), tapi vital untuk yang menerima — kurir baca label tujuan, mesin pencari baca deskripsi, social media baca preview.

⚠️ Jebakan yang sering ditemui

Lupa <meta name="viewport"> = mobile zoom-out aneh, tidak responsive.
<meta name="keywords"> deprecated Google sejak 2009 — buang waktu, tidak baca.
<meta name="description"> cap ~160 chars — Google truncate sisanya.
Open Graph (og:image) butuh URL ABSOLUTE — og:image="/foto.jpg" tidak jalan, harus https://domain.com/foto.jpg.
<meta charset="UTF-8"> HARUS dalam 1024 bytes pertama dari <head> — kalau tidak browser tebak charset, encoding bisa rusak.
og:image minimal 1200×630 untuk LinkedIn/Twitter Card preview cantik.
<title> dynamic via JS masalah untuk SEO (tidak semua bot eksekusi JS) — set di server-side.

TL;DR: Meta tags = info halaman buat mesin pencari/social media (invisible di halaman). Wajib: <meta charset="UTF-8">, <meta name="viewport"> (responsive), <meta name="description"> (cap ~160 char, Google snippet). Open Graph (og:title/og:description/og:image) buat preview cantik di WhatsApp/Twitter — og:image HARUS URL absolute, minimal 1200×630. <title> muncul di tab + hasil Google. Set di server-side (bot gak semua eksekusi JS). keywords deprecated.