seometagoogleMahir3 mnt baca

Meta Tag dan SEO Dasar

Optimalkan title, meta description, dan struktur heading agar Google paham halamanmu.

Kenapa SEO Dimulai dari HTML, Bukan dari Trik

Google tidak pernah "melihat" desain cantikmu. Yang dibaca robot Google adalah kode HTML: judul halaman, deskripsi, struktur heading, dan teks. Meta tag adalah caramu berbicara langsung dengan mesin pencari, memberi tahu "halaman ini tentang apa" sebelum robotnya menebak sendiri.

Kenapa ini penting untukmu? Bayangkan kamu bikin web portofolio atau toko online kecil. Tanpa SEO dasar, halamanmu tenggelam di halaman 10 hasil pencarian dan tidak pernah ditemukan siapa pun. SEO yang baik berarti pengunjung datang sendiri tanpa kamu harus bayar iklan. Dan fondasinya bukan trik mahal, melainkan HTML yang rapi.

Contoh 1: Head Minimal yang SEO-Friendly

html

<head>
  <meta charset="utf-8" />
  <title>Roti Bakar Enak di Bandung | Roti Kita</title>
  <meta name="description" content="Roti bakar dengan 20 varian topping di Roti Kita Bandung. Fresh dari oven setiap pagi." />
</head>

Hanya dua baris inti, tapi inilah yang menentukan nasib halamanmu di hasil pencarian.

title: Elemen SEO Paling Berpengaruh

Panjang ideal 50 sampai 60 karakter. Lebih panjang akan terpotong dengan tanda titik-titik di hasil pencarian.
Pola yang terbukti ampuh: Topik Utama | Nama Brand.
Setiap halaman wajib punya title unik. Title duplikat seperti "Home" di semua halaman membuat Google bingung membedakan halamanmu satu sama lain.

meta description: Iklan Gratis di Hasil Pencarian

Panjang ideal 120 sampai 160 karakter. Ini bukan faktor ranking langsung, tapi teks inilah yang tampil di bawah judul pada hasil pencarian. Deskripsi yang mengajak ("Pesan sekarang", "Gratis ongkir") menentukan apakah orang mengklik link milikmu atau milik kompetitor.

Contoh 2: Head yang Lebih Lengkap dan Realistis

html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Jasa Desain Logo Murah | Studio Kreatif Andi</title>
  <meta name="description" content="Jasa desain logo profesional mulai Rp150 ribu. Revisi sampai puas, file lengkap, pengerjaan 3 hari." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://studiokreatifandi.id/" />
</head>

viewport memastikan tampilan mobile benar (Google mengutamakan versi mobile), robots memberi izin halaman untuk diindeks, dan canonical menunjuk URL resmi bila halamanmu bisa diakses dari beberapa alamat berbeda.

Kesalahan Umum: Salah vs Benar

html

<!-- SALAH: title generik, description tidak ada -->
<title>Home</title>

<!-- SALAH: masih mengisi meta keywords, sudah diabaikan Google sejak 2009 -->
<meta name="keywords" content="roti, enak, murah, bandung, roti bakar" />

<!-- BENAR: spesifik, unik, mengajak klik -->
<title>Roti Bakar Enak di Bandung | Roti Kita</title>

Dan ingat prinsip terakhirnya: tidak ada meta tag yang bisa menyelamatkan konten jelek. Satu h1 berisi kata kunci utama, hierarki heading yang rapi, alt deskriptif, dan konten orisinal tetap menjadi fondasi utama yang tidak tergantikan.

Catatan teknis: SEO adalah maraton, bukan sprint. Butuh waktu berminggu-minggu sampai Google mengindeks dan menilai halamanmu, jadi terapkan yang benar sejak hari pertama dan bersabarlah menunggu hasilnya.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Optimalkan Halaman Toko

Halaman toko roti ini belum SEO-friendly. Perbaiki: title 50-60 karakter berpola "Topik | Brand", meta description 120-160 karakter yang mengajak klik, dan satu h1 berisi kata kunci. Skill ini dipakai hampir setiap pemilik website, dari blogger sampai pemilik UMKM: mengoptimalkan title dan description adalah cara termurah mendatangkan pengunjung dari Google tanpa bayar iklan.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Home</title>
</head>
<body>
  <p>Selamat datang.</p>
</body>
</html>

Open Sandbox