Gambar Open Graph: Ukuran, Format, dan Alasan Gambar Anda Tidak Muncul

Standar 1200×630 dan alasannya

Standar de facto og:image ukurannya 1200×630 piksel, rasio aspek sekitar 1.91:1. Angka ini bukan sekadar kebiasaan sembarang — nilainya mendekati rasio aspek terlebar yang digunakan kebanyakan kartu pratinjau tautan di Facebook, LinkedIn, Slack, dan Discord, sehingga gambar 1200×630 memenuhi kartu tanpa perlu diberi bilah kosong atau dipangkas secara signifikan oleh platform.

Gambar lebih kecil secara teknis bekerja tetapi diperbesar platform untuk memenuhi kartu, melunakkan detail dan dapat tampak jauh lebih buruk daripada gambar yang disiapkan khusus. Kebanyakan platform mendokumentasikan minimum sekitar 200×200 agar gambar diterima sebagai pratinjau, tetapi anggap batas bawah, bukan target — apa pun jauh di bawah 1200×630 mengorbankan kualitas tanpa manfaat.

Twitter/X summary_large_image kartu menggunakan gambar 1200×630 dan rasio aspek yang sama, sehingga satu gambar umumnya melayani keduanya og:image dan twitter:image tanpa memerlukan ekspor terpisah.

Area aman: bagian yang benar-benar bertahan setelah pangkasan

Bahkan pada rasio aspek yang benar, platform berbeda memangkas kartu sedikit berbeda menurut area — postingan feed, pratinjau tautan DM, dan modul "tautan dibagikan" di bilah samping tidak selalu menggunakan pangkasan sama dari gambar yang sama. Teks atau logo yang tepat menempel tepi dapat terpotong pada satu area meskipun terlihat baik dalam pratinjau tab peramban Anda.

Praktik aman menjaga konten penting — judul, logo, wajah — dalam sekitar 90% bagian dalam bingkai dengan margin sekitar 5–10% di setiap tepi. Gambar latar, gradasi, dan dekorasi dapat mencapai tepi penuh; hanya konten yang harus dilihat semua orang dijauhkan dari tepi. Jika alat desain mendukung, persegi panjang panduan sekitar 60px ke dalam setiap sisi kanvas 1200×630 memberi area aman kerja wajar.

Format: JPG atau PNG, dan alasan bukan WebP

Untuk berkas gambar sebenarnya, JPG dan PNG adalah pilihan aman. Dukungan WebP untuk og:image khususnya tidak konsisten di antara perayap dan bot pembuka tautan yang menghasilkan pratinjau — sebagian mendukung, sebagian diam-diam gagal merender pratinjau jika diberikan WebP. Karena kegagalannya senyap, mudah menerbitkan pratinjau rusak tanpa menyadarinya sampai seseorang memberi tahu.

Persyaratan kompatibilitas ini lebih ketat daripada menyajikan WebP ke peramban, yang hampir semua peramban kini menangani — lihat Perbandingan WebP vs PNG vs JPG untuk kasus umum. Perayap pratinjau tautan adalah kelompok klien berbeda yang lebih konservatif daripada browser pengguna, dan dukungan WebP-nya tertinggal. Gunakan JPG untuk gambar pratinjau fotografis (file lebih kecil pada kualitas visual setara) dan PNG jika gambar memiliki warna rata, teks, atau perlu mempertahankan transparansi dalam konteks tertentu — meskipun transparansi sendiri tidak relevan untuk gambar OG, karena selalu dirender di atas latar kartu platform.

GIF secara teknis diterima oleh kebanyakan platform sebagai gambar statis, tetapi bukan pilihan bermakna untuk pratinjau foto atau desain kompleks; tidak ada alasan praktis menggunakannya alih-alih JPG atau PNG di sini.

URL harus absolut

<meta property="og:image" content="/og-image.jpg" /> terlihat masuk akal dan bekerja baik saat halaman dibuka langsung di browser, karena browser menyelesaikan jalur relatif terhadap URL halaman saat ini. Perayap pembuka pratinjau tautan sering tidak melakukan penyelesaian yang sama secara andal atau menggunakan basis salah — hasil praktisnya gambar rusak atau tidak muncul pada sebagian platform tetapi bekerja pada lainnya, sehingga bug membingungkan jika didiagnosis hanya dari laporan pengguna.

Selalu tulis URL absolut lengkap, termasuk skema dan domain:

<meta property="og:image" content="https://example.com/og-image.jpg" />

Dalam Metadata API Next.js, ini berarti mengatur metadataBase di root layout agar jalur gambar relatif dalam metadata tingkat halaman otomatis diubah menjadi URL absolut saat build, atau menulis URL lengkap langsung pada openGraph.images entri seperti yang dilakukan situs ini.

Cache: mengapa gambar yang diperbaiki masih menampilkan pratinjau lama

