OG Image Generator — Pembuat Gambar Berbagi Sosial

Gambar Open Graph adalah gambar yang muncul saat tautan ditempelkan ke obrolan, tweet, atau saluran Slack — dan setiap platform yang merendernya mengharapkan kanvas berukuran kira-kira 1200×630 piksel, ukuran og:image Facebook dan kartu ringkasan_large_image Twitter keduanya dirancang sesuai dengan desain tersebut. Jika ukurannya salah, gambar akan terpotong, buram, atau terjepit; membuat tata letaknya salah dan judulnya terbaca sebagai bagian yang tidak terbaca dibandingkan foto yang sibuk. Alat ini menyusun gambar pada resolusi target sebenarnya menggunakan Canvas 2D API, jadi apa yang Anda lihat di pratinjau adalah kisi piksel persis yang dikirimkan dalam PNG.

Pilih latar belakang — warna datar, gradien linier dua titik yang dibuat dari dua warna yang Anda pilih, atau foto yang diunggah yang dipotong untuk memenuhi bingkai penuh 1200x630 dengan cara yang sama seperti ukuran latar belakang CSS: sampul, bukannya direntangkan di luar proporsi. Ketikkan judul dan subjudul opsional: keduanya diukur karakter demi karakter berdasarkan metrik font kanvas, sehingga judul yang terlalu panjang untuk dimuat dalam satu baris akan dimasukkan ke baris kedua atau ketiga pada batas kata yang sebenarnya, bukannya tumpah ke tepian atau terpotong tanpa terlihat. Pilih perataan tengah atau kiri, pilih warna teks yang sesuai dengan latar belakang Anda, dan letakkan logo opsional di sudut dengan ukuran tetap dan mudah dibaca.

Di bawah kanvas, empat kartu kecil memperkirakan bagaimana gambar akhir terlihat setelah platform nyata membungkusnya dengan chrome sendiri: Kartu Twitter/X hanya menampilkan domain dan judul tebal di bawah gambar tanpa baris deskripsi, Facebook menambahkan strip domain huruf besar di atas blok judul dan deskripsi, LinkedIn menempatkan domain di bawah judul tanpa deskripsi sama sekali, dan penyematan Discord menempatkan domain, judul, dan deskripsi di atas gambar dalam tema gelapnya sendiri. Ini adalah perkiraan gaya untuk tujuan perencanaan — diberi label jelas sebagai ilustratif, dengan baris domain yang Anda ketik sendiri — bukan pengambilan langsung atau tangkapan layar dari platform sebenarnya, karena membagikan tautan dan membiarkan perayap masing-masing platform membaca tag meta og:image dan og:title asli laman Anda yang sebenarnya menghasilkan kartu langsung.

Semuanya dirender secara lokal pada elemen kanvas HTML di browser Anda: judul, subjudul, latar belakang yang diunggah, dan logo tidak pernah meninggalkan perangkat Anda, dan file yang diekspor adalah kanvas bersih.toBlob() PNG yang hanya berisi apa yang Anda buat — tidak ada batas mockup, bilah browser palsu, atau logo platform yang dimasukkan ke dalam gambar yang diunduh. Jika Anda juga perlu mengubah ukuran atau mengonversi PNG yang diekspor setelahnya, alat pengubah ukuran gambar dan pengonversi gambar di situs ini akan melanjutkannya.