Twitter Kartı Görsel Oluşturucu Ajan Becerisi

Twitter Kartı Görüntü Oluşturucu

X (Twitter) bağlantı önizlemeleri için optimize edilmiş görüntüler oluşturun — birisi bir bağlantı paylaştığında zaman akışında görünen kartlar. Twitter Kartları, standart Open Graph'ten farklı olan belirgin görüntü boyutlarına ve işleme davranışına sahiptir. Bu beceri, Twitter'ın 2:1 en boy oranına ve platforma özgü tuhaflıklara uyarlanmış eksiksiz oluşturma hattını kapsar.

Burada og-image-generator'daki altı oluşturma yaklaşımının ve altı görsel stilinin tümü geçerlidir. Tek farklar şunlardır: çıktı boyutları (1200x630 yerine 1200x675), X'e özgü tasarım uyarlamaları, zaman akışına uygun bölgeleme ve oynatıcı kartı desteği.

Ne Zaman Kullanılır

• Kullanıcı, X/Twitter bağlantı önizlemeleri, summary_large_image veya oynatıcı kart posterleri için 1200×675px (2:1) görüntülere ihtiyaç duyar
• Kullanıcı twitter:image, Twitter Kartı, X önizleme görüntüsü, tweet önizlemesi veya zaman akışı kartı tasarımından bahseder
• Kullanıcı karanlık moda uygun düzenlere, üst %60 içerik bölgesine veya X'in yuvarlatılmış köşe kırpması için 20px kenar maskelerine ihtiyaç duyar
• Kullanıcı zaten og-image-generator kullanıyordur ve aynı stillerin ve hattın Twitter'a uyarlanmış varyantını ister

NE ZAMAN KULLANILMAZ

• Facebook, LinkedIn, Slack vb. için Genel OG görüntüleri (1200×630, 1.91:1) — bunun yerine og-image-generator kullanın
• Yalnızca HTML meta etiketleri ayarlamak (görüntü dosyası oluşturmamak) — bunun yerine twitter-cards pazarlama becerilerini kullanın
• SVG çıktısı — Twitter kart görüntüleri için SVG'yi desteklemez; PNG veya JPG kullanın
• Kodsuz görsel düzenleyici veya barındırılan API — bir aracı hattı çalıştırmak yerine Oginify kullanın

Çağrıldığında: İlk kullanımda, bu becerinin neleri kapsadığı ve neden önemli olduğu hakkında 1-2 cümle ile açın, ardından ana çıktıyı verin. Sonraki kullanımda veya kullanıcı atlamayı istediğinde, doğrudan ana çıktıya geçin.

1. Twitter Görüntüleri Nasıl Tüketir

Twitter görüntüleri şu öncelik sırasına göre okur:

1. twitter:image — açıkça ayarlanmışsa, doğrudan kullanılır
2. og:image — hiçbir Twitter Kartı etiketi yoksa OG görüntüsüne düşer
3. Görüntü yok — düz metin bağlantı önizlemesi

Kilit içgörü: Facebook ve LinkedIn twitter:image'i OKUMAZ. Twitter Kartı etiketlerini okuyan tek platform Twitter'dır. Bu, gerçek oluşturma hattı paylaşılabilse de meta verilerinizde HER İKİ görüntü yoluna ihtiyacınız olduğu anlamına gelir.

2. Twitter Görüntü Spesifikasyonları

Kart türü görüntü görünümünü belirler:

Çoğu kullanım durumu için, 1200x675px'te summary_large_image hedefleyin.

