Lompat ke konten
Aback Tools Logo

Generator Gambar Open Graph

Buat banner OG pratinjau sosial pada ukuran standar 1200×630 piksel dengan generator gambar Open Graph kami. Sesuaikan judul, subjudul, warna, templat tata letak, dan pola latar, lalu unduh sebagai PNG seketika. Semua rendering berjalan lokal di browser Anda — tanpa pendaftaran.

Open Graph Image Generator

Create social preview (OG image) banners at the standard 1200×630 pixel size. Customise the title, subtitle, colors, layout, and background pattern, then download as PNG. All rendering runs locally in your browser - no data is sent to any server.

Content

23/80

Logo Badge

Colors

Live Preview (1200×630)

Updates instantly

Add to your HTML:

<meta property="og:image" content="https://yoursite.com/og-image.png" />

Mengapa menggunakan generator gambar Open Graph kami?

  • Pembuatan gambar OG instan: hasilkan gambar OG pratinjau sosial pada ukuran standar 1200×630 piksel seketika di browser Anda. Generator gambar Open Graph kami memperbarui pratinjau langsung secara real-time saat Anda mengetik — tanpa menunggu, tanpa bolak-balik ke server.
  • Generator gambar Open Graph aman online: semua rendering gambar OG terjadi lokal di browser Anda menggunakan API HTML Canvas. Judul, deskripsi, warna merek, dan teks logo Anda tidak pernah meninggalkan perangkat — generator gambar Open Graph sepenuhnya privat.
  • Generator gambar Open Graph tanpa instalasi: gunakan generator gambar Open Graph langsung di browser modern mana pun tanpa perangkat lunak desain, plugin, atau akun. Hasilkan gambar OG dari perangkat apa pun dan unduh sebagai PNG seketika.
  • 100% gratis dengan 5 templat tata letak: generator gambar Open Graph sepenuhnya gratis, tanpa pendaftaran, tanpa batas penggunaan, dan tanpa iklan. Pilih dari 5 templat tata letak, 4 pola latar, warna kustom, latar gradien, dan opsi font.

Kasus penggunaan umum generator gambar Open Graph

  • Pratinjau sosial postingan blog: gunakan generator gambar Open Graph untuk membuat gambar OG unik bagi setiap postingan blog. Saat pembaca membagikan artikel Anda di Twitter, LinkedIn, atau Facebook, banner kustom akan muncul alih-alih placeholder kosong.
  • Landing page SaaS dan produk: tim produk memakai generator gambar Open Graph untuk membuat gambar pratinjau sosial bermerek bagi landing page mereka. Gambar OG yang menarik meningkatkan rasio klik saat tautan dibagikan di Slack, Discord, dan media sosial.
  • Dokumentasi dan alat developer: situs alat developer dan portal dokumentasi memakai generator gambar Open Graph untuk membuat gambar OG yang konsisten di setiap halaman. Tata letak minimal dan rata kiri sangat cocok untuk konten teknis.
  • Promosi acara dan webinar: penyelenggara acara memakai generator gambar Open Graph untuk membuat banner pratinjau sosial bagi halaman pendaftaran webinar, sesi konferensi, dan acara online. Tata letak kartu gradien menciptakan tampilan rapi dan profesional.
  • Halaman produk e-commerce: toko online memakai generator gambar Open Graph untuk membuat gambar OG bermerek bagi halaman kategori produk dan kampanye promosi. Warna aksen kustom mengikuti pedoman merek tanpa perlu desainer.
  • Portofolio dan situs pribadi: developer dan desainer memakai generator gambar Open Graph untuk membuat pratinjau sosial yang profesional bagi portofolio mereka. Badge logo berisi inisial dan skema warna kustom menciptakan kesan pertama yang berkesan.

Apa itu gambar Open Graph?

Gambar Open Graph (gambar OG) adalah banner pratinjau yang muncul saat URL dibagikan di platform sosial seperti Twitter/X, Facebook, LinkedIn, Slack, Discord, dan iMessage. Gambar ini ditentukan oleh tag <meta property="og:image"> di <head> halaman Anda. Ukuran standarnya adalah 1200×630 piksel (rasio aspek sekitar 1,91:1), yang dirender dengan benar di semua platform utama. Tanpa gambar OG, platform sosial akan menampilkan pratinjau kosong atau memilih gambar acak dari halaman Anda. Generator gambar Open Graph kami membuat gambar OG yang tampak profesional dengan dimensi tepat serta teks, warna, tata letak, dan pola latar yang dapat disesuaikan — semuanya dirender lokal di browser Anda.

