HTML Meta Tags SEO Open Graph Twitter Card Structured Data
Definisi
<meta> di <head> memberi metadata halaman: description untuk SEO, Open Graph (og:*) untuk preview saat dibagikan di media sosial, Twitter Card untuk Twitter, dan JSON-LD structured data agar rich result di Google.
Kapan dipakai
Wajib untuk halaman publik yang ingin tampil bagus saat dibagikan (WhatsApp, Facebook, X) dan ingin SEO yang benar. Tanpa OG, link bagikan tampil polos (title doang).
Cara kerja
SEO & OG
html<title>Belajar Svelte</title>
<meta name="description" content="Panduan praktis Svelte dari nol." />
<meta property="og:title" content="Belajar Svelte" />
<meta property="og:description" content="Panduan praktis Svelte dari nol." />
<meta property="og:image" content="https://x.com/cover.png" />
<meta name="twitter:card" content="summary_large_image" />Structured data (JSON-LD)
html<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "Article", "headline": "Belajar Svelte" }
</script>Struktur alur
Loading diagram...
Catatan implementasi
og:imagesebaiknya ukuran ≥ 1200×630 px agar preview tajam.twitter:cardsering mengoverride OG di Twitter; set konsisten.- Canonical URL (
<link rel="canonical">) cegah duplicate content. - Di framework (Next.js/Laravel), generate meta lewat head API, jangan hardcode tiap file.
Kesalahan umum
- Tanpa og:image: preview sosial polos/abu.
- Deskripsi duplikat semua halaman: SEO buruk; buat unik per halaman.
- JSON-LD invalid: rich result tidak muncul; validasi di schema.org tester.
- Hardcode di banyak file: gunakan layout/head helper.