3. Altı Oluşturma Yaklaşımı (Twitter'a uyarlanmış)

og-image-generator §1'deki altı yaklaşımın tümü Twitter görüntüleri için çalışır. Tek fark çıktı boyutlarıdır. Bu bölüm Twitter'a özgü uyarlamaları kapsar — tam oluşturma hattı belgeleri için og-image-generator §1'e bakın.

3.1 Yapay Zeka Görüntü Oluşturma (Çekirdek #1)

OG ile aynı üç parçalı istem stratejisi, ancak Twitter'a özgü çerçeveleme ile:

Bölüm 1 — Görsel açıklama: arka plan, kompozisyon, ruh hali
Bölüm 2 — Metin spesifikasyonu: TAM metin, tırnak içinde, boyut ipuçlarıyla
Bölüm 3 — Twitter kısıtlamaları: "1200x675px, 2:1 en boy oranı, anahtar metin
         üst %60'ta, karanlık mod için koyu arka plan tercih edilir"

Hibrit yaklaşım (önerilir): Yapay zeka arka planı/atmosferi oluşturur; Satori metni üst üste bindirir. Yapay zeka modellerinin hala zorlandığı Çince metin için kritiktir — ve Twitter'ın ~%40 karanlık mod kullanımı metin doğruluğunu daha da görünür kılar.

Tam yapay zeka araçları karşılaştırma tablosu (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney) için og-image-generator §1.1'e bakın.

3.2 Aracı-Yerel İçerik-Farkında İş Akışı (Çekirdek #2)

OG (§1.2) ile aynı 6 adımlı iş akışı: İçeriği Oku → Stili Eşleştir → Görsel Öğeleri Çıkar → Oluşturmayı Seç → Oluştur → Doğrula. Her adımda Twitter'a özgü eklemeler:

Adım 2 (Stili Eşleştir) — Twitter karanlık mod değerlendirmesi: koyu arka planlı stilleri (Terminal/CLI, Midnight Ink Magazine, Brutalist karanlık mod) veya X için koyu varyantları olan stilleri tercih edin.

Adım 3 (Görsel Öğeleri Çıkar) — Twitter'ın mobilde ~1:1'e kırpması, en önemli görsel öğenin bir kare içinde çalışması gerektiği anlamına gelir. 1200x675'te iyi görünen yatay bir veri şeridi, kare kırpmada görünmez olabilir. En azından 1:1'de iyi okunan bir öğe çıkarın.

Adım 4 (Oluşturmayı Seç) — Aynı karar ağacı. Yapay zeka oluşturma için şunu ekleyin: "Metin Twitter'ın ~260px mobil işleme genişliğinde hayatta kalacak mı?"

Adım 6 (Doğrula) — Hem OG kontrollerini hem de Twitter'a özgü kontrolleri çalıştırın (§8).

3.3 Satori + resvg (Kod tabanlı)

OG ile aynı hat. Yüksekliği 630'dan 675'e değiştirin. Tam uygulama için og-image-generator §1.3'e bakın.

// Paylaşılan uç nokta hem OG hem Twitter'a hizmet eder:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Varsayılan';
  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 },
  );
}

Ardından sayfa meta verilerinde:

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'a özgü 1200x675
  },
};

3.4 Puppeteer, Yönetilen Hizmetler, JSON Yapılandırması

OG ile aynı — görünüm alanı/yüksekliği 675 olarak ayarlayın. og-image-generator §1.4–1.6'ya bakın. V3 sayfa öncelik sistemi (S/A/B/C) ve hat seçimi için content-strategy.md ve pipeline-guide.md dosyalarına bakın.

4. X'e Özgü Tasarım Hususları

Twitter, görüntüleri Facebook/LinkedIn'den farklı işler. Bunları göz önünde bulundurarak tasarlayın:

Karanlık mod (~%40 kullanıcı): Görüntüler akışta tweetlerle çevrili olarak satır içi görünür. Koyu arka planlar doğal olarak uyum sağlar; açık arka planlar öne çıkar ancak karanlık modda rahatsız edici görünebilir. Her şablon bir koyu varyanta veya karanlık moda uygun bir varsayılana sahip olmalıdır. 6 stil arasından Terminal/CLI, Midnight Ink Magazine ve Brutalist (siyah arka plan) doğal olarak karanlık moda uygundur. Swiss Minimal ve Newspaper, bir karanlık mod alternatifi ile birlikte sunulmalıdır.

Zaman akışı kırpması (mobil): Mobilde, summary_large_image görüntüleri, tweet genişletilene kadar zaman akışında ~1:1'e kırpılır. Tam 2:1 görüntü yalnızca dokunulduğunda görünür. En önemli içeriği (başlık, birincil görsel) görüntünün üst %60'ına yerleştirin — kırpmadan kurtulan merkez kare. Kritik metni asla alt %20'ye koymayın.

