Digital Marketing
Open Graph (Open Graph Protocol)
Open Graph adalah protokol metadata yang mengontrol tampilan link saat dibagikan di media sosial, menentukan judul, deskripsi, dan gambar preview yang muncul.
TL;DR: Open Graph Protocol (OG) adalah standar metadata yang dikembangkan Facebook pada 2010 untuk mengontrol tampilan link saat dibagikan di media sosial. Tag OG menentukan judul, deskripsi, dan gambar preview yang muncul di Facebook, LinkedIn, WhatsApp, hingga Slack. Tanpa OG yang benar, link Anda tampil sebagai teks polos atau gambar random dari halaman.
Apa itu Open Graph?
Open Graph adalah set meta tag HTML dengan prefix og: yang Anda pasang di bagian <head> halaman. Saat seseorang membagikan URL, platform sosial akan mem-scrape meta tag ini untuk menyusun kartu preview (link preview card). Protokol ini sekarang menjadi de facto standard: hampir semua platform sosial dan aplikasi pesan membaca tag OG, walau Twitter punya variasi sendiri (Twitter Cards) yang kompatibel.
Analogi sederhananya: OG tag adalah meta description khusus untuk media sosial. Google pakai meta description untuk snippet di SERP, sedangkan Facebook dan LinkedIn pakai og:description untuk kartu share.
Tag Open Graph yang Wajib
| Tag | Fungsi | Contoh |
|---|---|---|
og:title | Judul yang tampil di preview | Judul halaman, 60-90 char |
og:description | Deskripsi di bawah judul | 150-200 char, jelaskan value |
og:image | Gambar preview | URL absolut, 1200x630 px |
og:url | URL canonical halaman | Full URL dengan https |
og:type | Jenis konten | website, article, product |
Tag opsional yang sering dipakai: og:site_name (nama brand), og:locale (id_ID untuk Indonesia), article:published_time, article:author.
Kenapa Penting?
Link yang tampil dengan gambar dan judul menarik di WhatsApp atau LinkedIn mendapat rasio klik lebih tinggi daripada link polos. Dalam proyek yang saya kerjakan, halaman yang punya OG image custom biasanya mengalami peningkatan share rate 1,5 sampai 3 kali lipat dibanding halaman dengan fallback gambar random.
OG juga memengaruhi persepsi profesionalisme. Saat founder UMKM membagikan website mereka di grup WhatsApp dan yang muncul adalah logo buram atau teks "undefined", calon klien langsung menurun kepercayaannya. Penelitian Facebook Developers menunjukkan link dengan metadata lengkap mendapat engagement 2 kali lebih tinggi.
Di Next.js, OG tag di-generate otomatis lewat metadata export dan generateMetadata(). Gunakan ukuran 1200x630 px untuk OG image supaya aman di semua platform.
Pertanyaan Umum
Apa bedanya Open Graph dengan Twitter Cards?
Open Graph dibaca Facebook, LinkedIn, WhatsApp, dan kebanyakan platform. Twitter Cards adalah varian khusus Twitter/X dengan prefix twitter:. Twitter sebenarnya fallback ke OG kalau tag Twitter tidak ada, jadi cukup pasang OG lengkap dan tambahkan twitter:card untuk kontrol lebih.
Berapa ukuran og:image yang ideal?
1200 x 630 pixel dengan rasio 1.91:1. Ukuran ini aman di Facebook, LinkedIn, dan WhatsApp. Ukuran minimum 600x315 px. Gambar di bawah 200x200 tidak akan ditampilkan sebagai card.
Istilah Terkait