# Keterampilan Agen Pembuat Gambar Kartu Twitter

> Buat gambar pratinjau tautan Kartu Twitter (X) yang dioptimalkan dengan rasio aspek 2:1 yang benar dan batasan spesifik platform. Keterampilan ini memastikan pratinjau tweet Anda terlihat sempurna, membantu Anda menarik perhatian audiens dan meningkatkan keterlibatan.

- Canonical: https://nanoskill.ai/id/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/id/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: id
- Source type: github
- Popularity signal: 244

## Sources

- https://github.com/kostja94/social-cards-skills

## Install

```shell
npx skills add https://github.com/kostja94/social-cards-skills/tree/main/twitter-card-image-generator
```

## About

Keterampilan pembuat gambar Kartu Twitter ini memberdayakan pengguna untuk membuat gambar yang dioptimalkan dengan sempurna untuk pratinjau tautan X (Twitter), memastikan konten mereka memberikan dampak visual yang kuat di linimasa. Berbeda dengan gambar Open Graph generik, alat ini secara khusus menyesuaikan dengan rasio aspek 2:1 (1200x675px) khas Twitter dan keanehan rendering spesifik platform, membantu pembuat konten, pemasar, dan pengembang meningkatkan kehadiran media sosial mereka dan mendorong keterlibatan.

Dengan memanfaatkan enam pendekatan pembuatan yang berbeda dan 16 gaya visual serbaguna, keterampilan ini menyediakan opsi komprehensif untuk pembuatan gambar. Ini menggabungkan fitur-fitur canggih seperti pembuatan gambar AI untuk latar belakang, alur kerja yang sadar konten, dan integrasi pipeline Satori/resvg. Pertimbangan desain utama seperti kompatibilitas mode gelap, pemotongan linimasa seluler, dan penyamaran tepi sudah terpasang, memastikan gambar menarik secara visual dan fungsional di semua pengalaman pengguna.

Di luar pratinjau tautan standar, pembuat juga mendukung pembuatan gambar poster yang menarik untuk Kartu Pemutar Twitter, ideal untuk konten video dan audio. Dengan pemeriksaan YAML terintegrasi dan panduan tentang kesalahan umum, pengguna dapat dengan percaya diri menghasilkan gambar Kartu Twitter berkualitas tinggi yang memenuhi spesifikasi teknis dan memaksimalkan rasio klik-tayang, membuat tautan yang dibagikan lebih efektif dan profesional.

## Key features

- **Dioptimalkan untuk Pratinjau Tautan X (Twitter)**: Hasilkan gambar yang dirancang khusus untuk rasio aspek 2:1 Twitter (1200x675px) dan perilaku rendering unik, memastikan konten Anda menonjol di linimasa.
- **Enam Pendekatan Generasi & 16 Gaya Visual**: Manfaatkan enam metode generasi berbeda, termasuk generasi gambar AI dan alur kerja sadar konten, di 16 gaya visual untuk membuat gambar Twitter Card yang beragam dan menarik.
- **Adaptasi Mode Gelap & Potongan Seluler**: Desain gambar yang berkinerja baik di mode gelap Twitter dan bertahan dari pemotongan linimasa seluler, menempatkan konten penting di zona aman untuk visibilitas maksimum.
- **Generasi Poster Kartu Pemutar**: Buat gambar poster yang menarik untuk Kartu Pemutar Twitter, lengkap dengan hamparan tombol putar dan judul video, untuk memikat pengguna untuk terlibat dengan konten multimedia Anda.
- **Pemeriksaan Validasi Komprehensif**: Manfaatkan pemeriksaan YAML bawaan yang memvalidasi dimensi gambar, jenis kartu, format URL, dan pertimbangan desain seperti zona aman linimasa dan kompatibilitas mode gelap.

## Use cases

- **Hasilkan Gambar Twitter Card untuk Postingan Blog**: Secara otomatis buat gambar Twitter Card 1200x675px yang menarik secara visual untuk postingan blog baru, memastikan gambar terlihat profesional dan menarik saat dibagikan di X.
- **Desain Poster Kartu Pemutar untuk Video**: Hasilkan gambar poster yang dioptimalkan untuk konten video Anda yang dibagikan di Twitter, mendorong rasio klik-tayang yang lebih tinggi bahkan sebelum video diputar.
- **Pastikan Kompatibilitas Mode Gelap untuk Berbagi Sosial**: Adaptasi gambar Open Graph yang ada atau buat yang baru dengan desain ramah mode gelap, menjamin gambar Twitter Card Anda terlihat bagus untuk semua pengguna, terlepas dari pengaturan tampilan mereka.

## Result preview

