Keterampilan Agen Pembuat Gambar Kartu Twitter

Generator Gambar Kartu Twitter

Hasilkan gambar yang dioptimalkan untuk pratinjau tautan X (Twitter) — kartu yang muncul di linimasa saat seseorang membagikan tautan. Kartu Twitter memiliki dimensi gambar dan perilaku rendering yang berbeda dari Open Graph standar. Keterampilan ini mencakup pipeline pembuatan lengkap yang disesuaikan untuk rasio aspek 2:1 Twitter dan keunikan spesifik platform.

Semua enam pendekatan pembuatan dan semua enam gaya visual dari og-image-generator berlaku di sini. Perbedaannya hanya: dimensi keluaran (1200x675 alih-alih 1200x630), adaptasi desain khusus X, zona aman linimasa, dan dukungan kartu pemain.

Kapan Digunakan

• Pengguna membutuhkan gambar 1200×675px (2:1) untuk pratinjau tautan X/Twitter, summary_large_image, atau poster kartu pemain
• Pengguna menyebut twitter:image, Kartu Twitter, gambar pratinjau X, pratinjau tweet, atau desain kartu linimasa
• Pengguna membutuhkan tata letak yang aman untuk mode gelap, zona konten 60% atas, atau masker tepi 20px untuk pemotongan sudut melengkung X
• Pengguna sudah menggunakan og-image-generator dan menginginkan varian yang disesuaikan dengan Twitter dari gaya dan pipeline yang sama

Kapan TIDAK Digunakan

• Gambar OG generik (1200×630, 1,91:1) untuk Facebook, LinkedIn, Slack, dll. — gunakan og-image-generator sebagai gantinya
• Hanya mengatur tag meta HTML (bukan membuat file gambar) — gunakan twitter-cards dari marketing-skills
• Keluaran SVG — Twitter tidak mendukung SVG untuk gambar kartu; gunakan PNG atau JPG
• Editor visual tanpa kode atau API hosted — gunakan Oginify alih-alih menjalankan pipeline agen

Saat dipanggil: Pada penggunaan pertama, buka dengan 1–2 kalimat tentang apa yang dicakup oleh keterampilan ini dan mengapa itu penting, lalu berikan keluaran utama. Pada penggunaan berikutnya atau saat pengguna meminta untuk melewati, langsung ke keluaran utama.

1. Cara Twitter Mengonsumsi Gambar

Twitter membaca gambar dalam urutan prioritas ini:

1. twitter:image — jika diatur secara eksplisit, langsung digunakan
2. og:image — jatuh ke gambar OG jika tidak ada tag Kartu Twitter
3. Tanpa gambar — pratinjau tautan teks biasa

Wawasan kunci: Facebook dan LinkedIn TIDAK membaca twitter:image. Twitter adalah satu-satunya platform yang membaca tag Kartu Twitter. Ini berarti Anda memerlukan KEDUA jalur gambar di metadata Anda, meskipun pipeline rendering sebenarnya dapat dibagikan.

2. Spesifikasi Gambar Twitter

Jenis kartu menentukan tampilan gambar:

Untuk sebagian besar kasus penggunaan, targetkan summary_large_image pada 1200x675px.

3. Enam Pendekatan Pembuatan (Disesuaikan untuk Twitter)

Keenam pendekatan dari og-image-generator §1 berfungsi untuk gambar Twitter. Perbedaannya hanya pada dimensi keluaran. Bagian ini mencakup adaptasi khusus Twitter — lihat og-image-generator §1 untuk dokumentasi pipeline rendering lengkap.