Küçük boyutlarda metin okunabilirliği: Zaman akışı görüntüleri mobil akışlarda yaklaşık 260px genişliğinde görüntülenir. Metnin okunabilir kalmasını sağlamak için şablonunuzu 1/4 ölçekte (~300px genişlik) test edin. Bu, OG'nin ~500px masaüstü akış boyutundan daha katıdır.

Kenar maskesi: Twitter, kart görüntülerine hafif yuvarlatılmış köşe maskesi uygular. Logolar ve kritik öğeler herhangi bir kenardan 20px'den daha yakınsa kısmen kırpılma riski taşır.

Twitter için önerilen şablon uyarlamaları (stile göre):

5. Oynatıcı Kart Posterleri

Video/ses içeriği için player kart türü bir poster görüntüsü gerektirir:

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

Poster görüntüsü, kullanıcı oynata dokunmadan önce gösterilir. İlgi çekici bir küçük resim olarak tasarlayın — ortalanmış bir daire içinde üçgen olan bir oynat düğmesi kaplaması, video başlığı ve içerikten bir kare ekleyin. Aynı 2:1 oran önerisi geçerlidir. Oynat düğmesi merkez kare bölgesindeki en büyük öğe olmalıdır.

Yapay zeka tarafından oluşturulan posterler için: "ortalanmış oynat düğmesi olan video küçük resmi, üst üçte birlik kısımda başlık metni, koyu arka plan, 1200x675px" istemi kullanın.

6. Stil Sistemi (OG ile paylaşılır — 16 stil)

Twitter görüntüleri, og-image-generator §3 ve references/style-system-v3.md dosyasındaki aynı 16 görsel stili kullanır. Tüm şablonlar Twitter için çalışır — yalnızca tuval yüksekliğini 675px olarak değiştirin.

X'te en iyi performans gösterenler: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — yüksek kontrast + koyu arka plan X zaman akışı için idealdir. X'te kaçınılması gerekenler: karanlık varyantı olmayan aşırı kurumsal marka stilleri; karanlık mod zaman akışında saf beyaz arka planlar.

7. Yazı Tipi ve Tipografi

OG ile aynı kurallar. og-image-generator references/typography.md dosyasına bakın.

Twitter'a özgü ekleme: zaman akışı görüntüleri yaklaşık 260px genişliğinde işlendiğinden (OG'nin ~500px masaüstü akışına kıyasla), minimum yazı tipi boyutunu 4px artırın — 24px yerine minimum 28px kullanın.

8. Aracı YAML Kontrolleri

checks:
  # P0 — geçmeli
  - id: dimensions-twitter
    description: twitter:image, 1200x675px (2:1) veya 1200x628px (çapraz platform) olmalıdır
  - id: card-type-match
    description: Büyük bir görüntü kullanırken twitter:card, summary_large_image olmalıdır
  - id: absolute-url
    description: twitter:image URL'si mutlaktır (https://) ve herkese açık olarak erişilebilir
  - id: format
    description: Görüntü formatı PNG, JPG veya WebP'dir (SVG değil)

  # P1 — geçmeli
  - id: og-fallback
    description: og:image da ayarlanmıştır (twitter:image okumayan platformlar için yedek olarak)
  - id: timeline-safe-zone
    description: Kritik metin ve birincil görsel çapa üst %60'tadır; alt %20'de kritik hiçbir şey yoktur
  - id: square-crop-survival
    description: En önemli görsel öğe, 1:1 merkez kırpmada doğru şekilde okunur (mobil zaman akışı)
  - id: dark-mode
    description: Şablon, bir koyu arka plan varyantı içerir veya karanlık moda uygun bir varsayılan stil kullanır
  - id: edge-mask-clearance
    description: Logolar ve kritik öğeler tüm kenarlardan ≥20px uzaktadır (Twitter yuvarlatılmış köşe maskesi)

  # P2 — olması iyi
  - id: cross-platform-compatible
    description: Aynı görüntü 1200x628px'te hem OG hem Twitter için ayrı oluşturma olmadan çalışır
  - id: ai-text-validated
    description: Yapay zeka tarafından oluşturulduysa, tüm metin kaynağa göre doğrulanmıştır — halüsinasyonlu veya yanlış yazılmış metin yok
  - id: player-poster
    description: Oynatıcı kartı sayfalarında, oynat düğmesi olan özel bir poster görüntüsü vardır
  - id: content-aware-twitter
    description: Görüntü, yalnızca Twitter boyutlu bir şablondaki bir başlık değil, sayfaya özgü içeriği yansıtır