Jelajahi gambar Kartu Twitter berkinerja tinggi yang didukung oleh Keterampilan ini.

![A dark-themed Twitter Card preview for FlowMind AI featuring the headline 'The Future of AI Agents' in large white and indigo typography. The design uses a futuristic navy-blue gradient background with subtle grid lines and connected-node graphics representing AI networks. A 'Read More' button appears below the headline alongside an estimated reading time, creating a clean, modern SaaS-style layout optimized for social media engagement.](https://file.nanoskill.ai/Twitter-card-outcome-1.png)

![A brand style guide page showcasing the FlowMind AI color palette and visual language. Large color swatches display indigo, cyan, emerald green, deep black, dark surface blue, and semi-transparent gray text colors, each labeled with HEX values and usage descriptions. Below, a section outlines design principles focused on dark-mode optimization, color hierarchy, typography consistency, and visual balance for Twitter-native experiences.](https://file.nanoskill.ai/Twitter-card-outcome-3.png)

![A strategic design briefing page divided into four dark-themed cards titled Objective, Target Audience, Visual Identity, and Format. The page summarizes campaign goals, audience segments including tech professionals and startup founders, brand colors and style direction, and technical specifications such as Twitter’s 1200×675 pixel format, mobile-safe composition, and dark-mode compatibility.](https://file.nanoskill.ai/Twitter-card-outcome-5.png)

![A realistic Twitter feed mockup displaying a post from FlowMind AI about the future of AI agents. The tweet includes descriptive promotional copy and an embedded Twitter Card preview featuring a futuristic AI-themed visual. Engagement metrics such as comments, reposts, likes, and shares appear beneath the post, while a note at the bottom highlights projected improvements in click-through rate and user engagement from using optimized visual cards.](https://file.nanoskill.ai/Twitter-card-outcome-6.png)

## Result walkthrough

### Instal

Tambahkan Keterampilan Pembuat Gambar Kartu Twitter ke agen AI Anda.

![A terminal-style screenshot showing the installation of the Twitter Card Image Generator skill. The console output displays the command 'npx skills add https://github.com/kostja94/social-cards-skills', followed by interactive prompts and confirmation messages indicating successful installation, universal agent setup, and symlinking for Hermes Agent access.](https://file.nanoskill.ai/Twitter-card-install.png)

### Deskripsikan Konten

Bagikan detail konten Anda, identitas merek, dan arah visual yang disukai.

![A screenshot of a terminal or interface asking the user to provide content details for generating a Twitter Card image. The prompt requests title/topic, key message, brand/account name, visual assets (logo, color palette, style), and call-to-action, showing how the skill gathers information before designing the card.](https://file.nanoskill.ai/describe-content.png)

### Hasilkan Hasil

Buat gambar Kartu Twitter yang dioptimalkan untuk platform dengan hierarki visual yang kuat dan peningkatan desain yang berfokus pada keterlibatan.

![A screenshot of a terminal or interface showing the generation step for the Twitter Card image. It highlights the user confirming inputs and the system preparing the final platform-optimized image, ready for export as a high-resolution, social-media-ready graphic. The screen emphasizes that the card will follow 1200×675px format, mobile-safe layout, dark-mode compatibility, and engagement-focused design principles.](https://file.nanoskill.ai/Generation.png)

## Skill definition

# 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](https://oginify.com) 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

| Properti | Spesifikasi |
|----------|--------------|
| **Rasio aspek** | 2:1 (resmi); Twitter dalam praktiknya merender sekitar ~1,91:1 |
| **Direkomendasikan** | 1200x675px (2:1); 1200x628px (lintas platform dengan OG) |
| **Minimum** | 300x157px |
| **Maksimum** | 4096x4096px |
| **Ukuran file** | Di bawah 5MB |
| **Format** | JPG, PNG, WebP, GIF (hanya frame pertama); SVG tidak didukung |

**Jenis kartu menentukan tampilan gambar:**

| Jenis kartu | Perilaku gambar |
|-----------|---------------|
| `summary_large_image` | Gambar menonjol lebar penuh (direkomendasikan untuk sebagian besar halaman) |
| `summary` | Thumbnail kecil (persegi 100x100px) |
| `player` | Sematan video/audio; gambar adalah bingkai poster sebelum diputar |
| `app` | Ikon aplikasi; gambar adalah ikon aplikasi + gambar promosi |

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.

```tsx
// 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:**

```tsx
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](../og-image-generator/references/content-strategy.md) dan [pipeline-guide.md](../og-image-generator/references/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):**

| Template OG | Adaptasi Twitter |
|-------------|-------------------|
| Terminal/CLI | Pindahkan chrome jendela lebih rendah (sudut melengkung Twitter memotong titik-titik kiri atas); gunakan warna aksen untuk kontras mode gelap |
| Editorial Majalah | Gunakan preset Midnight Ink (varian gelap yang dirancang untuk X); pindahkan sumur foto lebih tinggi (50% atas alih-alih lebih rendah) |
| Minimal Swiss | Tambahkan varian mode gelap: latar belakang `#0a0a0a` dengan aksen utuh, teks putih; baris data bertahan dengan baik pada potongan 1:1 |
| Pixel Retro | Latar belakang gelap alami — preset NES/Arcade/CGA sudah siap untuk X; kecilkan elemen HUD 10% untuk melewati masker tepi |
| Brutalis | Varian latar belakang hitam sudah asli mode gelap; blok judul asimetris tetap di zona 60% atas secara default |
| Koran | Tambahkan varian gelap latar belakang `#1a1a1a`; tata letak multi-bagian harus menumpuk secara vertikal untuk zona pemotongan persegi |

## 5. Poster Kartu Pemain

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

```html
<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](../og-image-generator/references/style-system-v3.md). Semua template berfungsi untuk Twitter — cukup ubah tinggi kanvas menjadi 675px.

| # | Gaya | Mode Gelap | Potensi KTR X | Template |
|---|-------|-----------|----------------|----------|
| 1 | Terminal / CLI | Selalu gelap | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) |
| 2 | Editorial Majalah | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) |
| 3 | Minimal Swiss | Butuh varian | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) |
| 4 | Pixel Retro | Semua gelap | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) |
| 5 | Brutalis | Latar belakang hitam | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | Koran | Butuh varian | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) |
| 7 | Neo-Brutalisme | Ya | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) |
| 8 | Bento Grid | Basis gelap | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) |
| 9 | Gradien Neo-Swiss | Terang | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) |
| 10 | Gradien+Tekstur Gelap | Selalu gelap | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | Overlay Teks | Bergantung pada bg | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | Sinematik | Ramah gelap | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) |
| 13 | Kolase | Bervariasi | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) |
| 14 | Risograf | Basis kertas | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) |
| 15 | Vaporwave | Neon gelap | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) |
| 16 | Grunge | Gelap pudar | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |

**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](../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

```yaml
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

## FAQ

### Apa itu generator gambar Twitter Card?

Generator gambar Twitter Card adalah alat atau keterampilan yang membuat gambar yang dioptimalkan khusus untuk pratinjau tautan X (Twitter). Gambar-gambar ini mematuhi rasio aspek unik Twitter (2:1, 1200x675px) dan pertimbangan desain, memastikan gambar ditampilkan dengan benar dan menarik saat tautan dibagikan di platform.

### Bagaimana generator ini berbeda dari generator gambar Open Graph (OG) generik?

Meskipun berbagi infrastruktur dengan generator gambar OG, keterampilan ini secara khusus menyesuaikan dimensi keluaran ke rasio aspek 1200x675px (2:1) Twitter, menggabungkan adaptasi desain khusus X, mempertimbangkan zona aman linimasa, dan mendukung persyaratan kartu pemutar. Gambar OG generik biasanya 1200x630px (1,91:1).

### Apa dimensi yang direkomendasikan untuk gambar Twitter Card?

Dimensi yang direkomendasikan untuk gambar Twitter Card adalah 1200x675 piksel, yang memberikan rasio aspek 2:1. Ini memastikan gambar mengisi kartu secara efektif dan menghindari letterboxing.

### Bisakah saya menggunakan gambar SVG untuk Twitter Cards?

Tidak, Twitter tidak mendukung SVG untuk gambar kartu. Anda harus menggunakan format PNG, JPG, atau WebP. Jika Anda menggunakan GIF, hanya bingkai pertama yang akan ditampilkan.

### Bagaimana generator ini menangani mode gelap untuk gambar Twitter Card?

Generator mempertimbangkan penggunaan mode gelap Twitter dengan lebih memilih gaya latar belakang gelap atau menyediakan varian mode gelap untuk templat. Ini memastikan gambar menyatu secara alami ke linimasa mode gelap dan mempertahankan daya tarik visual untuk sekitar 40% pengguna Twitter.

### Apa itu 'zona aman linimasa' dan mengapa penting untuk gambar Twitter Card?

'Zona aman linimasa' mengacu pada 60% bagian atas gambar di mana konten penting (judul, visual utama) harus ditempatkan. Ini penting karena Twitter memotong gambar menjadi sekitar 1:1 di linimasa seluler hingga twit diperluas, artinya konten di 20% bagian bawah mungkin terpotong.