Bila anda tampal pautan ke dalam mesej, tweet, catatan LinkedIn, atau saluran Slack, platform akan menarik kad pratonton — imej besar, tajuk, cebisan teks. Imej itulah imej Open Graph (OG), dan ia bekerja lebih kuat daripada tajuk berita anda. Dalam suapan yang laju diskrol, gambarlah yang menghentikan ibu jari. Pratonton yang kosong atau rosak nampak seperti kerja sambil lewa, lalu diabaikan.
Berikut cara buat satu yang layak diklik, pada saiz yang betul, dengan teks yang benar-benar boleh dibaca.
Saiznya: 1200×630
Imej OG piawai ialah 1200×630 piksel, nisbah 1.91:1. Facebook, LinkedIn, Slack, Discord, dan kebanyakan sistem pratonton pautan dibina mengelilingi saiz ini. Betulkan yang satu ini dan anda terjamin hampir di mana-mana.
Beberapa saiz berkaitan muncul bergantung pada tempat pautan mendarat:
| Platform / kegunaan | Saiz | Nisbah |
|---|---|---|
| Open Graph (lalai) | 1200×630 | 1.91:1 |
| Kad besar Twitter/X | 1200×628 | ~1.91:1 |
| Lakaran kecil YouTube | 1280×720 | 16:9 |
| Segi empat sama (suapan/IG) | 1080×1080 | 1:1 |
| Story / menegak | 1080×1920 | 9:16 |
Anda tak perlukan semua ini untuk sekeping catatan blog — 1200×630 ialah kuda kerja. Tetapi kalau anda juga membuat lakaran kecil video atau catatan sosial segi empat sama, lebih baik jana bentuk yang betul daripada memangkas satu imej dengan teruk supaya muat.
Peraturan teks: boleh dibaca pada saiz lakaran kecil
Kesilapan yang membunuh imej OG ialah menganggapnya seperti poster yang akan dilihat skrin penuh. Ia takkan. Kebanyakan orang melihat kad itu pada mungkin sepertiga saiz sebenarnya, di telefon, di tengah-tengah skrol. Reka bentuk untuk itu.
- Teks besar, sedikit perkataan. Tajuk pendek — lima hingga lapan patah perkataan — yang boleh dibaca bila kad dikecilkan. Kalau anda terpaksa merenung pada saiz penuh, ia tak terbaca dalam suapan.
- Kontras kuat. Teks cerah atas latar gelap atau tepu, atau sebaliknya. Teks yang duduk atas foto yang sibuk tanpa sokongan akan lenyap.
- Kekalkan benda penting di tengah. Platform berbeza memangkas tepi dengan sedikit berbeza. Jauhkan teks dan logo daripada jidar luar supaya tiada yang terpotong.
- Satu idea satu imej. Imej OG ialah umpan, bukan ringkasan. Tajuk, mungkin subtajuk, selesai.
Latar yang menonjolkan teks
Kecerunan (gradient) rata ialah pilihan yang boleh diharap. Ia memberi teks tempat bersih untuk duduk, nampak moden, dan tak pernah bergaduh dengan perkataan seperti foto yang sibuk. Kecerunan gelap-ke-lebih-gelap sedikit dengan teks cerah hampir kalis silap.
Alat Imej OG dibina tepat mengelilingi hal ini: pilih pratetapan saiz (OG 1200×630, Twitter, YouTube, segi empat sama, atau story), pilih latar kecerunan, dan tambah tajuk serta subtajuk anda. Anda dapat kad kongsi yang terbaca jelas pada mana-mana saiz, tanpa membuka aplikasi reka bentuk penuh.
HTML yang membuatkannya muncul
Membuat imej hanyalah separuh kerja. Platform perlu tahu di mana untuk mencarinya. Tambah tag ini ke dalam <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="Tajuk anda">
<meta property="og:description" content="Satu ayat yang jelas.">
<meta name="twitter:card" content="summary_large_image">
Baris twitter:card yang ditetapkan kepada summary_large_image itulah yang memberi anda kad besar di X bukannya lakaran kecil. URL mutlak (dengan https://) penting — laluan relatif selalunya gagal diselesaikan bila pengikis mengambil halaman anda.
Selepas anda menerbitkan, ujilah. Tampal URL anda ke dalam penyahpepijat pratonton pautan platform (Sharing Debugger Facebook, Post Inspector LinkedIn) untuk mengesahkan imej dimuatkan dan untuk membersihkan sebarang versi lama yang dicache. Platform mencache pratonton dengan agresif, jadi kalau anda kemas kini imej dan masih nampak yang lama, butang imbas semula penyahpepijat itulah penyelesaiannya.
Buat sendiri, jangan muat naik
Keseluruhannya berjalan dalam pelayar anda — imej digubah dengan Canvas secara setempat dan tidak pernah dimuat naik ke pelayan. Ia percuma, tanpa daftar, tanpa tera air dicap merentasi kad kongsi anda, dan ia berfungsi luar talian selepas lawatan pertama. Jana 1200×630, sambungkan tag meta, jalankan sekali melalui penyahpepijat, dan pautan anda mula membawa berat masing-masing.