2026-03-28

Senarai Semak Saiz Imej dan Pratonton Kad Twitter

Pilih saiz imej kad Twitter yang betul, metadata, eksport WebP, dan pemeriksaan penyelesaian masalah supaya pautan kongsi dipaparkan dengan kemas di X dan suapan sosial lain.

Senarai Semak Saiz Imej dan Pratonton Kad Twitter

Dikemas kini: June 28, 2026

Imej kad Twitter ialah imej pratonton yang muncul apabila seseorang berkongsi URL di X. Ia perlu cukup besar untuk kelihatan tajam, cukup kecil untuk perayap mengambil dengan pantas, dan dideklarasikan dengan metadata yang berfungsi walaupun platform kembali kepada tag Open Graph.

Panduan ini memberikan anda senarai semak penerbitan praktikal: dimensi, tag, format fail, pemeriksaan CDN, dan pembaikan untuk kad yang enggan dikemas kini.

Jawapan ringkas: imej kad Twitter apa yang perlu digunakan?

Gunakan WebP atau JPEG 1200 by 630 pixel untuk kebanyakan pautan perkongsian, terutamanya apabila anda mahukan kad imej yang besar. Jauhkan subjek penting dari tepi, pastikan teks boleh dibaca pada saiz thumbnail, dan gunakan URL HTTPS mutlak dalam twitter:image dan og:image.

Untuk X, tetapkan twitter:card kepada summary_large_image apabila imej adalah tarikan utama. Pastikan fail berada di bawah had imej kad yang didokumenkan dan sahkan bahawa URL CDN akhir mengembalikan HTTP 200 sebelum menerbitkan.

Persediaan yang boleh dipercayai adalah ringkas:

  • Eksport imej 1200 by 630 untuk pratonton.
  • Gunakan URL CDN akhir, bukan laluan relatif.
  • Tambah twitter:title, twitter:description, dan twitter:image.
  • Tambah og:title, og:description, dan og:image yang sepadan sebagai sandaran (fallback).
  • Uji URL langsung selepas menyebarkan, kemudian segarkan cache platform jika imej lama masih muncul.

Apakah itu imej kad Twitter?

Imej kad Twitter ialah URL imej yang dideklarasikan dalam metadata halaman supaya X boleh membina pratonton yang kaya. Ia tidak sama dengan imej pertama dalam artikel anda. Perayap membaca kepala HTML, mencari tag kad, mengambil imej, dan menyimpan pratonton tersimpan untuk URL yang dikongsi.

Contoh markup kad milik X sendiri masih menerangkan jenis kad summary dan summary_large_image dalam dokumentasi dan contoh pembangunannya. Perbezaan praktikalnya ialah saiz pratonton: summary_large_image memberikan imej ruang yang cukup untuk membawa pautan blog, produk, alat, atau kempen.

Open Graph penting kerana banyak platform sosial, aplikasi sembang, dan sistem pratonton pautan membaca og:image. Protokol Open Graph mendefinisikan og:title, og:type, og:image, dan og:url sebagai metadata teras. Gunakan tag Twitter/X dan tag Open Graph supaya satu parser yang hilang tidak merosakkan setiap pratonton.

Metadata field Digunakan untuk Nota praktikal
twitter:card Memilih susun atur ringkasan atau imej besar Gunakan summary_large_image untuk kebanyakan perkongsian artikel dan halaman pendaratan
twitter:image Imej pratonton X utama Gunakan URL imej HTTPS mutlak
og:image Imej pratonton sandaran untuk aplikasi sosial dan pemesejan Biasanya padan dengan twitter:image melainkan platform memerlukan potongan yang berbeza
og:url URL kanonik untuk halaman yang dikongsi Padankan URL halaman kanonik awam
tag title dan description Konteks pelayar dan carian Kekalkan konsisten dengan metadata sosial

Untuk kerja metadata imej berkaitan, padankannya dengan panduan Image Optimization for SEO dan Complete Image Optimization Checklist.

Berapakah saiz yang sesuai untuk imej kad Twitter?

Mulakan dengan 1200 by 630 pixels. Ia sepadan dengan potongan pratonton sosial 1.91:1 yang biasa, memberikan platform piksel yang cukup untuk mengecilkan dengan bersih, dan berfungsi dengan baik apabila imej yang sama digunakan semula sebagai og:image.

Elakkan mereka bentuk kad yang hanya berfungsi pada saiz penuh. Feed akan memotong, mengubah saiz, dan meletakkan teks di sekeliling imej. Label kecil, tangkapan skrin UI nipis, dan latar belakang sibuk sering kelihatan baik dalam alat reka bentuk tetapi menjadi tidak boleh dibaca dalam kad perkongsian sebenar.

Grafik menunjukkan imej kad Twitter 1200 by 630 dengan WebP, saiz fail, HTTPS, dan nota reka bentuk selamat tepi

