2026-03-28

Twitter Card Image Size and Preview Checklist

Choose the right Twitter card image size, metadata, WebP export, and troubleshooting checks so shared links render cleanly on X and other social feeds.

Twitter Card Image Size and Preview Checklist

Terakhir diperbarui: June 28, 2026

Gambar kartu Twitter adalah gambar pratinjau yang muncul ketika seseorang membagikan URL di X. Gambar ini harus cukup besar agar terlihat tajam, cukup kecil agar perayap dapat mengambilnya dengan cepat, dan dideklarasikan dengan metadata yang berfungsi bahkan ketika platform beralih ke tag Open Graph.

Panduan ini memberikan daftar periksa publikasi praktis: dimensi, tag, format file, pemeriksaan CDN, dan perbaikan untuk kartu yang menolak diperbarui.

Jawaban singkat: gambar kartu Twitter apa yang harus Anda gunakan?

Gunakan WebP atau JPEG berukuran 1200 x 630 piksel untuk sebagian besar tautan yang dibagikan, terutama jika Anda menginginkan kartu gambar yang besar. Jauhkan subjek penting dari tepi, buat teks mudah dibaca pada ukuran thumbnail, dan gunakan URL HTTPS absolut di twitter:image dan og:image.

Untuk X, atur twitter:card ke summary_large_image ketika gambar adalah daya tarik utama. Jaga agar file tetap nyaman di bawah batas gambar kartu yang didokumentasikan dan verifikasi bahwa URL CDN akhir mengembalikan HTTP 200 sebelum publikasi.

Pengaturan yang andal sederhana:

  • Ekspor gambar 1200 x 630 untuk pratinjau.
  • Gunakan URL CDN akhir, bukan jalur relatif.
  • Tambahkan twitter:title, twitter:description, dan twitter:image.
  • Tambahkan og:title, og:description, dan og:image yang cocok sebagai cadangan (fallback).
  • Uji URL langsung setelah deploy, lalu segarkan cache platform jika gambar lama masih muncul.

Apa itu gambar kartu Twitter?

Gambar kartu Twitter adalah URL gambar yang dideklarasikan dalam metadata halaman sehingga X dapat membangun pratinjau yang kaya. Ini tidak sama dengan gambar pertama di artikel Anda. Perayap membaca head HTML, menemukan tag kartu, mengambil gambar, dan menyimpan pratinjau cache untuk URL yang dibagikan.

Contoh markup kartu milik X sendiri masih menjelaskan jenis kartu summary dan summary_large_image dalam dokumentasi dan contoh pengembangannya. Perbedaan praktisnya adalah ukuran pratinjau: summary_large_image memberikan ruang gambar yang cukup untuk membawa tautan blog, produk, alat, atau kampanye.

Open Graph penting karena banyak platform sosial, aplikasi obrolan, dan sistem pratinjau tautan membaca og:image. Protokol Open Graph mendefinisikan og:title, og:type, og:image, dan og:url sebagai metadata inti. Gunakan tag Twitter/X dan tag Open Graph agar satu parser yang hilang tidak merusak setiap pratinjau.

Metadata field Digunakan untuk Catatan praktis
twitter:card Memilih tata letak ringkasan atau gambar besar Gunakan summary_large_image untuk sebagian besar pembagian artikel dan halaman arahan (landing-page)
twitter:image Gambar pratinjau X utama Gunakan URL gambar HTTPS absolut
og:image Gambar pratinjau cadangan untuk aplikasi sosial dan pesan Biasanya cocok dengan twitter:image kecuali platform memerlukan pemotongan yang berbeda
og:url URL kanonik untuk halaman yang dibagikan Cocokkan URL halaman kanonik publik
title dan description tags Konteks peramban dan pencarian Jaga agar konsisten dengan metadata sosial

Untuk pekerjaan metadata gambar terkait, pasangkan ini dengan panduan Image Optimization for SEO dan Complete Image Optimization Checklist.