Penyebab paling umum "sudah diperbaiki tetapi masih salah". Platform menyimpan data Open Graph — termasuk gambar — per URL, dan cache tidak berakhir hanya karena berkas baru diterapkan. Memuat ulang halaman sendiri, bahkan privat, tidak memberi tahu isi cache platform.

Setiap platform utama memiliki alat sendiri untuk memaksa pengambilan ulang:

• Facebook / Meta: Sharing Debugger (developers.facebook.com/tools/debug/) — tempel URL lalu klik "Scrape Again." Ini juga membersihkan cache pratinjau tautan Instagram dan WhatsApp, yang memakai perayap Meta bersama.
• X/Twitter: Card Validator sebelumnya digunakan untuk tujuan ini; ketersediaannya berubah dari waktu ke waktu, jadi jika tidak dapat diakses, menambahkan string kueri versi yang tidak mengganggu ke URL (lihat di bawah) merupakan cadangan lebih andal.
• LinkedIn: Post Inspector (linkedin.com/post-inspector/) — tempel URL untuk memaksa pengambilan ulang.
• Slack, Discord, iMessage: tidak ada debugger publik. Umumnya platform mengakhiri cache sendiri setelah waktu tertentu sesuai jadwalnya, atau memperbarui ketika URL berubah sedikit saja.

Ketika debugger khusus platform tidak tersedia atau juga bermasalah, solusi umum adalah mengubah URL yang dilihat platform — menambahkan string kueri versi seperti ?v=2 ke tautan yang dibagikan atau URL gambar itu sendiri, memaksa setiap platform menganggapnya sumber daya yang belum dilihat dan mengambil ulang, bukan menyajikan entri cache lama.

Ukuran berkas dan batas lain

Kebanyakan platform mendokumentasikan batas ukuran gambar pada beberapa megabyte — batas Facebook secara historis sekitar 8MB, dan platform yang tidak menerbitkan angka eksplisit tetap cenderung kehabisan waktu atau menolak merender pratinjau berkas luar biasa besar. Karena JPG atau PNG 1200×630 yang dipampatkan dengan baik untuk konten ini biasanya jauh di bawah 500KB, mencapai batas ukuran dalam praktik hampir selalu berarti ekspor tidak dioptimalkan — foto sumber besar diperkecil dalam markup tetapi tidak benar-benar dikodekan ulang pada dimensi kecil, atau ekspor PNG konten foto, bukan JPG. Lihat panduan mengurangi ukuran file gambar untuk pendekatan umum mengurangi hasil ekspor tanpa kehilangan kualitas yang terlihat.

Keterbacaan teks pada ukuran gambar mini

Gambar OG biasanya dirender jauh lebih kecil daripada ukuran aslinya 1200×630 piksel — pratinjau Slack atau kartu feed seluler dapat menampilkannya dengan lebar beberapa ratus piksel. Teks apa pun yang tertanam dalam gambar harus tetap terbaca setelah pengecilan itu. Sebagai panduan kerja, teks isi di bawah sekitar 40px pada lebar asli gambar 1200px cenderung menjadi kabur dan tak terbaca setelah diperkecil untuk penempatan feed biasa; teks judul yang harus terbaca pada ukuran gambar mini umumnya perlu jauh lebih besar — sekitar 60–80px atau lebih, dicetak tebal, dengan kontras kuat terhadap latarnya.

Ini juga alasan gambar sebaiknya sederhana. Komposisi ramai dengan beberapa teks bersaing mungkin terbaca penuh tetapi menjadi gangguan visual pada kartu; satu judul jelas pada latar kontras tinggi terbaca andal di setiap area.

twitter:card memerlukan deklarasi sendiri

Pengaturan og:image tidak otomatis cukup untuk pratinjau gambar besar di X/Twitter. Sistem kartu Twitter membaca twitter:card meta tag untuk menentukan gaya kartu, dan tanpanya, sebagian klien Twitter beralih ke kartu thumbnail lebih kecil walaupun og:image tersedia.

Nyatakan secara eksplisit:

<meta name="twitter:card" content="summary_large_image" />

Twitter akan beralih ke og:image untuk gambar sebenarnya jika twitter:image tidak diatur terpisah, sehingga umumnya URL gambar tidak perlu diduplikasi — tetapi deklarasi jenis kartu sendiri tidak opsional jika Anda menginginkan tata letak gambar besar.

Urutan diagnosis singkat

1. Pastikan URL gambar absolut, bukan relatif, dan dapat dimuat langsung dalam peramban.
2. Pastikan format JPG atau PNG, bukan WebP.
3. Pastikan ukurannya tepat atau mendekati 1200×630.
4. Konfirmasi twitter:card sudah diatur jika khusus pratinjau Twitter/X yang salah.
5. Jalankan debugger platform untuk memaksa pengambilan ulang sebelum menganggap perbaikan tidak bekerja.
6. Jika debugger tidak tersedia, ubah string kueri versi pada URL untuk melewati cache.

Pertanyaan yang sering diajukan