Visual Open Graph: ukuran, panduan & contoh kode
Gambar Open Graph mengatur apa yang muncul saat seseorang membagikan halaman Anda di Facebook, Twitter, atau LinkedIn. Gambar yang salah atau tidak ada gambar sama sekali dapat menurunkan klik sebelum pengunjung sampai ke situs Anda.
Panduan ini membahas ukuran optimal, prinsip desain, implementasi HTML, dan alat pengujian — semua yang Anda butuhkan untuk membuat pratinjau sosial yang tepat di setiap platform.
Daftar Isi
Apa itu gambar Open Graph dan mengapa penting
Open Graph adalah protokol yang diperkenalkan oleh Facebook yang memungkinkan Anda mengontrol tampilan halaman web saat dibagikan di jejaring sosial. Tag meta og:image memberi tahu platform gambar mana yang digunakan sebagai thumbnail pratinjau.
Saat seseorang membagikan tautan di Facebook, Twitter, atau LinkedIn, platform mengambil metadata Open Graph dan membuat kartu pratinjau. Kartu tersebut — dengan gambar, judul, dan deskripsinya — sering kali menjadi satu-satunya yang dilihat sebelum memutuskan untuk mengklik.
Gambar Open Graph yang dibuat dengan baik dapat meningkatkan rasio klik secara signifikan. Gambar yang hilang atau ukuran yang salah menyebabkan pratinjau rusak, thumbnail terpotong, atau placeholder umum yang terlihat tidak profesional.
Rasio klik
Halaman dengan gambar OG berukuran tepat dan kontras tinggi selalu lebih baik daripada yang tanpa gambar atau gambar cadangan berkualitas rendah.
Lebih banyak klik dari setiap bagikan
Pengakuan merek
Identitas visual yang konsisten di setiap tautan yang dibagikan membangun keakraban dan kepercayaan dengan audiens sebelum mereka mengunjungi halaman.
Konsisten di semua jaringan
Sinyal SEO
Interaksi sosial yang didorong oleh pratinjau menarik menghasilkan backlink dan sinyal lalu lintas yang memperkuat peringkat pencarian organik seiring waktu.
Manfaat peringkat tidak langsung
Persyaratan gambar khusus platform
Setiap platform sosial memiliki dimensi, rasio aspek, dan batas ukuran file yang direkomendasikan. Memenuhi ini mencegah pemotongan, distorsi, dan placeholder cadangan.
| Platform | Ukuran yang disarankan | Rasio aspek | Ukuran file maksimal | Format |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Ukuran aman universal: 1200 × 630 piksel
Gambar 1200 × 630 px dengan rasio 1,91:1 bekerja di Facebook, LinkedIn, WhatsApp, Slack, dan sebagian besar platform lain. Untuk Twitter, gambar tetap tampil baik meski dipotong 16:9 — jaga konten penting di tengah agar tidak terpotong.
Prinsip desain untuk gambar Open Graph efektif
Gambar muncul dalam ukuran kecil di feed sosial. Rancang untuk thumbnail terlebih dahulu, bukan versi ukuran penuh.
Jaga elemen visual terpenting — logo, judul kuat, atau ilustrasi utama — dalam 80% tengah gambar. Platform sering memotong tepi. Apa pun di dekat batas berisiko terpotong di beberapa tampilan.
Kontras tinggi
Gunakan kontras kuat antara teks, elemen depan, dan latar belakang. Gambar dengan kontras rendah hilang di feed sosial yang ramai di samping posting kompetitor yang mencolok.
Terbaca dalam ukuran apa pun
Kejelasan tipografi
Jika gambar Anda berisi teks, gunakan font besar dan tebal — setara minimal 36px — dan hindari lebih dari dua baris. Teks kecil tidak terbaca pada skala thumbnail.
Jaga keterbacaan saat kecil
Konsistensi merek
Sertakan logo atau palet warna merek di setiap gambar OG. Setiap posting yang dibagikan adalah kesan merek meski tidak diklik.
Setiap bagikan = titik sentuh merek
Memilih format gambar yang tepat
Gunakan JPEG untuk gambar fotografi OG dan PNG untuk grafik dengan teks, logo, atau transparansi. WebP semakin didukung tapi belum universal di semua perayap sosial.
| Format | Terbaik untuk | Dukungan sosial | Ukuran file tipikal | Rekomendasi |
|---|---|---|---|---|
| JPEG | Foto, gradasi | Universal | 60 – 150 KB | Default untuk foto |
| PNG | Teks, logo, transparansi | Universal | 100 – 300 KB | Default untuk grafik |
| WebP | Keduanya, file lebih kecil | Twitter, Slack (tidak semua) | 40 – 120 KB | Hanya pelengkap |
Targetkan 100–200 KB untuk gambar OG Anda. Semakin kecil semakin baik, tapi jangan kompres terlalu agresif hingga gambar terlihat pecah di feed sosial. WhatsApp membatasi 300 KB — jika berbagi di WhatsApp penting, jaga semua gambar OG di bawah batas itu.
Untuk informasi lebih tentang pertukaran format gambar secara umum, lihat panduan optimasi gambar situs Untuk mengonversi gambar yang ada, panduan JPG ke WebP mencakup alur kerja sehari-hari.
Implementasi HTML dan tag meta
Tempatkan tag meta Open Graph di dalam elemen <head> HTML Anda. Tag og:image harus menggunakan URL absolut — jalur relatif tidak didukung oleh perayap sosial.
Tag minimum yang diperlukan adalah og:title, og:description, og:image, dan og:url. Tag twitter:card mengaktifkan format kartu gambar besar Twitter.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Selalu tentukan og:image:width dan og:image:height. Tanpa ini, platform harus mengambil dan memeriksa gambar sebelum menampilkan pratinjau, yang memperlambat tampilan dan meningkatkan kemungkinan placeholder cadangan.
Jika Anda menggunakan Blazor, komponen metadata SEO Blazor menangani semua tag Open Graph secara otomatis dengan URL yang peka budaya.
Pengujian dan debugging gambar Open Graph
Platform sosial menyimpan metadata Open Graph secara agresif. Setelah memperbarui tag atau gambar, gunakan alat debugger resmi untuk memaksa perayapan ulang dan verifikasi pratinjau sebelum membagikan.
Debugger Berbagi Facebook
Masukkan URL Anda di developers.facebook.com/tools/debug untuk mengambil metadata terbaru, melihat gambar yang dipilih Facebook, dan debug peringatan atau kesalahan validasi.
Paksa penyegaran cache
Validator Kartu Twitter
Gunakan cards-dev.twitter.com/validator untuk melihat pratinjau persis bagaimana kartu Twitter Anda akan tampil. Klik 'Preview card' untuk melihat thumbnail, judul, dan deskripsi dalam format kartu sebenarnya.
Pratinjau sebelum posting
Inspektur Postingan LinkedIn
Inspektur posting LinkedIn di linkedin.com/post-inspector menyegarkan cache LinkedIn untuk URL Anda dan menunjukkan bagaimana pratinjau posting akan terlihat dengan metadata saat ini.
Segarkan cache LinkedIn
Kesalahan umum dan cara memperbaikinya
Sebagian besar masalah gambar Open Graph termasuk dalam beberapa kesalahan berulang. Mengetahui apa yang harus dicari menghemat waktu debugging.
- URL relatif. Perayap sosial tidak menyelesaikan jalur relatif. Nilai og:image harus URL absolut lengkap termasuk protokol dan domain (https://yourdomain.com/path/image.jpg).
- Tag lebar dan tinggi hilang. Tanpa og:image:width dan og:image:height, platform harus mengunduh dan memeriksa gambar sebelum membuat pratinjau. Tambahkan keduanya untuk menghilangkan pengambilan tambahan ini.
- Gambar di balik autentikasi. Perayap tidak dapat mengakses gambar yang memerlukan login atau diblokir oleh robots.txt. Gambar OG harus dapat diakses publik tanpa header autentikasi.
- Rasio aspek salah. Gambar yang menyimpang jauh dari 1,91:1 akan dipotong atau ditampilkan dengan letterboxing yang mengganggu. Selalu uji rasio yang dimaksud sebelum dipublikasikan.
- Cache platform usang. Memperbarui file gambar tanpa mengubah nama file atau menambahkan query string berarti platform menyajikan versi cache lama. Perbarui nama file atau gunakan debugger platform untuk memaksa penyegaran.
Otomatisasi pembuatan gambar Open Graph
Untuk situs kecil dan blog, satu gambar OG statis per halaman adalah pendekatan paling sederhana dan andal. Untuk publikasi besar atau aplikasi yang setiap halamannya membutuhkan pratinjau sosial unik, pembuatan dinamis menjadi praktis.
Pembuatan gambar OG dinamis menghasilkan gambar unik saat permintaan — atau saat build — berdasarkan judul halaman, deskripsi, atau konten lain. Hasilnya adalah pratinjau unik dan sesuai merek untuk setiap halaman tanpa pembuatan gambar manual.
Kapan harus otomatisasi
Otomatisasi saat Anda memiliki banyak halaman yang masing-masing membutuhkan gambar unik, saat konten sering berubah, atau saat pembuatan gambar manual tidak dapat mengimbangi volume penerbitan Anda.
Konten volume tinggi atau dinamis
Kapan menggunakan gambar statis
Untuk sebagian besar halaman — halaman arahan, panduan, dan artikel evergreen — gambar statis yang dibuat dengan cermat lebih unggul dari yang dihasilkan dalam kualitas dan konsistensi merek.
Pendekatan kualitas utama
Alat populer untuk pembuatan dinamis termasuk Cloudinary (transformasi melalui parameter URL), Vercel OG (merender React/HTML menjadi gambar di edge), dan pipeline screenshot berbasis Puppeteer atau Playwright untuk semua stack teknologi.