Berapa ukuran yang harus dimiliki gambar kartu Twitter?

Mulailah dengan 1200 x 630 piksel. Ini cocok dengan pemotongan pratinjau sosial umum 1.91:1, memberikan platform cukup piksel untuk diskalakan secara bersih, dan berfungsi dengan baik ketika gambar yang sama digunakan sebagai og:image.

Hindari merancang kartu yang hanya berfungsi pada ukuran penuh. Feed memotong, mengubah ukuran, dan menempatkan teks di sekitar gambar. Label kecil, tangkapan layar UI tipis, dan latar belakang ramai sering terlihat bagus dalam alat desain tetapi menjadi tidak terbaca dalam kartu berbagi yang sebenarnya.

Grafik yang menunjukkan gambar kartu Twitter 1200 x 630 dengan WebP, ukuran file, HTTPS, dan catatan desain aman tepi

Kasus penggunaan Gambar yang direkomendasikan Mengapa berhasil Perhatikan
Artikel blog atau panduan 1200 x 630 WebP Pemotongan pratinjau besar, kompatibilitas platform luas Teks judul kecil
Peluncuran produk 1200 x 630 WebP atau JPEG Produk tetap terlihat setelah diskalakan Pemotongan tepi produk
Halaman alat (tool page) Grafik berbasis tangkapan layar 1200 x 630 Menunjukkan apa yang dilakukan alat sebelum klik Teks UI terlalu kecil untuk dibaca
Halaman logo saja 1200 x 630 dengan padding yang luas Mencegah logo terasa sesak Pratinjau yang terlihat kosong
Kampanye ramah persegi Variasi terpisah 1200 x 1200 saat dibutuhkan Berguna untuk platform dengan pemotongan persegi Jangan digunakan secara membabi buta sebagai kartu X

Gunakan artikel Best Image Resizer for Social Media ketika Anda membutuhkan beberapa pemotongan platform, dan gunakan Facebook Ad Image Sizes ketika creative yang sama juga memberi makan media sosial berbayar.

Bagaimana cara menulis metadata?

Masukkan tag dalam HTML yang dirender di sisi server, di dalam <head> halaman. Jangan bergantung pada JavaScript sisi klien untuk menyuntikkan tag sosial setelah pemuatan. Perayap pratinjau tautan mungkin tidak menjalankan aplikasi Anda dengan cara yang sama seperti peramban.

Diagram metadata tiga baris yang menunjukkan tag kartu twitter, gambar twitter, dan gambar open graph untuk pratinjau sosial

Gunakan pola ini untuk artikel atau halaman alat normal:

<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">

Pertahankan pemeriksaan ini dalam code review:

  1. URL gambar adalah absolut dan dimulai dengan https://.
  2. URL gambar adalah URL CDN akhir, bukan jalur build lokal.
  3. Judul halaman dan judul sosial menggambarkan halaman yang sama.
  4. Deskripsi sosial cukup pendek untuk dipindai dalam pratinjau.
  5. URL kanonik dan og:url menunjuk ke halaman publik yang sama.
  6. Gambar kartu tidak diblokir oleh robots.txt, otentikasi, atau aturan hotlink.
  7. Respons server menyertakan tipe konten gambar yang benar.

Panduan SEO gambar Google juga merekomendasikan konteks gambar deskriptif, URL gambar yang dapat dirayapi, dan format yang didukung di Google Images best practices. Saran itu tidak spesifik untuk Twitter, tetapi ini adalah disiplin publikasi yang sama: buat gambar penting mudah ditemukan, diambil, dan dipahami oleh perayap.

Haruskah saya menggunakan WebP, JPEG, atau PNG untuk gambar kartu Twitter?

