Gambar open graph adalah gambar yang muncul sebagai pratinjau saat sebuah tautan dibagikan di media sosial atau aplikasi percakapan. Ukuran dan rasionya ditentukan masing-masing platform, dan ketentuan itu bisa berubah dari waktu ke waktu. Karena itu, angka pastinya perlu diperiksa di pusat bantuan platform yang Anda tuju, bukan diandalkan dari satu artikel. Yang bisa disiapkan dari sisi Anda adalah berkasnya: gambar yang subjeknya berada di bagian tengah, dimensinya cukup besar, dan ukuran berkasnya ringan. Layanan ini tidak mengatur tag halaman; yang bisa dikerjakan di sini adalah menyiapkan berkas gambarnya lewat Kompres Foto dan Konversi Format Gambar.
Bagian yang sering terlewat bukan gambarnya, melainkan tag di halaman yang memberi tahu platform gambar mana yang harus dipakai. Tanpa tag itu, platform akan memilih sendiri, kadang mengambil gambar pertama yang ditemukannya, kadang menampilkan tautan tanpa gambar sama sekali. Artikel ini membahas kedua sisi: menyiapkan berkasnya dan memastikan halamannya menunjuk ke berkas yang benar.
Apa yang menentukan tampilan pratinjau tautan
Saat tautan ditempel di media sosial atau aplikasi pesan, platform membuka halamannya, membaca keterangan tertentu, lalu menyusun kartu pratinjau. Keterangan itu mencakup judul, deskripsi, alamat halaman, dan gambar. Standar yang dipakai disebut open graph, dan tag-nya ditulis di bagian kepala halaman HTML.
Kalau tag gambar tidak ada, platform mencari gambar lain di halaman itu. Pilihannya bisa tidak terduga: logo, ikon, atau gambar pertama yang ditemukan. Hasilnya sering tidak sesuai harapan. Kalau tidak ada gambar yang layak, platform bisa menampilkan kartu tanpa gambar.
Platform juga menyimpan salinan pratinjau. Setelah halaman dibagikan sekali, perubahan pada gambar atau tag tidak langsung terlihat. Sebagian platform menyediakan alat pemeriksa yang bisa memaksa pengambilan ulang; di platform lain, pratinjau baru muncul saat tautan dibagikan lagi setelah beberapa waktu.
Menyiapkan berkas gambarnya
Mulai dari ukuran. Buat gambar dengan dimensi yang cukup besar untuk ditampilkan di layar beresolusi tinggi, dengan rasio lanskap yang lebar. Angka pastinya berbeda antar platform dan bisa berubah, jadi periksa pusat bantuan platform tujuan sebelum menetapkan dimensi akhir.
Taruh subjek utama di bagian tengah gambar. Platform umumnya memotong gambar mengikuti rasionya sendiri, dan pemotongan itu biasanya mengambil dari tengah. Kalau subjeknya berada di tepi, ia bisa terpotong. Kalau ada teks di gambar, jaga jarak aman dari tepi; teks yang mepet tepi berisiko terpotong.
Siapkan juga versi persegi dari gambar yang sama. Sebagian platform menampilkan pratinjau dengan rasio yang lebih kotak, dan gambar lanskap yang dipaksa masuk ke ruang persegi akan terpotong di kiri dan kanan. Dengan menyiapkan dua versi, Anda bisa memilih yang paling pas untuk tiap tempat. Pola yang sama berlaku untuk gambar media sosial secara umum.
Hindari menaruh informasi penting hanya di tepi gambar. Jangan juga menaruh teks yang terlalu kecil; pratinjau sering tampil dalam ukuran yang lebih kecil daripada yang Anda lihat di aplikasi penyunting. Uji dengan memperkecil gambar sampai seukuran kartu pratinjau di ponsel.
Format dan ukuran berkas
Untuk gambar pratinjau, format yang paling aman adalah JPG atau PNG. JPG kecil dan diterima luas. PNG berguna kalau gambar berisi teks tajam atau butuh latar transparan, meskipun untuk pratinjau yang selalu ditampilkan di atas latar platform, transparansi biasanya tidak diperlukan.
WebP memang paling ringan, tetapi belum semua layanan pembaca tautan bisa memprosesnya dengan baik. Untuk keperluan pratinjau, JPG adalah pilihan yang paling kecil risikonya. Perbandingan ketiganya ada di Perbedaan JPG PNG dan WebP.
Ukuran berkas juga perlu dijaga. Platform biasanya punya batas ukuran sendiri, dan batas itu berbeda-beda. Gambar pratinjau yang terlalu berat bisa gagal diambil, sehingga kartu tampil tanpa gambar. Perkecil berkasnya lewat Kompres Foto; kalau gambar itu berisi teks atau logo, pakai Kompres PNG supaya ketajamannya tidak turun.
Satu hal yang sering mengejutkan: metadata lokasi dari kamera ponsel ikut terbawa saat berkas dibagikan. Saat berkas ditulis ulang di layanan ini, metadata kamera dan koordinat GPS terhapus. Simpan salinan berkas asli kalau metadata itu masih dibutuhkan.
Menulis tag open graph di halaman
Tag ditaruh di bagian kepala halaman HTML. Empat tag yang paling penting: judul, deskripsi, alamat halaman, dan gambar. Nilai gambar diisi alamat lengkap gambar, bukan nama berkas saja.
Satu gambar biasanya cukup, tetapi menambahkan ukuran gambar membantu platform menyusun tata letak sebelum gambar selesai diunduh. Sebagian platform juga memakai nama situs dan keterangan jenis konten untuk melengkapi kartunya.
Tag ini ditulis di kode halaman, bukan diatur dari layanan ini. Kalau situs Anda memakai sistem pengelola konten, sebagian sistem punya kolom khusus untuk gambar pratinjau dan mengisi tag itu otomatis. Kalau tidak ada, tag bisa ditambahkan lewat tema atau plugin. Kalau Anda mengedit kode halaman langsung, pastikan tag-nya berada di bagian kepala dan tidak terduplikasi.
Untuk halaman yang isinya berubah-ubah, misalnya halaman produk dengan banyak varian, pastikan gambar pratinjaunya menggambarkan isi halaman itu, bukan gambar umum situs. Pratinjau yang tidak nyambung dengan isi tautan membuat orang enggan mengeklik.
Memeriksa pratinjau sebelum dibagikan
Cara paling langsung adalah membagikan tautannya ke diri sendiri di aplikasi yang dituju, lalu melihat hasilnya. Untuk pemeriksaan yang lebih rapi, banyak platform menyediakan alat pemeriksa pratinjau di pusat bantuan atau portal pengembangnya. Alat itu menampilkan gambar yang terbaca beserta ukurannya, dan sebagian bisa memaksa pengambilan ulang.
Periksa tiga hal. Pertama, gambarnya muncul, bukan kartu kosong. Kedua, subjeknya tidak terpotong di bagian yang penting. Ketiga, teks di dalam gambar masih terbaca pada ukuran pratinjau.
Kalau gambarnya tidak muncul, periksa urutan ini. Pastikan alamat gambar bisa dibuka langsung di peramban. Pastikan tag-nya ada di bagian kepala halaman. Pastikan halamannya bisa diakses tanpa login; platform tidak bisa membaca halaman yang terkunci. Kalau sudah semua benar tetapi tetap tidak muncul, bersihkan cache pratinjau lewat alat pemeriksa platform, atau tunggu beberapa waktu.
Kalau gambar pratinjau berubah
Mengganti gambar pratinjau punya tantangan sendiri karena platform menyimpan salinan lama. Ada dua cara yang lazim dipakai. Pertama, gunakan nama berkas baru untuk gambar yang baru, sehingga alamatnya berubah dan platform mengambilnya sebagai gambar yang berbeda. Kedua, gunakan alat pemeriksa platform untuk memaksa pengambilan ulang.
Kalau situs Anda menyajikan gambar dengan lapisan penyebar konten, ada cache di lapisan itu juga. Bersihkan cache setelah gambar baru diunggah, lalu periksa lagi. Alur penggantian gambar di situs dibahas lebih lengkap di Cara Mengganti Gambar Website Tanpa Error.
Ketentuan tiap platform berbeda
Ini bagian yang perlu ditegaskan. Tidak ada satu ukuran yang berlaku untuk semua platform. Media sosial, aplikasi pesan, dan mesin pencari punya ketentuan masing-masing, dan ketentuan itu berubah dari waktu ke waktu. Angka yang beredar di internet sering sudah kedaluwarsa.
Karena itu, langkah yang benar adalah memeriksa pusat bantuan resmi platform yang Anda tuju sebelum menetapkan dimensi akhir. Jangan mengandalkan artikel yang tidak menyebut tanggal pembaruannya. Kalau Anda menyiapkan satu gambar untuk beberapa platform sekaligus, buat versi lanskap dan versi persegi, lalu uji keduanya.
Untuk keperluan yang lebih ketat, misalnya iklan berbayar, ketentuan ukurannya biasanya dijelaskan di pusat bantuan khusus pengiklan. Periksa juga apakah ada batas ukuran berkas dan format yang diterima.
Kapan cara ini tidak dipakai
Kalau tautan Anda tidak akan dibagikan di media sosial atau aplikasi pesan, gambar pratinjau tidak banyak berguna. Halaman tetap bisa memilikinya sebagai cadangan, tetapi tidak perlu diprioritaskan.
Kalau situs Anda sudah punya plugin yang mengurus tag open graph otomatis, pekerjaannya tinggal menyiapkan berkas gambarnya. Plugin itu biasanya mengambil gambar unggulan artikel. Pastikan gambar unggulannya sudah cukup besar dan subjeknya di tengah.
Kalau gambar pratinjau itu akan dipakai juga sebagai gambar di dalam halaman, siapkan dua berkas terpisah. Kebutuhan pratinjau dan kebutuhan tampilan di halaman tidak selalu sama, dan memaksakan satu berkas untuk keduanya biasanya berakhir dengan salah satu yang kurang pas.
Pertanyaan yang sering muncul
Apakah ukuran gambar open graph sama untuk semua platform? Tidak. Setiap platform menetapkan ketentuannya sendiri, dan ketentuan itu bisa berubah. Periksa pusat bantuan resmi platform yang Anda tuju.
Apakah layanan ini bisa menulis tag open graph? Tidak. Tag ditulis di kode halaman. Yang bisa dikerjakan di sini adalah menyiapkan dan mengecilkan berkas gambarnya.
Kenapa pratinjau tautan saya tidak muncul? Kemungkinan tag gambarnya tidak ada, alamat gambarnya tidak bisa diakses, atau halamannya terkunci. Periksa ketiganya secara berurutan.
Format apa yang paling aman untuk gambar pratinjau? JPG untuk foto, PNG kalau ada teks atau logo yang harus tetap tajam. Keduanya diterima luas.
Apakah gambar pratinjau perlu transparan? Biasanya tidak. Platform menampilkan pratinjau di atas latarnya sendiri, jadi latar yang penuh justru lebih aman.
Siapkan berkasnya, lalu uji di platform
Kumpulkan gambar pratinjau dengan subjek di tengah, siapkan versi lanskap dan versi persegi, lalu kecilkan berkasnya lewat Kompres Foto. Setelah tag di halaman menunjuk ke gambar itu, uji dengan membagikan tautannya ke diri sendiri. Untuk memahami perbedaan format sebelum memilih, buka Gambar untuk Web. Peta lengkap pekerjaan gambar ada di Panduan Gambar dan Foto.