Saat Anda menempelkan tautan ke sebuah pesan, tweet, postingan LinkedIn, atau kanal Slack, platform akan menarik kartu pratinjau — gambar besar, judul, cuplikan. Gambar itu adalah Open Graph (OG) image, dan perannya lebih besar dari judul Anda. Di feed yang di-scroll cepat, gambarlah yang menghentikan jempol. Pratinjau kosong atau rusak terbaca sebagai asal-asalan dan langsung dilewati.
Berikut cara membuat OG image yang layak diklik, dengan ukuran yang tepat, dan teks yang benar-benar terbaca.
Ukurannya: 1200×630
OG image standar berukuran 1200×630 piksel, rasio 1.91:1. Facebook, LinkedIn, Slack, Discord, dan sebagian besar sistem pratinjau tautan dibangun di seputar ukuran ini. Buat yang satu ini dengan benar dan Anda hampir terjamin di mana pun.
Beberapa ukuran terkait muncul tergantung ke mana tautan itu mendarat:
| Platform / penggunaan | Ukuran | Rasio |
|---|---|---|
| Open Graph (default) | 1200×630 | 1.91:1 |
| Twitter/X large card | 1200×628 | ~1.91:1 |
| Thumbnail YouTube | 1280×720 | 16:9 |
| Persegi (feed/IG) | 1080×1080 | 1:1 |
| Story / vertikal | 1080×1920 | 9:16 |
Anda tidak butuh semua ini untuk sebuah artikel blog — 1200×630 adalah andalannya. Tapi kalau Anda juga membuat thumbnail video atau postingan sosial persegi, akan lebih baik menghasilkan bentuk yang tepat ketimbang memaksa satu gambar dipotong asal agar muat.
Aturan teks: terbaca pada ukuran thumbnail
Kesalahan yang mematikan OG image adalah menganggapnya seperti poster yang akan dilihat layar penuh. Tidak akan begitu. Kebanyakan orang melihat kartu itu pada mungkin sepertiga ukuran aslinya, di ponsel, sambil scroll. Rancanglah untuk kondisi itu.
- Teks besar, sedikit kata. Judul pendek — lima sampai delapan kata — yang tetap terbaca saat kartu diperkecil. Kalau di ukuran penuh saja Anda harus menyipitkan mata, di feed pasti tidak terbaca.
- Kontras kuat. Teks terang di latar gelap atau jenuh, atau sebaliknya. Teks di atas foto ramai tanpa alas akan lenyap.
- Jaga hal penting tetap di tengah. Tiap platform memotong tepi sedikit berbeda. Jauhkan teks dan logo dari margin luar supaya tidak ada yang terpotong.
- Satu ide per gambar. OG image adalah pengait, bukan ringkasan. Judul, mungkin subjudul, selesai.
Latar yang membuat teks menonjol
Gradasi datar adalah pilihan yang andal. Ia memberi teks alas yang bersih untuk berpijak, terlihat modern, dan tidak pernah beradu dengan kata seperti yang dilakukan foto ramai. Gradasi gelap ke sedikit-lebih-gelap dengan teks terang nyaris antigagal.
Alat OG Image dibangun persis di seputar ini: pilih preset ukuran (OG 1200×630, Twitter, YouTube, persegi, atau story), pilih latar gradasi, lalu tambahkan judul dan subjudul Anda. Anda mendapatkan kartu share yang terbaca jelas pada ukuran berapa pun, tanpa perlu membuka aplikasi desain penuh.
HTML yang membuatnya muncul
Membuat gambarnya baru separuh pekerjaan. Platform harus tahu di mana menemukannya. Tambahkan tag berikut ke <head> halaman Anda:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
Baris twitter:card yang disetel ke summary_large_image itulah yang memberi Anda kartu besar di X, bukan thumbnail mungil. URL absolut (dengan https://) itu penting — path relatif sering gagal di-resolve saat scraper mengambil halaman Anda.
Setelah deploy, ujilah. Tempelkan URL Anda ke debugger pratinjau tautan sebuah platform (Sharing Debugger Facebook, Post Inspector LinkedIn) untuk memastikan gambar termuat dan menghapus versi lama yang mungkin masih di-cache. Platform meng-cache pratinjau secara agresif, jadi kalau Anda sudah memperbarui gambar tapi masih melihat yang lama, tombol re-scrape di debugger adalah solusinya.
Buat sendiri, jangan diunggah
Semuanya berjalan di browser Anda — gambar disusun dengan Canvas secara lokal dan tidak pernah diunggah ke server. Gratis, tanpa daftar akun, tanpa watermark yang menempel di kartu share Anda, dan tetap bekerja offline setelah kunjungan pertama. Buat 1200×630-nya, pasang tag meta-nya, jalankan sekali lewat debugger, dan tautan Anda mulai bekerja sepenuh tenaga.