Cara kerja generator gambar Open Graph kami

  1. Isi konten Anda: masukkan judul halaman (hingga 80 karakter), subjudul atau deskripsi (hingga 120 karakter), serta nama situs atau URL. Secara opsional tambahkan badge logo berisi 1-3 karakter inisial. Generator gambar Open Graph memperbarui pratinjau langsung seketika saat Anda mengetik.
  2. Sesuaikan desainnya: pilih templat tata letak (Terpusat, Rata Kiri, Split, Minimal, atau Kartu Gradien), pilih font, pilih pola latar, dan tetapkan warna merek Anda lewat pemilih warna. Aktifkan opsi latar gradien dan pembatas aksen. Semua rendering terjadi lokal di browser Anda menggunakan API HTML Canvas — data Anda tidak pernah meninggalkan perangkat.
  3. Unduh dan terapkan: klik Unduh PNG untuk menyimpan gambar OG 1200×630 ke perangkat Anda. Unggah ke server atau CDN Anda, lalu tambahkan meta tag og:image ke halaman Anda yang mengarah ke URL gambar yang dihosting.

Apa yang dihasilkan generator gambar Open Graph

  • PNG 1200×630: ukuran gambar OG standar yang direkomendasikan Facebook, Twitter/X, LinkedIn, dan sebagian besar platform lain. Format PNG mendukung teks yang tajam dan latar tanpa transparansi.
  • 5 templat tata letak: Terpusat (judul dan subjudul di tengah), Rata Kiri (teks rata kiri), Split (bilah aksen di kiri), Minimal (bersih, tanpa logo), dan Kartu Gradien (efek kartu bertumpuk).
  • 4 pola latar: Tidak ada (hanya warna solid atau gradien), Titik, Grid, dan Garis Diagonal — masing-masing dirender dengan opasitas rendah di atas warna latar untuk efek tekstur halus.
  • Kontrol warna penuh: pemilih warna independen untuk latar, ujung gradien, teks, dan warna aksen — plus tombol gradien dan pembatas untuk kontrol detail atas gaya visual.

Cara menambahkan gambar OG ke situs web Anda

Setelah mengunduh gambar OG dari generator gambar Open Graph, unggah ke server web, CDN, atau layanan hosting gambar Anda. Lalu tambahkan meta tag berikut ke <head> halaman HTML Anda: <meta property="og:image" content="https://situsanda.com/og-image.png" /> dan <meta property="og:image:width" content="1200" /> dan <meta property="og:image:height" content="630" />. Untuk Twitter/X, tambahkan juga <meta name="twitter:card" content="summary_large_image" />. Gunakan Facebook Sharing Debugger atau Twitter Card Validator untuk memastikan gambar OG Anda muncul dengan benar.

Pertanyaan yang Sering Diajukan

Generator gambar Open Graph adalah alat berbasis browser yang membuat banner pratinjau sosial pada ukuran standar 1200×630 piksel. Gambar OG ini muncul saat URL dibagikan di Twitter/X, Facebook, LinkedIn, Slack, dan Discord. Generator gambar Open Graph kami merender semuanya secara lokal di browser Anda — tanpa pendaftaran.

Ukuran yang disarankan untuk gambar OG adalah 1200×630 piksel (rasio aspek 1,91:1). Ukuran ini dirender dengan benar di Facebook, Twitter/X, LinkedIn, dan sebagian besar platform lain. Generator gambar Open Graph kami menghasilkan gambar tepat 1200×630 piksel.

Tentu saja. Generator gambar Open Graph merender semuanya secara lokal di browser Anda menggunakan API HTML Canvas. Judul, deskripsi, warna merek, dan teks logo Anda tidak pernah dikirim ke server mana pun, tidak disimpan, dan tidak dicatat.

Ya — generator gambar Open Graph 100% gratis, tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan. Hasilkan gambar OG sebanyak yang Anda butuhkan, gratis selamanya.

Unggah PNG yang diunduh ke server atau CDN Anda, lalu tambahkan meta tag ini ke head halaman Anda: <meta property="og:image" content="https://situsanda.com/og-image.png" />, <meta property="og:image:width" content="1200" />, dan <meta property="og:image:height" content="630" />.

Terpusat cocok untuk sebagian besar halaman. Rata Kiri cocok untuk konten teknis. Split menambahkan bilah aksen yang kuat. Minimal paling cocok untuk halaman sederhana. Kartu Gradien menciptakan tampilan premium. Coba setiap tata letak di pratinjau langsung untuk melihat mana yang sesuai dengan merek Anda.

Generator gambar Open Graph mendukung Inter, Georgia, Arial, Courier New, dan System UI. Font ini tersedia di semua browser tanpa memuat sumber daya eksternal, sehingga rendering tetap konsisten.

Platform sosial menyimpan cache gambar OG dengan sangat agresif. Setelah menambahkan meta tag og:image, gunakan Facebook Sharing Debugger atau Twitter Card Validator untuk memaksa penyegaran cache. Beri waktu beberapa menit agar gambar baru menyebar.

og:image adalah standar Open Graph yang dipakai Facebook, LinkedIn, Discord, dan Slack. twitter:image adalah tag milik Twitter/X. Jika twitter:image tidak diatur, Twitter akan menggunakan og:image. Generator gambar Open Graph kami menghasilkan satu PNG 1200×630 yang berfungsi untuk kedua tag.