9. Yaygın Hatalar

1. Yanlış en boy oranı: OG'nin 1200x630'unu (1.91:1) ayarlama yapmadan kullanmak. Twitter bunu tolere etse de, 1200x675 (2:1) kartı daha iyi doldurur ve çerçeve içinde kenar boşlukları oluşmasını önler.
2. Eksik twitter:image etiketi: Yalnızca OG yedeğine güvenmek — açık twitter:image olmadan, Twitter'ın hangi görüntüyü seçeceği üzerindeki kontrolü kaybedersiniz.
3. Alt %20'de metin: Twitter mobilde görüntüleri ~1:1'e kırpar. Alttaki kritik metin zaman akışında kesilir.
4. Karanlık mod değerlendirmesi yok: Açık arka planlı görüntüler, kullanıcıların ~%40'ının etkinleştirdiği Twitter'ın karanlık mod zaman akışında sert görünür.
5. SVG kullanmak: Twitter kart görüntüleri için SVG'yi desteklemez. Her zaman PNG veya JPG çıktısı alın.
6. Statik ilk karesi olmayan GIF: Twitter yalnızca GIF'lerin ilk karesini gösterir. İlk karenin anlamlı bir hareketsiz görüntü olduğundan emin olun.
7. 260px görünümde yapay zeka metin halüsinasyonu: Tam boyutta doğru görünen yapay zeka tarafından oluşturulan metin, küçük olarak işlendiğinde bozuk karakterler gösterebilir. 1/4 ölçekte doğrulayın.
8. Kenarlara temas eden logolar: Twitter'ın yuvarlatılmış köşe maskesi kenarlardan ~10px kırpar. Logoları kenarlardan ≥20px uzakta tutun.

10. Test Etme

• Kart Doğrulayıcı: https://cards-dev.twitter.com/validator — kartın tam olarak nasıl işleneceğini gösterir. Önizlemek için herhangi bir URL'yi yapıştırın.
• Manuel test: Bir test hesabından bir bağlantı tweetleyin, ardından zaman akışı + genişletilmiş görünümleri kontrol edin.
• Karanlık mod testi: Kartı hem açık hem de karanlık mod Twitter istemcilerinde kontrol edin.
• Önbellek temizleme: Twitter kart verilerini agresif bir şekilde önbelleğe alır (7 güne kadar). Değişikliklerden sonra, yeniden kazımayı zorlamak için Kart Doğrulayıcı'yı kullanın.
• Mobil kırpma testi: Kartı 1:1 en boy oranında ekran görüntüsü alın (675x675 merkeze kırpın) ve kare kırpmanın sayfanın içeriğini hala ilettiğini doğrulayın.

11. İlgili Beceriler

Bu beceriler isteğe bağlıdır — bu beceri bağımsız olarak çalışır. Ek yeteneklere ihtiyacınız varsa bunları yükleyin:

Aynı depo (her zaman birlikte yüklenir):

• og-image-generator: OG görüntü oluşturma (1200x630, 1.91:1) — tam oluşturma hattı, 6 stilin tümü, tohum şablonlar, tipografi kılavuzu, Satori kısıtlamaları. Bu Twitter Kartı oluşturucu, tüm altyapısını yeniden kullanır.

Ayrı depolar (yüklü olabilir veya olmayabilir):

• twitter-cards (pazarlama becerileri): twitter:card, twitter:site, twitter:creator, doğrulama için HTML meta etiketi yapılandırması. Etiketin NASIL ayarlanacağını ele alır; bu beceri görüntünün NASIL OLUŞTURULACAĞINI ele alır.
• open-graph (pazarlama becerileri): og:title, og:image, og:url, platform test araçları için HTML meta etiketi yapılandırması
• social-share-generator (pazarlama becerileri): Kullanıcılar X'e bağlantı paylaştığında Twitter Kartı verilerini tüketen paylaşım düğmesi arayüzü