Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Gambar Kartu Sosial Open Graph

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Telah ditetapkan sebelumnya

Lebar

piksel

Tinggi

piksel

Content

Judul

Keterangan

Site Name

Layout & Theme

yang berada di samping Computed dan Styles, Anda dapat mengontrol apa yang ditampilkan oleh lapisan tersebut: nomor baris, nama baris, nama area, dan garis yang diperluas melebihi batas grid. Ketika tata letak gagal, mengaktifkan nomor baris sambil memperhatikan lapisan tersebut biasanya mengungkapkan jalur yang tidak sesuai secara langsung — jauh lebih cepat daripada membaca nilai-nilai mentah di panel Styles.

Tema

Latar belakang

Gradient Start

Gradient End

Gradient Angle

Accent Color

Used for the top bar and site name.

Typography

huruf

Title Size: 72 Auto-shrinks for long titles to keep one line where possible.

Description Size: 32

Show site name

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Gambar Kartu Sosial Open Graph

Desain gambar berbagi sosial yang presisi piksel untuk Open Graph, Twitter Cards, LinkedIn, dan Facebook secara langsung di browser Anda. Masukkan judul, deskripsi, dan nama situs Anda, pilih tata letak dan tema, lalu unduh dalam format PNG, JPG, atau WebP dengan dimensi tepat yang diharapkan oleh setiap platform — tanpa perlu alat desain atau unggah.

Cara Penggunaan

Pilih preset (1200×630 untuk Open Graph, 1024×512 untuk Twitter) atau atur lebar dan tinggi secara khusus.
Masukkan judul, deskripsi, dan nama situs yang ingin Anda gunakan pada kartu.
Pilih tata letak (pusat, kiri, atau bagian atas dengan aksen) dan tema (terang, gelap, warna merek, atau gradien).
Sesuaikan tata letak — keluarga font, ukuran judul, dan ukuran deskripsi — agar sesuai dengan merek Anda.
Klik Unduh dan simpan PNG, JPG, atau WebP untuk digunakan sebagai og:image atau twitter:image.

Fitur

Dimensi sosial yang benar – Preset untuk Open Graph (1200×630), Twitter Card (1024×512), LinkedIn, dan Facebook.
Banyak tata letak – Template pusat, kiri, dan bagian atas dengan aksen untuk tampilan merek yang berbeda.
Tema terang, gelap, merek, dan gradien – Bisa berpindah latar belakang hanya dengan satu klik atau gunakan warna merek Anda sendiri.
Penyusutan otomatis judul – Judul panjang akan dibungkus dan disesuaikan agar kartu tetap bisa dibaca.
Pratinjau canvas langsung – Setiap perubahan akan langsung dirender di canvas HTML5 nyata — yang Anda lihat akan diunduh secara langsung.
Ekspor PNG, JPG, dan WebP – Pilih format yang sesuai dengan hosting dan CDN Anda.
Berjalan sepenuhnya di browser Anda – Tidak perlu unggah, tidak perlu akun, tidak ada watermark.

 Tanya Jawab Umum

Apa itu protokol Open Graph?

Open Graph adalah kumpulan <meta> tag yang diperkenalkan oleh Facebook yang memungkinkan halaman web menggambarkan dirinya sendiri kepada platform sosial. Tag paling umum adalah og:title, og:descriptiondan og:image. Saat seseorang membagikan tautan, platform tersebut membaca tag-tag ini dan menampilkan kartu yang kaya daripada URL biasa.
Berapa ukuran gambar yang disarankan untuk og:image?

Spesifikasi Open Graph menyarankan rasio aspek 1.91:1 dengan minimal 600×315 piksel. Sebagian besar platform bekerja terbaik pada ukuran 1200×630, yang menjaga kartu tetap tajam di perangkat retina sambil tetap di bawah batas ukuran 8 MB dari Facebook. Untuk Twitter Cards, ukuran 1024×512 umum digunakan untuk format summary_large_image.
Mengapa platform sosial menyimpan URL og:image?

Platform seperti Facebook, LinkedIn, dan Slack mengambil gambar og:image sekali dan menyimpannya di CDN mereka untuk menghindari membebani sumber asal setiap kali tautan dibagikan. Cache ini bisa bertahan hingga beberapa hari atau minggu. Untuk memperbarui gambar setelah perubahan, ubah URL file atau gunakan debugger platform (misalnya, Facebook Sharing Debugger) untuk mengambil ulang halaman.
Apa perbedaan antara og:image dan twitter:image?

og:image merupakan bagian dari protokol Open Graph dan dibaca oleh Facebook, LinkedIn, Slack, Discord, dan sebagian besar aplikasi komunikasi. twitter:image merupakan bagian dari Twitter Cards dan dibaca oleh X (Twitter). Jika hanya og:image yang tersedia, X akan menggunakan gambar ini secara otomatis, sehingga satu gambar berkualitas tinggi sering kali cukup untuk keduanya — namun menyediakan keduanya memungkinkan Anda menyesuaikan ukuran untuk setiap platform.
Mengapa judul otomatis menyusut ketika terlalu panjang?

Kartu sosial memiliki canvas tetap, sehingga judul panjang yang melebihi batas akan terlihat rusak. API Canvas HTML5 tidak dapat memotong teks secara otomatis, sehingga generator mengukur setiap kata dengan ctx.measureText(), membagi judul menjadi baris-baris, dan menurunkan ukuran font secara bertahap hingga judul sesuai dengan area aman. Ini menjaga setiap ekspor tetap dapat dibaca tanpa perlu perubahan manual.