Pratayang tautan: ukuran gambar OG yang berhasil di mana-mana

Tag yang membuatnya bekerja

Empat tag Open Graph mengerjakan hampir semuanya, dan X membaca tag yang sama kecuali Anda menimpanya. Sisanya adalah penghalusan yang sifatnya pilihan.

• `og:image` — sebuah URL mutlak, lengkap dengan protokol dan domainnya. Jalur relatif adalah alasan tunggal paling lazim kenapa pratayang tidak menampilkan gambar sama sekali.
• `og:title` — judul pada kartunya. Sekitar 60 karakter sebelum terpotong, dan ia tak harus sama persis dengan judul halaman Anda.
• `og:description` — satu atau dua kalimat, kira-kira 150 sampai 160 karakter. Tiap platform memotong di titik berbeda, jadi taruh maknanya di depan.
• `og:url` — URL kanoniknya. Ini mencegah halaman yang sama, dibagikan dengan parameter pelacakan berbeda, tersimpan sebagai beberapa pratayang terpisah.
• `twitter:card` bernilai summary_large_image — tanpa itu, X bisa menampilkan gambar mini bujur sangkar kecil di samping teks alih-alih kartu selebar penuh.

Dua rincian menjelaskan banyak sekali pratayang yang rusak. URL gambarnya harus bisa diakses umum tanpa masuk akun, karena perayap platformnya mengambilnya sebagai pengunjung anonim — gambar di balik autentikasi, atau di server uji coba yang dikunci, langsung gagal. Dan halamannya sendiri harus bisa dijangkau perayap yang sama, dan itulah sebabnya pratayang kerap bekerja di peramban tetapi gagal di aplikasi obrolan.

Ukuran berkas dan formatnya

Gambar kartu punya batas atas, dan melampauinya membuat pratayangnya diam-diam jatuh menjadi tanpa gambar alih-alih menampilkan galat. Jaga gambar OG di bawah 1 MB sebagai sasaran kerja — batas kerasnya sekitar 8 MB, dan batas X sendiri untuk gambar kartu adalah 5 MB dengan minimum 300 × 157 piksel dan maksimum 4096 × 4096.

WebP layak diberi peringatan. Sebagian besar platform kini menanganinya, tetapi segelintir pembaca pratayang lama tidak, dan wujud kegagalannya adalah gambar yang hilang, bukan cadangan yang muncul. Kalau sebuah tautan penting secara komersial, JPEG atau PNG tetap pilihan yang aman; memampatkan JPEG dengan benar toh sudah memberi Anda sebagian besar penghematannya. Transparansi adalah jebakan yang lain — PNG transparan akan ditumpuk di atas latar yang dipakai platformnya, dan pada mode gelap itu bisa membuat teks gelap menjadi tak terlihat.

Merancang kartu yang terbaca dalam ukuran mini

Pratayang tautan jarang dilihat dalam ukuran penuh. Di Slack ia selebar beberapa ratus piksel; di ponsel ia bersaing dengan segala hal lain di dalam umpan. Rancangan yang berhasil di monitor secara berulang gagal pada skala itu, dan kegagalannya cukup ajek sehingga bisa dihindari.

• Enam sampai delapan kata saja. Kartu adalah poster, bukan paragraf. Kalau judulnya butuh tiga baris pada lebar 1200 piksel, ia tak terbaca pada 400.
• Pasang hurufnya jauh lebih besar daripada yang terasa pas. 60 sampai 90 piksel untuk sebuah judul pada kanvas selebar 1200 piksel. Di bawah sekitar 40 piksel, semuanya lenyap.
• Kontras tinggi, selalu. Teks di atas foto butuh selubung atau bidang padat di belakangnya; abu-abu muda di atas putih hilang sama sekali dalam ukuran kecil.
• Jangan mengulang judulnya. Di Facebook, LinkedIn, dan Slack kartunya sudah menampilkan og:title Anda sebagai teks di bawah gambar (X paling banter menampilkan judul kecil). Menaruh kata yang sama di dalam gambarnya memboroskan ruang — pakailah untuk logo, kategori, atau satu gagasan visual saja.
• Ujilah dalam ukuran kecil. Kecilkan rancangannya menjadi selebar 400 piksel lalu pandangi. Itu lebih dekat dengan cara kebanyakan orang akan melihatnya daripada kanvas tempat Anda merancang.
• Simpan sebagai templat. Begitu sebuah tata letak berhasil, pakai ulang dengan teks yang berbeda. Kartu yang mudah dikenali lebih berharga daripada kartu yang cerdik satu per satu.

Ketika pratayangnya menampilkan yang keliru

Anda memperbaiki gambarnya, membagikan tautannya, dan gambar lama tetap muncul. Itu penyimpanan sementara, bukan kekeliruan pada tag Anda. Setiap platform menyimpan pratayang yang ia bangun saat pertama kali ada orang membagikan URL itu, kadang berminggu-minggu, dan ia tidak akan mengambil ulang halamannya hanya karena halamannya berubah.

Satu catatan praktis tentang membuat gambarnya: merancang kartu adalah persis jenis pekerjaan kecil dan berulang yang orang serahkan ke pembangkit daring tanpa banyak berpikir, dan pembangkit semacam itu mengunggah apa pun yang Anda berikan — termasuk tangkapan layar produk yang belum dirilis dan judul yang belum diumumkan. Perkakas desain dan gambar di sini — pembuat poster, pengubah ukuran, dan kompresor — berjalan sepenuhnya di perangkat Anda, jadi kartu untuk sesuatu yang masih diembargo dibangun dan diekspor tanpa ada yang dikirimkan.