Gunakan WebP ketika platform dan target pratinjau Anda mendukungnya, terutama untuk grafik artikel, pratinjau produk, dan tangkapan layar dengan warna campuran. Gunakan JPEG untuk kompatibilitas luas atau kartu yang banyak foto. Gunakan PNG hanya ketika transparansi atau tepi lossless cukup penting untuk membenarkan ukuran file yang lebih besar.

Panduan tipe file gambar MDN menjelaskan bahwa WebP mendukung kompresi lossy dan lossless. Fleksibilitas itu berguna untuk kartu sosial karena satu gambar dapat berisi tekstur foto, warna merek datar, dan teks.

Untuk artikel ini, saya mengenkode dan menguji empat grafik WebP 1200 x 630 secara lokal dengan ImageMagick dan memeriksa ukuran output sebelum publikasi. Ukuran file berada di antara 14 KB dan 28 KB karena itu adalah grafik bersih dengan tekstur terbatas. Foto produk nyata dan tangkapan layar detail biasanya akan lebih besar.

Format Cocok untuk Risiko umum Titik awal praktis
WebP Sebagian besar grafik pratinjau sosial dan kartu gambar campuran Beberapa alat lama mungkin tidak menampilkan draf lokal Ekspor WebP lossy di sekitar kualitas 80-85
JPEG Pratinjau yang banyak foto dan kebutuhan kompatibilitas konservatif Tidak ada transparansi, kemungkinan ringing di sekitar teks Ekspor di sekitar kualitas 82-88
PNG Logo, transparansi, grafik datar tajam Ukuran file besar Gunakan hanya jika lossless diperlukan
AVIF Gambar modern yang sangat kecil Ekosistem pratinjau bisa kurang dapat diprediksi Uji dengan hati-hati sebelum digunakan sebagai satu-satunya gambar kartu

Jika gambar kartu juga merupakan hero halaman, ikuti panduan Image Compression Ratio agar pratinjau terlihat bersih tanpa membuat halaman menjadi berat. Jika Anda membandingkan format modern, baca AVIF vs WebP Comparison.

Bagaimana cara membuat gambar dapat dibaca di feed?

Rancang kartu untuk tempat terkecil di mana ia akan dilihat, bukan pada artboard di editor Anda. Pratinjau feed bisa lebih sempit dari aslinya, dan UI di sekitarnya bersaing untuk perhatian.

Gunakan aturan desain ini:

  • Letakkan subjek utama atau judul di area aman tengah.
  • Sisakan padding di sekitar wajah, produk, logo, dan teks.
  • Gunakan satu pesan singkat, bukan judul artikel lengkap ditambah subjudul ditambah lencana.
  • Periksa gambar pada lebar 600 piksel sebelum menyetujuinya.
  • Hindari tangkapan layar dengan label kecil kecuali UI itu sendiri adalah ceritanya.
  • Jaga kontras cukup tinggi untuk pandangan cepat.
  • Jangan menggunakan gambar stok generik ketika halaman tentang alat, produk, atau alur kerja teknis.

Gambar kartu yang berguna harus menjawab "tentang apa tautan ini?" sebelum pembaca mempelajari judulnya. Untuk posting blog, itu mungkin diagram sederhana. Untuk panduan e-commerce, itu mungkin contoh foto produk. Untuk konverter atau pengubah ukuran, itu mungkin tangkapan layar alat yang dipotong.

Mengapa gambar kartu Twitter saya tidak tampil?

Sebagian besar gambar kartu yang rusak berasal dari salah satu dari empat penyebab: perayap tidak dapat mengambil URL, metadata menunjuk ke gambar yang salah, platform telah menyimpan versi lama (cache), atau gambarnya secara teknis valid tetapi kandidat pratinjau yang buruk.

Grafik daftar pemeriksaan pemecahan masalah yang menunjukkan URL gambar relatif, blokir perayap, kartu cache usang, dan file berukuran terlalu besar

