Meta tag adalah tag di dalam <head> yang menyimpan keterangan tentang halaman. Isinya gak tampil di halaman. Yang membacanya browser, Google, dan aplikasi chat waktu link kamu dibagikan.
🧪 Tebakan cepat: kamu share link ke WhatsApp, lalu muncul kartu dengan gambar dan judul. Dari mana WhatsApp tahu gambarnya? Tebak dulu, jawabannya ada di bagian "Kartu preview pakai Open Graph".
Isi <head> yang dibutuhkan tiap halaman
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warung Bu Sri</title>
<meta name="description" content="Nasi uduk, kopi tubruk, dan teh manis hangat.">
</head>
<head>adalah bagian kepala halaman, letaknya sebelum<body>. Isinya keterangan tentang halaman, bukan isi yang tampil.<meta>adalah tag buat satu keterangan. Tag ini gak punya tag penutup.<meta charset="UTF-8">kasih tahu browser cara membaca hurufnya. UTF-8 mendukung hampir semua huruf di dunia. Tanpa ini, simbol kayak © bisa tampil jadi karakter aneh.<meta name="viewport" content="...">bikin lebar halaman mengikuti layar HP. Tanpa ini, browser HP menganggap halamannya selebar layar laptop lalu mengecilkannya, jadi tulisannya mungil.<title>adalah judul halaman. Muncul di tab browser dan jadi judul di hasil Google. Beda dengan meta,<title>punya tag penutup.<meta name="description" content="...">adalah ringkasan halaman. Google sering menampilkannya di bawah judul di hasil pencarian.
Meta yang pakai name selalu berpasangan dengan content: name menyebut keterangannya tentang apa, content berisi nilainya. Di halaman, semua ini gak kelihatan. Yang tampil tetap cuma isi <body>.
Kartu preview pakai Open Graph
Waktu link dibagikan, WhatsApp, Facebook dan LinkedIn membaca meta Open Graph buat bikin kartu preview:
<meta property="og:title" content="Warung Bu Sri">
<meta property="og:description" content="Sarapan nasi uduk mulai Rp 12.000.">
<meta property="og:image" content="https://example.com/warung/og.jpg">
<meta property="og:type" content="website">
- Open Graph pakai atribut
property, bukanname, dan namanya diawaliog:. og:titleadalah judul kartu,og:descriptionketerangannya,og:imagegambarnya (alamat lengkap darihttps://), danog:typejenis halamannya, misalnyawebsiteatauarticle.- Tiap meta cuma bawa satu isi, di
content-nya sendiri. Judul ditulis diog:title, jangan sampai tertukar keog:description.
⚠️ Jebakan yang sering ketemu
- Meta ditaruh di
<body>. Semua meta dan<title>ditulis di antara<head>dan</head>. contentkosong atau hilang.<meta property="og:title">tanpacontentgak ngasih tahu apa-apa.namebuat Open Graph. Standarnyaproperty:<meta property="og:title" ...>.- Description kepanjangan. Google biasanya memotongnya di sekitar 150 sampai 160 karakter. Tulis ringkas.
- Title kembar di semua halaman. Tiap halaman butuh judul sendiri biar bisa dibedakan di tab dan di Google.
TL;DR: Meta tag ditulis di <head> dan gak tampil di halaman. Tiap halaman butuh <meta charset="UTF-8">, meta viewport biar pas di HP, dan <title>. Tambah meta description buat ringkasan di Google. Buat kartu preview di aplikasi chat, pakai Open Graph: <meta property="og:..." content="..."> buat og:title, og:description, og:image dan og:type.
