open-graphmetashareMahir3 mnt baca

Open Graph: Tampil Cantik Saat Dibagikan

Atur preview link di WhatsApp/Twitter dengan meta Open Graph dan Twitter Card.

Pernah share link di WhatsApp dan yang muncul cuma URL polos tanpa gambar? Bandingkan dengan link yang memunculkan gambar besar, judul rapi, dan deskripsi menarik. Link kedua jauh lebih mungkin diklik. Riset konsisten menunjukkan preview yang menarik bisa melipatgandakan angka klik.

Kabar baiknya: preview itu bukan kebetulan atau keberuntungan. Kamu yang mengaturnya lewat Open Graph, protokol meta tag yang dibaca WhatsApp, Facebook, Telegram, Discord, dan LinkedIn setiap kali seseorang membagikan link milikmu. Dengan beberapa baris di <head>, kamu mengendalikan kesan pertama kontenmu di jutaan layar chat.

Contoh 1: Empat Tag Open Graph Paling Esensial

html
<head>
  <title>Warkop Kita</title>
  <meta property="og:title" content="Warkop Kita: Kopi Tubruk Autentik" />
  <meta property="og:description" content="Kopi tubruk autentik di Bandung. Buka setiap hari 08.00 sampai 22.00." />
  <meta property="og:image" content="https://warkop.id/og-cover.jpg" />
  <meta property="og:type" content="website" />
</head>

Perhatikan baik-baik: Open Graph memakai atribut property, bukan name seperti meta tag biasa. Perbedaan kecil ini adalah hal yang paling sering membingungkan pemula.

Empat tag ini adalah fondasi minimum. Isi og:title dan og:description boleh berbeda dari title dan meta description biasa, misalnya dibuat lebih santai dan mengajak, karena konteksnya adalah chat, bukan halaman hasil pencarian.

Contoh 2: Lengkap dengan Twitter Card

html
<head>
  <title>Warkop Kita</title>
  <meta property="og:title" content="Warkop Kita: Kopi Tubruk Autentik" />
  <meta property="og:description" content="Kopi tubruk autentik di Bandung." />
  <meta property="og:image" content="https://warkop.id/og-cover.jpg" />
  <meta property="og:image:alt" content="Secangkir kopi tubruk dengan uap mengepul" />
  <meta property="og:url" content="https://warkop.id/" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Warkop Kita: Kopi Tubruk Autentik" />
</head>

twitter:card dengan nilai summary_large_image memberi preview gambar besar di X (Twitter). Tanpa ini, yang tampil hanya card kecil yang kurang menarik. og:image:alt adalah teks alternatif untuk gambar preview, sehingga aksesibilitas tetap terjaga.

Syarat Gambar OG yang Sering Dilanggar

  • Ukuran ideal 1200 x 630 piksel, rasio yang dipakai semua platform besar.
  • URL harus absolut (lengkap dengan https), bukan relatif seperti /og.jpg. Crawler platform tidak tahu domain milikmu kalau URL-nya relatif.
  • Ukuran file di bawah 1 MB agar preview cepat dimuat.

Kesalahan Umum: Salah vs Benar

html
<!-- SALAH: URL relatif, tidak akan terbaca crawler -->
<meta property="og:image" content="/images/og.jpg" />

<!-- SALAH: tertukar, OG harus pakai property -->
<meta name="og:title" content="Warkop Kita" />

<!-- BENAR -->
<meta property="og:image" content="https://warkop.id/og-cover.jpg" />

Catatan teknis: WhatsApp dan Facebook menyimpan cache preview dengan agresif. Setelah memperbaiki meta tag, pakai tool "Sharing Debugger" milik Facebook untuk memaksa refresh cache, kalau tidak preview lama bisa bertahan berhari-hari.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Lengkapi Meta Sosial

Halaman ini cuma punya og:title. Lengkapi: og:description, og:image (picsum 1200x630, URL absolut), og:type, dan twitter:card summary_large_image. Setiap kali kamu meluncurkan portofolio atau produk, skill inilah yang membuat link yang kamu bagikan di WhatsApp terlihat profesional dan layak diklik.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Galeri Foto</title>
  <meta property="og:title" content="Galeri Foto" />
</head>
<body>
  <h1>Galeri Foto</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Kuis Bab

Uji pemahamanmu: Bab 7: Aksesibilitas, SEO & Meta

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Apa aturan pertama memakai ARIA?

2.Elemen SEO terpenting di head?

3.Open Graph memakai atribut apa (bukan name)?

4.Apa pasangan meta tag wajib di setiap halaman modern?

5.Kapan alt boleh dikosongkan (alt="")?