Jalankan urutan ini sebelum mengubah creative:

  1. Buka sumber halaman akhir dan konfirmasi bahwa tag twitter:image ada.
  2. Salin URL gambar yang tepat dari HTML yang dirender.
  3. Jalankan curl -I terhadap URL gambar dan konfirmasi HTTP 200.
  4. Konfirmasi tipe konten respons adalah jenis gambar.
  5. Periksa bahwa URL gambar tidak dialihkan melalui dinding otentikasi (auth wall).
  6. Pastikan file gambar tidak terlalu besar.
  7. Konfirmasi robots.txt tidak memblokir gambar atau halaman.
  8. Ubah nama file gambar ketika Anda perlu memaksa cache baru.
  9. Uji ulang halaman yang di-deploy, bukan URL pratinjau lokal.
  10. Periksa tag Open Graph jika kartu berfungsi di satu aplikasi tetapi tidak di aplikasi lain.
Gejala Kemungkinan penyebab Perbaikan
Tidak ada gambar yang muncul twitter:image hilang atau relatif Gunakan URL CDN HTTPS penuh
Gambar lama muncul Pratinjau cache Publikasikan nama file baru dan segarkan URL yang dibagikan
Gambar terlihat terpotong buruk Komposisi tidak aman Ekspor ulang dengan lebih banyak padding dan subjek sentral
Judul pratinjau salah Ketidakcocokan metadata Sejajarkan twitter:title, og:title, dan judul halaman
Berfungsi secara lokal tetapi tidak langsung Jalur lokal, otentikasi, atau CDN diblokir Uji URL produksi dengan curl -I

Panduan Memotong Gambar Online berguna ketika subjek membutuhkan pemotongan yang lebih aman, dan Image Aspect Ratio Changer mencakup perubahan creative dari persegi atau potret menjadi bingkai pratinjau sosial.

Daftar periksa pra-publikasi

Sebelum Anda meluncurkan halaman yang bergantung pada pembagian sosial, tinjau gambar dan metadata secara bersamaan. File WebP yang sempurna masih akan gagal jika tag menunjuk ke URL kemarin. Metadata yang sempurna masih akan mengecewakan jika gambarnya tidak terbaca di feed.

Gunakan daftar periksa akhir ini:

  • Frontmatter atau gambar CMS adalah gambar yang sama yang digunakan untuk metadata sosial.
  • Gambar unik untuk halaman atau jelas relevan dengan halaman tersebut.
  • URL gambar adalah HTTPS dan publik.
  • Ekstensi file cocok dengan format respons aktual.
  • Gambar mengembalikan HTTP 200 dari CDN.
  • Judul dan deskripsi tidak diisi kata kunci (keyword stuffing).
  • Gambar pratinjau memiliki teks alternatif deskriptif di tempat ia muncul dalam badan artikel.
  • Gambar diperiksa secara visual pada ukuran pratinjau desktop dan seluler.
  • Halaman memiliki URL kanonik yang stabil.
  • Kartu diuji ulang setelah deployment.

Gambar kartu Twitter yang bagus adalah sistem publikasi kecil: satu visual yang jelas, metadata yang stabil, URL CDN yang cepat, dan pemeriksaan pengambilan akhir. Setelah bagian-bagian itu pada tempatnya, pratinjau jauh lebih kecil kemungkinannya untuk rusak selama peluncuran atau penyegaran konten.

Gunakan alat gratis sambil mengikuti panduan.

Kompres gambarHapus latar belakang

Lanjutkan membaca

Gambar sampul untuk Cara Memotong Gambar menjadi Lingkaran (Foto Profil dan Avatar)

Thu Mar 26 2026 20:00:00 GMT-0400 (北美东部夏令时间)

Cara Memotong Gambar menjadi Lingkaran (Foto Profil dan Avatar)

Potong gambar menjadi lingkaran untuk avatar dan foto profil Anda. Pelajari aturan 'kotak-pertama', membuat PNG lingkaran transparan, atau lingkaran di latar belakang, serta penggunaan lingkaran secara umum.