Generator OG Image — Buat Gambar Sosial 1200×630

Apa itu gambar OG?

Gambar OG (Open Graph) adalah gambar yang muncul saat sebuah tautan dibagikan di Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage, dan banyak aplikasi lain. Gambar ini dideklarasikan dengan meta tag og:image dari protokol Open Graph, yang awalnya dibuat oleh Facebook dan kini dibaca hampir semua platform yang menampilkan preview tautan. X juga membaca twitter:card. Jika diatur ke summary_large_image, gambar akan tampil selebar penuh. Preview yang jelas dan punya identitas brand membuat tautan kamu menonjol di tengah banyaknya konten, dan memberi tahu orang apa yang akan mereka dapat sebelum mereka mengklik.

Ukuran yang tepat: 1200 × 630

1200×630 piksel (rasio aspek 1,91:1) adalah ukuran yang direkomendasikan Facebook dan tampil tajam di berbagai platform. Kartu ringkasan besar di X menggunakan bingkai 2:1, jadi beberapa piksel di bagian atas dan bawah mungkin terpotong. Generator ini menjaga teks tetap berada dalam margin aman. Usahakan ukuran file di bawah 5 MB (batas X; Facebook mengizinkan 8 MB). PNG dari alat ini biasanya berukuran beberapa ratus KB, dan JPEG lebih kecil untuk latar foto.

Meta tag yang kamu butuhkan

<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

URL og:image harus absolut (termasuk https://) dan dapat diakses publik. Jangan letakkan di balik login, diblokir oleh robots.txt, atau disajikan dari localhost. Mencantumkan lebar dan tinggi membuat Facebook bisa menampilkan preview saat pertama kali dibagikan, tanpa menunggu gambar selesai diunduh. Buat meta tag lainnya dengan Generator Meta Tag, lalu cek hasil live-nya dengan Open Graph Checker.

Tips desain untuk preview tautan

• Teks singkat dan besar. Preview sering ditampilkan dengan lebar sekitar 500 px atau lebih kecil di ponsel. Usahakan judul 4–10 kata. Fitur auto-fit akan memberi peringatan jika teks harus dipotong.
• Jangan mengulang URL. Platform sudah menampilkan domain dan judul halaman di bawah gambar, jadi gunakan gambar untuk daya tarik, bukan judul panjang plus deskripsi.
• Kontras tinggi. Gunakan slider kegelapan pada foto agar teks putih tetap terbaca, dan uji di tema terang maupun gelap.
• Satu gambar per halaman. Gambar OG yang unik untuk halaman penting, seperti artikel blog, halaman produk, atau dokumentasi, jauh lebih menarik perhatian dibanding satu logo untuk seluruh situs.
• Menyegarkan cache. Platform menyimpan cache preview. Setelah mengubah gambar, scrape ulang URL-nya di Sharing Debugger Facebook atau Post Inspector LinkedIn, atau beri nama file yang baru.

Di Webflow, atur gambar per halaman di Page settings → Open Graph settings, atau hubungkan ke field gambar untuk halaman koleksi CMS.

Juga dicari sebagai: og image, gambar open graph, gambar share sosial, twitter card image, gambar preview link, og image 1200x630, meta tag og:image, gambar cover blog.

Tool yang cocok dipakai bersama Generator OG Image

• Kode ke Gambar — Tempel potongan kode dan dapatkan screenshot kode yang rapi dalam hitungan detik: syntax highlighting untuk JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go, dan PHP, pilihan tema, bingkai jendela dengan nama file, latar belakang gradasi atau transparan, jarak dalam (padding), dan nomor baris.
• Simulator SERP — Tulis title tag dan meta description, lalu lihat di mana Google kemungkinan akan memotongnya.
• Pengubah Ukuran Gambar — Ubah ukuran foto ke dimensi piksel atau persentase tertentu, crop agar pas dengan ukuran media sosial, atau muatkan gambar ke dalam bingkai dengan warna latar — semuanya diproses langsung di browser kamu.
• Kompres Gambar — Perkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan pengaturannya.