Generator OG Image — Pembuat Gambar Berbagi Sosial

Gambar Open Graph adalah gambar yang muncul ketika tautan ditempelkan ke dalam obrolan, twit, atau saluran Slack — dan setiap platform yang merendernya mengharapkan kanvas sekitar 1200×630 piksel, ukuran yang menjadi dasar rancangan kartu og:image Facebook dan summary_large_image Twitter. Jika ukurannya salah, gambar akan terpotong, buram, atau tertekan; jika tata letaknya salah, judul akan tampak sebagai potongan kecil yang sulit dibaca di atas foto yang ramai. Alat ini menyusun gambar pada resolusi target sesungguhnya menggunakan Canvas 2D API, sehingga apa yang Anda lihat di pratinjau adalah kisi piksel persis yang akan dihasilkan dalam PNG.

Pilih latar belakang — warna datar, gradasi linear dua titik yang dibangun dari dua warna pilihan Anda, atau foto unggahan yang dipotong untuk mengisi penuh bingkai 1200×630 seperti cara kerja CSS background-size: cover, alih-alih diregangkan di luar proporsi. Ketik judul dan subjudul opsional: keduanya diukur karakter demi karakter terhadap metrik fon kanvas, sehingga judul yang terlalu panjang untuk satu baris akan membungkus ke baris kedua atau ketiga di batas kata sesungguhnya, bukannya meluber ke tepi atau terpotong tanpa terlihat. Pilih perataan tengah atau kiri, pilih warna teks yang terbaca dengan latar Anda, dan letakkan logo opsional di sudut pada ukuran yang tetap dan terbaca.

Di bawah kanvas, empat kartu kecil memperkirakan bagaimana tampilan gambar jadi setelah platform sungguhan membungkusnya dengan krom 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 sematan Discord menempatkan domain, judul, dan deskripsi di atas gambar dalam tema gelapnya sendiri. Ini adalah pendekatan bergaya untuk keperluan perencanaan — diberi label jelas sebagai ilustratif, dengan baris domain yang Anda ketik sendiri — bukan pengambilan langsung atau tangkapan layar dari platform sesungguhnya, karena membagikan tautan dan membiarkan perayap masing-masing platform membaca tag meta og:image dan og:title sesungguhnya dari halaman Andalah yang benar-benar menghasilkan kartu langsung.

Semuanya dirender secara lokal pada elemen kanvas HTML di peramban Anda: judul, subjudul, latar belakang dan logo yang diunggah tidak pernah meninggalkan perangkat Anda, dan berkas yang diekspor adalah PNG canvas.toBlob() bersih yang hanya berisi apa yang Anda susun — tanpa batas tiruan, bilah peramban palsu, atau logo platform yang ikut terbawa 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 dapat melanjutkan dari titik akhir alat ini.