3.1 Pembuatan Gambar AI (Inti #1)

Strategi prompt tiga bagian yang sama seperti OG, tetapi dengan pembingkaian khusus Twitter:

Bagian 1 — Deskripsi visual: latar belakang, komposisi, suasana hati
Bagian 2 — Spesifikasi teks: Teks TEPAT, dalam tanda kutip, dengan petunjuk ukuran
Bagian 3 — Batasan Twitter: "1200x675px, rasio aspek 2:1, teks kunci di
         60% atas, latar belakang gelap lebih disukai untuk mode gelap"

Pendekatan hibrida (disarankan): AI menghasilkan latar belakang/suasana; Satori melapisi teks. Kritis untuk teks bahasa China di mana model AI masih kesulitan — dan penggunaan mode gelap Twitter ~40% membuat akurasi teks semakin terlihat.

Lihat og-image-generator §1.1 untuk tabel perbandingan alat AI lengkap (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Alur Kerja Sadar Konten Asli Agen (Inti #2)

Alur kerja 6 langkah yang sama seperti OG (§1.2): Baca Konten → Cocokkan Gaya → Ekstrak Elemen Visual → Pilih Pembuatan → Hasilkan → Validasi. Tambahan khusus Twitter di setiap langkah:

Langkah 2 (Cocokkan Gaya) — Pertimbangan mode gelap Twitter: lebih suka gaya dengan latar belakang gelap (Terminal/CLI, Midnight Ink Magazine, mode gelap Brutalis) atau gaya dengan varian gelap untuk X.

Langkah 3 (Ekstrak Elemen Visual) — Pemotongan linimasa Twitter menjadi ~1:1 di seluler berarti elemen visual terpenting harus berfungsi di dalam persegi. Pita data horizontal yang berfungsi pada 1200x675 mungkin tidak terlihat di pemotongan persegi. Ekstrak setidaknya satu elemen yang terbaca dengan baik pada 1:1.

Langkah 4 (Pilih Pembuatan) — Pohon keputusan yang sama. Untuk pembuatan AI, tambahkan: "Apakah teks akan bertahan pada lebar render seluler Twitter ~260px?"

Langkah 6 (Validasi) — Jalankan pemeriksaan OG DAN pemeriksaan khusus Twitter (§8).

3.3 Satori + resvg (Berbasis kode)

Pipeline yang sama seperti OG. Ubah tinggi dari 630 menjadi 675. Lihat og-image-generator §1.3 untuk implementasi lengkap.

// Endpoint bersama melayani OG dan Twitter:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}

Kemudian di metadata halaman:

const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Twitter-specific 1200x675
  },
};

3.4 Puppeteer, Layanan Terkelola, Konfigurasi JSON

Sama seperti OG — atur viewport/tinggi ke 675 alih-alih 630. Lihat og-image-generator §1.4–1.6. Untuk sistem prioritas halaman v3 (S/A/B/C) dan pemilihan pipeline, lihat content-strategy.md dan pipeline-guide.md.

4. Pertimbangan Desain Khusus X

Twitter merender gambar secara berbeda dari Facebook/LinkedIn. Rancang dengan mempertimbangkan hal-hal ini:

Mode gelap (~40% pengguna): Gambar muncul sejajar di umpan, dikelilingi oleh tweet. Latar belakang gelap menyatu secara alami; latar belakang terang menonjol tetapi bisa terlihat mengganggu dalam mode gelap. Setiap template harus memiliki varian gelap atau default yang ramah gelap. Di antara 6 gaya, Terminal/CLI, Midnight Ink Magazine, dan Brutalis (latar belakang hitam) secara alami ramah mode gelap. Swiss Minimal dan Koran harus dilengkapi dengan alternatif mode gelap.

Pemotongan linimasa (seluler): Di seluler, gambar summary_large_image dipotong menjadi ~1:1 di linimasa sampai tweet diperluas. Gambar penuh 2:1 hanya terlihat saat diketuk. Tempatkan konten terpenting (judul, visual utama) di 60% atas gambar — persegi tengah yang bertahan dari pemotongan. Jangan pernah meletakkan teks kritis di 20% bawah.

Keterbacaan teks pada ukuran kecil: Gambar linimasa ditampilkan dengan lebar ~260px di umpan seluler. Uji template Anda pada skala 1/4 (lebar ~300px) untuk memastikan teks tetap terbaca. Ini lebih ketat daripada ukuran umpan desktop OG ~500px.

Masker tepi: Twitter menerapkan masker sudut melengkung halus pada gambar kartu. Logo dan elemen kritis yang ditempatkan dalam 20px dari tepi mana pun berisiko terpotong sebagian.

Adaptasi template yang direkomendasikan untuk Twitter (per gaya):

5. Poster Kartu Pemain

Untuk konten video/audio, jenis kartu player memerlukan gambar poster:

<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">

Gambar poster ditampilkan sebelum pengguna mengetuk putar. Rancang sebagai thumbnail yang menarik — sertakan overlay tombol putar (segitiga di tengah lingkaran), judul video, dan bingkai dari konten. Rekomendasi rasio 2:1 yang sama berlaku. Tombol putar harus menjadi elemen terbesar di zona persegi tengah.

Untuk poster yang dihasilkan AI: prompt untuk "thumbnail video dengan tombol putar di tengah, teks judul di sepertiga atas, latar belakang gelap, 1200x675px."

6. Sistem Gaya (dibagikan dengan OG — 16 gaya)

Gambar Twitter menggunakan 16 gaya visual yang sama dari og-image-generator §3 dan references/style-system-v3.md. Semua template berfungsi untuk Twitter — cukup ubah tinggi kanvas menjadi 675px.

Performer teratas X: Terminal, Brutalis, Neo-Brutalisme, Gradien Gelap, Vaporwave — kontras tinggi + latar belakang gelap optimal untuk linimasa X. Hindari di X: gaya yang terlalu korporat dan sesuai merek tanpa varian gelap; latar belakang putih bersih di linimasa mode gelap.

7. Font & Tipografi

Aturan yang sama seperti OG. Lihat og-image-generator references/typography.md.

Tambahan khusus Twitter: karena gambar linimasa dirender dengan lebar ~260px (vs umpan desktop OG ~500px), naikkan ukuran font minimum sebesar 4px — gunakan minimum 28px alih-alih 24px.

8. Pemeriksaan YAML Agen

pemeriksaan:
  # P0 — harus lulus
  - id: dimensi-twitter
    deskripsi: twitter:image adalah 1200x675px (2:1) atau 1200x628px (lintas platform)
  - id: kecocokan-jenis-kartu
    deskripsi: twitter:card adalah summary_large_image saat menggunakan gambar besar
  - id: url-absolut
    deskripsi: URL twitter:image bersifat absolut (https://) dan dapat diakses publik
  - id: format
    deskripsi: Format gambar adalah PNG, JPG, atau WebP (bukan SVG)

  # P1 — seharusnya lulus
  - id: og-fallback
    deskripsi: og:image juga diatur (sebagai fallback untuk platform yang tidak membaca twitter:image)
  - id: zona-aman-linimasa
    deskripsi: Teks kritis dan jangkar visual utama berada di 60% atas; tidak ada yang kritis di 20% bawah
  - id: ketahanan-pemotongan-persegi
    deskripsi: Elemen visual terpenting terbaca dengan benar dalam pemotongan tengah 1:1 (linimasa seluler)
  - id: mode-gelap
    deskripsi: Template menyertakan varian latar belakang gelap atau menggunakan gaya default yang ramah gelap
  - id: jarak-masker-tepi
    deskripsi: Logo dan elemen kritis berjarak ≥20px dari semua tepi (masker sudut melengkung Twitter)

  # P2 — bagus untuk dimiliki
  - id: kompatibel-lintas-platform
    deskripsi: Gambar yang sama pada 1200x628px berfungsi untuk OG dan Twitter tanpa pembuatan terpisah
  - id: teks-ai-validasi
    deskripsi: Jika dihasilkan AI, semua teks divalidasi terhadap sumber — tidak ada teks yang dihalusinasi atau salah eja
  - id: poster-pemain
    deskripsi: Halaman kartu pemain memiliki gambar poster khusus dengan tombol putar
  - id: sadar-konten-twitter
    deskripsi: Gambar mencerminkan konten spesifik halaman, bukan hanya judul dalam template berukuran Twitter

9. Kesalahan Umum

1. Rasio aspek yang salah: Menggunakan 1200x630 OG (1,91:1) tanpa penyesuaian. Meskipun Twitter mentolerirnya, 1200x675 (2:1) mengisi kartu lebih baik dan menghindari letterboxing.
2. Tag twitter:image hilang: Hanya mengandalkan fallback OG — tanpa twitter:image eksplisit, Anda kehilangan kendali atas gambar mana yang dipilih Twitter.
3. Teks di 20% bawah: Twitter memotong gambar menjadi ~1:1 di seluler. Teks kritis di dekat bagian bawah terpotong di linimasa.
4. Tidak ada pertimbangan mode gelap: Gambar latar belakang terang terlihat mencolok di linimasa mode gelap Twitter, yang diaktifkan oleh ~40% pengguna.
5. Menggunakan SVG: Twitter tidak mendukung SVG untuk gambar kartu. Selalu keluarkan PNG atau JPG.
6. GIF tanpa frame pertama statis: Twitter hanya menampilkan frame pertama GIF. Pastikan frame 1 adalah gambar diam yang bermakna.
7. Halusinasi teks AI pada tampilan 260px: Teks yang dihasilkan AI yang terlihat benar pada ukuran penuh mungkin menunjukkan karakter kacau saat dirender kecil. Validasi pada skala 1/4.
8. Logo menyentuh tepi: Masker sudut melengkung Twitter memotong ~10px dari tepi. Jauhkan logo ≥20px dari tepi.

10. Pengujian

• Validator Kartu: https://cards-dev.twitter.com/validator — menunjukkan persis bagaimana kartu akan dirender. Tempel URL apa pun untuk pratinjau.
• Tes manual: Tweet tautan dari akun pengujian, lalu periksa linimasa + tampilan yang diperluas.
• Tes mode gelap: Periksa kartu di klien Twitter mode terang dan gelap.
• Penghapusan cache: Twitter menyimpan data kartu secara agresif (hingga 7 hari). Setelah perubahan, gunakan Validator Kartu untuk memaksa pengikisan ulang.
• Tes pemotongan seluler: Tangkapan layar kartu pada rasio aspek 1:1 (potong ke tengah 675x675) untuk memverifikasi pemotongan persegi masih mengomunikasikan konten halaman.

11. Keterampilan Terkait

Keterampilan ini opsional — keterampilan ini berfungsi secara mandiri. Pasang jika Anda membutuhkan kemampuan tambahan:

Repo yang sama (selalu dipasang bersama):

• og-image-generator: Pembuatan gambar OG (1200x630, 1,91:1) — pipeline rendering lengkap, semua 6 gaya, template awal, panduan tipografi, batasan Satori. Generator Kartu Twitter ini menggunakan kembali seluruh infrastrukturnya.

Repo terpisah (mungkin dipasang atau tidak):

• twitter-cards (marketing-skills): Konfigurasi tag meta HTML untuk twitter:card, twitter:site, twitter:creator, validasi. Menangani cara MENGATUR tag; keterampilan ini menangani cara MEMBUAT gambar.
• open-graph (marketing-skills): Konfigurasi tag meta HTML untuk og:title, og:image, og:url, alat pengujian platform
• social-share-generator (marketing-skills): UI tombol bagikan yang menggunakan data Kartu Twitter saat pengguna membagikan tautan ke X