Meta Tags dan SEO Dasar
Ketika kamu membagikan link website ke WhatsApp, mengapa tiba-tiba muncul gambar dan deskripsi yang rapi?
Atau bagaimana Google tahu isi websitemu? Rahasianya ada pada Meta Tags.
Meta tags diletakkan di dalam <head> dan berfungsi memberikan data
tentang data (metadata) websitemu kepada mesin.
🔴 Meta Tags Dasar (Wajib)
Ini adalah tag yang harus selalu ada di setiap halaman web HTML5 modern:
<head>
<!-- Encode teks (Mendukung karakter khusus, emoji, huruf Arab/Kanji) -->
<meta charset="UTF-8">
<!-- Supaya website responsif di HP -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Judul di tab browser (Paling penting untuk SEO!) -->
<title>Belajar HTML Semantik | FullstackTalent</title>
</head>🔍 Meta Tags untuk SEO (Google)
SEO (Search Engine Optimization) adalah teknik agar website tampil di halaman pertama hasil pencarian Google. Ini dia tag kuncinya:
<!-- Deskripsi yang muncul di hasil pencarian Google (Max 160 karakter) -->
<meta name="description" content="Kursus HTML gratis untuk pemula. Pelajari cara membuat struktur website yang benar dan SEO friendly dari nol.">
<!-- Keyword pencarian (Sebenarnya Google sudah jarang pakai ini) -->
<meta name="keywords" content="belajar html, kursus coding, frontend web, tutorial web">
<!-- Author pembakar semangat -->
<meta name="author" content="FullstackTalent">🖥️ Preview di Google Search:
https://fullstacktalent.id > kursus-gratis
Belajar HTML Semantik | FullstackTalent
Kursus HTML gratis untuk pemula. Pelajari cara membuat struktur website yang benar dan SEO friendly dari nol.
💬 Open Graph (Visual di Sosmed/WhatsApp)
Bosan ngirim link di WhatsApp tapi cuma muncul teks biru doang? Gunakan atribut Open Graph (OG) milik Facebook. Protokol ini kini digunakan oleh FB, WA, LinkedIn, dll.
<meta property="og:title" content="Panduan Lengkap HTML5">
<meta property="og:description" content="Belajar jadi Frontend Developer dari 0 sampai mahir.">
<!-- Gambar yang muncul di preview Card -->
<meta property="og:image" content="https://fullstacktalent.id/img/html-banner.jpg">
<meta property="og:url" content="https://fullstacktalent.id/kursus">
<meta property="og:type" content="website">🖥️ Preview Share WhatsApp:
Panduan Lengkap HTML5
Belajar jadi Frontend Developer dari 0 sampai mahir.
fullstacktalent.id
🐦 Twitter (X) Cards
Meskipun Open Graph seringkali dibaca juga oleh Twitter, Twitter punya meta tag khususnya sendiri untuk menampilkan format card yang besar.
<!-- Buat tampilan gambar besar (bukan kotak kecil) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@fullstacktalent">
<meta name="twitter:title" content="Panduan Lengkap HTML5">
<meta name="twitter:description" content="Belajar jadi Frontend Developer dari 0.">
<meta name="twitter:image" content="https://fullstacktalent.id/img/html-banner.jpg">🟢 Favicon (Ikon di Tab Browser)
Lihat logo kecil yang membedakan tab browser kamu? Itulah favicon. Kita mendefinisikannya dengan tag <link> di dalam head.
<!-- Favicon standar .ico atau .png -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Ikon ketika website 'di-Add to Home Screen' di iPhone/iPad -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">📋 Ringkasan
<head> dan umumnya tidak terlihat secara
langsung oleh user di *body* halaman.
viewport
Wajib hukumnya di era HP agar layout websitemu bisa mengikuti lebar layar HP. Tanpa ini webmu akan
kelihatan sangat kecil (zoom-out).
description adalah kalimat promosi singkat
jualanmu di hasil mesin pencari Google.
og:title,
og:image, og:description (Open Graph) bertanggung jawab
bikin link WhatsApp mu cantik ada gambarnya ketika di share.