Senario penggunaan Imej yang disyorkan Kenapa ia berfungsi Perhatian terhadap
Artikel blog atau panduan 1200 x 630 WebP Potongan pratonton besar, keserasian platform luas Teks tajuk kecil
Pelancaran produk 1200 x 630 WebP atau JPEG Produk kekal kelihatan selepas pengecilan saiz Memotong tepi produk
Halaman alat (Tool page) Grafik berasaskan tangkapan skrin 1200 x 630 Menunjukkan apa yang dilakukan oleh alat sebelum klik Teks UI terlalu kecil untuk dibaca
Halaman logo sahaja 1200 x 630 dengan padding yang banyak Mengekalkan logo daripada terasa sesak Pratonton kelihatan kosong
Kempen mesra segi empat sama Variasi berasingan 1200 x 1200 apabila diperlukan Berguna untuk platform dengan potongan segi empat sama Jangan gunakan secara membuta tuli sebagai kad X

Gunakan artikel Best Image Resizer for Social Media apabila anda memerlukan pelbagai potongan platform, dan gunakan Facebook Ad Image Sizes apabila kreatif yang sama juga memberi makan kepada media sosial berbayar.

Bagaimana cara menulis metadata?

Letakkan tag dalam HTML yang dirender di sisi pelayan (server-rendered), di dalam <head> halaman. Jangan bergantung pada JavaScript klien untuk menyuntik tag sosial selepas muat. Perayap pratonton pautan mungkin tidak melaksanakan aplikasi anda seperti yang dilakukan oleh pelayar.

Diagram metadata tiga baris menunjukkan tag kad twitter, imej twitter, dan imej open graph untuk pratonton sosial

Gunakan corak ini untuk artikel atau halaman alat biasa:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

Kekalkan pemeriksaan ini dalam semakan kod (code review):

  1. URL imej adalah mutlak dan bermula dengan https://.
  2. URL imej adalah URL CDN akhir, bukan laluan binaan tempatan.
  3. Tajuk halaman dan tajuk sosial menerangkan halaman yang sama.
  4. Penerangan sosial cukup pendek untuk diimbas dalam pratonton.
  5. URL kanonik dan og:url menunjuk ke halaman awam yang sama.
  6. Imej kad tidak disekat oleh robots.txt, pengesahan (authentication), atau peraturan hotlink.
  7. Respons pelayan termasuk jenis kandungan imej yang betul.

Panduan SEO imej Google juga mengesyorkan konteks imej deskriptif, URL imej yang boleh dirayap, dan format yang disokong dalam Google Images best practices. Nasihat itu bukan khusus Twitter, tetapi ia adalah disiplin penerbitan yang sama: menjadikan imej penting mudah untuk perayap temui, ambil, dan fahami.

Patutkah menggunakan WebP, JPEG, atau PNG untuk imej kad Twitter?

Gunakan WebP apabila platform dan sasaran pratonton anda menyokongnya, terutamanya untuk grafik artikel, pratonton produk, dan tangkapan skrin dengan warna campuran. Gunakan JPEG untuk keserasian yang luas atau kad yang banyak foto. Gunakan PNG hanya apabila ketelusan atau tepi tanpa kehilangan (lossless edges) cukup penting untuk mewajarkan fail yang lebih besar.

Panduan jenis fail imej MDN menjelaskan bahawa WebP menyokong mampatan lossy dan lossless. Fleksibiliti itu berguna untuk kad sosial kerana satu imej boleh mengandungi tekstur foto, warna jenama rata, dan teks.

Untuk artikel ini, saya telah mengekod dan menguji empat grafik WebP 1200 by 630 secara tempatan dengan ImageMagick dan memeriksa saiz output sebelum menerbitkan. Saiznya berada antara 14 KB dan 28 KB kerana ia adalah grafik bersih dengan tekstur terhad. Foto produk sebenar dan tangkapan skrin terperinci biasanya akan lebih besar.

Format Sesuai untuk Risiko tipikal Titik permulaan praktikal
WebP Kebanyakan grafik pratonton sosial dan kad imej campuran Sesetengah alat lama mungkin tidak memaparkan draf tempatan Eksport WebP lossy sekitar kualiti 80-85
JPEG Pratonton berat foto dan keperluan keserasian konservatif Tiada ketelusan, kemungkinan cincin di sekeliling teks Eksport sekitar kualiti 82-88
PNG Logo, ketelusan, grafik rata tajam Saiz fail besar Gunakan hanya apabila lossless diperlukan
AVIF Imej moden yang sangat kecil Ekosistem pratonton boleh kurang boleh diramal Uji dengan berhati-hati sebelum digunakan sebagai satu-satunya imej kad

Jika imej kad juga merupakan hero halaman, ikuti panduan Image Compression Ratio supaya pratonton kelihatan bersih tanpa menjadikan halaman berat. Jika anda membandingkan format moden, baca AVIF vs WebP Comparison.

Bagaimana membuat imej boleh dibaca dalam feed?

Reka bentuk kad untuk tempat terkecil di mana ia akan dilihat, bukan papan seni (artboard) dalam editor anda. Pratonton feed mungkin lebih sempit daripada asal, dan UI sekeliling bersaing untuk perhatian.

