Tag <meta> di <head> memberikan metadata tentang halaman — pengodean karakter, perilaku viewport, deskripsi SEO, dan pratinjau berbagi sosial. Tag tersebut tidak dirender tetapi dibaca oleh browser, mesin pencari, dan platform sosial.
charset memastikan teks (terutama non-ASCII) didekode dengan benar. Letakkan di tempat pertama.viewport adalah yang membuat situs responsive di seluler — tanpanya, ponsel merender pada lebar 980px palsu dan zoom out, merusak CSS responsive Anda.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> dan description adalah yang muncul di hasil Google, jadi mendorong click-through. canonical memberi tahu mesin pencari URL resmi.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Tag ini mengontrol kartu yang muncul ketika tautan Anda dibagikan di Facebook, LinkedIn, Slack, X, dll. — tanpanya Anda mendapatkan pratinjau yang jelek atau kosong.
charset dan viewport tidak dapat ditawar untuk rendering yang benar dan responsivitas seluler; title/description/canonical mendorong SEO; tag Open Graph mengontrol tampilan tautan Anda saat dibagikan.
Secara bersama-sama, mereka adalah lapisan metadata yang membuat halaman render dengan benar, berperingkat, dan dibagikan dengan baik.