Gunakan peraturan reka bentuk ini:

  • Letakkan subjek utama atau tajuk utama di kawasan selamat tengah.
  • Tinggalkan padding di sekeliling wajah, produk, logo, dan teks.
  • Gunakan satu mesej ringkas, bukan tajuk artikel penuh ditambah subjudul ditambah lencana.
  • Periksa imej pada lebar 600 pixels sebelum meluluskannya.
  • Elakkan tangkapan skrin dengan label kecil melainkan UI itu sendiri adalah ceritanya.
  • Kekalkan kontras yang cukup tinggi untuk pandangan pantas.
  • Jangan gunakan imej stok generik apabila halaman itu mengenai alat, produk, atau aliran kerja teknikal.

Imej kad yang berguna harus menjawab "tentang apa pautan ini?" sebelum pembaca meneliti tajuknya. Untuk artikel blog, itu mungkin diagram ringkas. Untuk panduan e-dagang, ia mungkin contoh foto produk. Untuk penukar atau pengubah saiz, ia mungkin tangkapan skrin alat yang dipotong.

Mengapa imej kad Twitter saya tidak muncul?

Kebanyakan imej kad yang rosak datang daripada salah satu daripada empat sebab: perayap tidak dapat mengambil URL, metadata menunjuk kepada imej yang salah, platform telah menyimpan versi lama (cached), atau imej itu secara teknikal sah tetapi calon pratonton yang lemah.

Grafik senarai semak penyelesaian masalah menunjukkan URL imej relatif, blokir perayap, kad tersimpan lapuk, dan fail terlalu besar

Jalankan urutan ini sebelum menukar kreatif:

  1. Buka sumber halaman akhir dan sahkan tag twitter:image wujud.
  2. Salin URL imej yang tepat dari HTML yang dirender.
  3. Jalankan curl -I terhadap URL imej dan sahkan HTTP 200.
  4. Sahkan jenis kandungan respons adalah jenis imej.
  5. Semak bahawa URL imej tidak dialihkan melalui dinding pengesahan (auth wall).
  6. Pastikan fail imej tidak terlalu besar.
  7. Sahkan robots.txt tidak menyekat imej atau halaman.
  8. Tukar nama fail imej apabila anda perlu memaksa cache baharu.
  9. Uji semula halaman yang disebarkan, bukan URL pratonton tempatan.
  10. Semak tag Open Graph jika kad berfungsi dalam satu aplikasi tetapi tidak dalam yang lain.
Simptom Punca mungkin Pembaikan
Tiada imej muncul twitter:image hilang atau relatif Gunakan URL CDN HTTPS penuh
Imej lama muncul Pratonton tersimpan (Cached) Terbitkan nama fail baharu dan segarkan URL yang dikongsi
Imej kelihatan dipotong buruk Komposisi tidak selamat Eksport semula dengan padding lebih banyak dan subjek tengah
Tajuk pratonton salah Ketidakpadanan metadata Selaraskan twitter:title, og:title, dan tajuk halaman
Berfungsi secara tempatan tetapi tidak langsung Laluan tempatan, pengesahan, atau CDN disekat Uji URL pengeluaran dengan curl -I

Panduan Potong Imej Online berguna apabila subjek memerlukan potongan yang lebih selamat, dan Image Aspect Ratio Changer meliputi menukar kreatif dari segi empat sama atau potret ke dalam bingkai pratonton sosial.

Senarai semak pra-penerbitan

Sebelum anda menghantar halaman yang bergantung pada perkongsian sosial, semak imej dan metadata bersama-sama. Fail WebP yang sempurna masih akan gagal jika tag itu menunjuk kepada URL semalam. Metadata yang sempurna masih akan mengecewakan jika imej tidak boleh dibaca dalam feed.

Gunakan senarai semak akhir ini:

  • Frontmatter atau imej CMS adalah imej yang sama digunakan untuk metadata sosial.
  • Imej adalah unik untuk halaman atau jelas berkaitan dengan halaman.
  • URL imej adalah HTTPS dan awam.
  • Sambungan fail sepadan dengan format respons sebenar.
  • Imej mengembalikan HTTP 200 dari CDN.
  • Tajuk dan penerangan tidak dipenuhi dengan kata kunci (keyword stuffing).
  • Imej pratonton mempunyai teks alt deskriptif di mana ia muncul dalam badan artikel.
  • Imej diperiksa secara visual pada saiz pratonton desktop dan mudah alih.
  • Halaman mempunyai URL kanonik yang stabil.
  • Kad diuji semula selepas penyebaran (deployment).

Imej kad Twitter yang baik adalah sistem penerbitan kecil: satu visual yang jelas, metadata yang stabil, URL CDN yang pantas, dan semakan pengambilan akhir. Setelah kepingan-kepingan itu berada di tempatnya, pratonton jauh kurang berkemungkinan rosak semasa pelancaran atau penyegaran kandungan.

Gunakan alat percuma kami semasa mengikuti panduan ini.

Mampatkan imejBuang latar belakang

Teruskan membaca