# Twitter Kartı Görsel Oluşturucu Ajan Becerisi > Doğru 2:1 en boy oranı ve platforma özgü kısıtlamalarla optimize edilmiş Twitter Kartı (X) bağlantı önizleme görselleri oluşturun. Bu beceri, tweet önizlemelerinizin mükemmel görünmesini sağlayarak hedef kitlenizin dikkatini çekmenize ve etkileşimi artırmanıza yardımcı olur. - Canonical: https://nanoskill.ai/tr/skills/twitter-card-image-generator - Markdown: https://nanoskill.ai/tr/skills/twitter-card-image-generator.md - Author: kostja94 - Published: 2026-06-09T06:00:00.000Z - Updated: 2026-07-25T04:19:51.168Z - Language: tr - 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 Bu Twitter Kartı görsel oluşturucu becerisi, kullanıcıların X (Twitter) bağlantı önizlemeleri için mükemmel şekilde optimize edilmiş görseller oluşturmasını sağlayarak içeriklerinin zaman akışında güçlü bir görsel etki yaratmasına olanak tanır. Genel Açık Grafik görsellerinden farklı olarak, bu araç özellikle Twitter'ın benzersiz 2:1 en boy oranına (1200x675 piksel) ve platforma özgü oluşturma tuhaflıklarına uyum sağlayarak içerik oluşturucuların, pazarlamacıların ve geliştiricilerin sosyal medya varlıklarını güçlendirmelerine ve etkileşimi artırmalarına yardımcı olur. Altı farklı oluşturma yaklaşımı ve 16 çok yönlü görsel stil ile bu beceri, görsel oluşturma için kapsamlı seçenekler sunar. Arka planlar için yapay zeka görsel oluşturma, içeriğe duyarlı iş akışları ve Satori/resvg ardışık düzen entegrasyonu gibi gelişmiş özellikleri bünyesinde barındırır. Karanlık mod uyumluluğu, mobil zaman akışı kırpma ve kenar maskeleme gibi temel tasarım hususları yerleşik olarak bulunur ve görsellerin görsel olarak çekici olmasını ve tüm kullanıcı deneyimlerinde işlevsel olmasını sağlar. Standart bağlantı önizlemelerinin ötesinde, oluşturucu aynı zamanda video ve ses içeriği için ideal olan Twitter Oynatıcı Kartları için etkileyici poster görselleri oluşturmayı da destekler. Entegre YAML kontrolleri ve yaygın hatalarla ilgili rehberlik sayesinde kullanıcılar, teknik özellikleri karşılayan ve tıklama oranlarını en üst düzeye çıkaran yüksek kaliteli Twitter Kartı görsellerini güvenle üretebilir, böylece paylaşılan bağlantılar daha etkili ve profesyonel hale gelir. ## Key features - **X (Twitter) Bağlantı Önizlemeleri için Optimize Edilmiştir**: İçeriğinizin zaman akışında öne çıkmasını sağlamak için Twitter'ın 2:1 en boy oranı (1200x675px) ve benzersiz oluşturma davranışları için özel olarak tasarlanmış görüntüler oluşturun. - **Altı Üretim Yaklaşımı ve 16 Görsel Stil**: Çeşitli ve ilgi çekici Twitter Kartı görüntüleri oluşturmak için AI görüntü üretimi ve içeriğe duyarlı iş akışları dahil olmak üzere altı farklı üretim yöntemini 16 görsel stil üzerinde kullanın. - **Karanlık Mod ve Mobil Kırpma Uyarlamaları**: Twitter'ın karanlık modunda iyi performans gösteren ve mobil zaman akışı kırpmasına dayanıklı, maksimum görünürlük için kritik içeriği güvenli bölgelere yerleştiren görüntüler tasarlayın. - **Oynatıcı Kartı Afişi Oluşturma**: Kullanıcıları multimedya içeriğinizle etkileşime geçmeye teşvik etmek için oynat düğmesi kaplamaları ve video başlıklarıyla birlikte Twitter Oynatıcı Kartları için ilgi çekici afiş görüntüleri oluşturun. - **Kapsamlı Doğrulama Kontrolleri**: Zaman akışı-güvenli bölgeler ve karanlık mod uyumluluğu gibi tasarım hususlarının yanı sıra görüntü boyutlarını, kart türünü ve URL biçimini doğrulayan yerleşik YAML kontrollerinden yararlanın. ## Use cases - **Blog Yazıları için Twitter Kartı Görüntüleri Oluşturun**: X'te paylaşıldığında profesyonel ve ilgi çekici görünmelerini sağlamak için yeni blog yazıları için otomatik olarak görsel olarak çekici 1200x675px Twitter Kartı görüntüleri oluşturun. - **Videolar için Oynatıcı Kartı Afişleri Tasarlayın**: Twitter'da paylaşılan video içeriğiniz için optimize edilmiş afiş görüntüleri üreterek, video oynatılmadan önce daha yüksek tıklama oranları elde edin. - **Sosyal Paylaşımlar için Karanlık Mod Uyumluluğunu Sağlayın**: Mevcut Open Graph görüntülerini uyarlayın veya karanlık mod dostu tasarımlarla yenilerini oluşturun, böylece Twitter Kartı görüntülerinizin tüm kullanıcılar için ekran ayarlarından bağımsız olarak harika görünmesini garanti edin. ## Result preview Bu Beceri tarafından desteklenen yüksek performanslı bir Twitter Kartı görselini keşfedin. ![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 ### Yükle Twitter Kartı Görsel Oluşturucu Becerisini yapay zeka ajanınıza ekleyin. ![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) ### İçeriği Tanımla İçerik ayrıntılarınızı, marka kimliğinizi ve tercih ettiğiniz görsel yönü paylaşın. ![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) ### Sonucu Oluştur Güçlü görsel hiyerarşi ve etkileşim odaklı tasarım iyileştirmeleri ile platform için optimize edilmiş bir Twitter Kartı görseli oluşturun. ![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 # 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](https://oginify.com) 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ı | Özellik | Spesifikasyon | |----------|--------------| | **En boy oranı** | 2:1 (resmi); Twitter pratikte ~1.91:1'de işler | | **Önerilen** | 1200x675px (2:1); 1200x628px (OG ile çapraz platform) | | **Minimum** | 300x157px | | **Maksimum** | 4096x4096px | | **Dosya boyutu** | 5MB altında | | **Formatlar** | JPG, PNG, WebP, GIF (yalnızca ilk kare); SVG desteklenmez | **Kart türü görüntü görünümünü belirler:** | Kart türü | Görüntü davranışı | |-----------|-----------------| | `summary_large_image` | Tam genişlikte belirgin görüntü (çoğu sayfa için önerilir) | | `summary` | Küçük küçük resim (100x100px kare) | | `player` | Video/ses gömmesi; görüntü, oynatmadan önceki poster çerçevesidir | | `app` | Uygulama simgesi; görüntü, uygulama simgesi + tanıtım görüntüsüdür | Ç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. ```tsx // 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( , { width, height }, ); } ``` **Ardından sayfa meta verilerinde:** ```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'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](../og-image-generator/references/content-strategy.md) ve [pipeline-guide.md](../og-image-generator/references/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):** | OG şablonu | Twitter uyarlaması | |-------------|-------------------| | Terminal/CLI | Pencere çerçevesini aşağı taşıyın (Twitter'ın yuvarlatılmış köşeleri sol üst noktaları kırpar); karanlık mod kontrastı için vurgu rengini kullanın | | Magazine Editorial | Midnight Ink ön ayarını kullanın (X için tasarlanmış koyu varyant); fotoğraf alanını daha yukarı taşıyın (alt yerine üst %50) | | Swiss Minimal | Karanlık mod varyantı ekleyin: vurgunun bozulmadığı `#0a0a0a` arka plan, beyaz metin; veri satırları 1:1 kırpmada iyi hayatta kalır | | Pixel Retro | Doğal olarak koyu arka planlar — NES/Arcade/CGA ön ayarları zaten X için hazırdır; kenar maskesini temizlemek için HUD öğelerini %10 küçültün | | Brutalist | Siyah arka plan varyantı zaten karanlık moda doğaldır; asimetrik başlık bloğu varsayılan olarak üst %60 bölgesinde kalır | | Newspaper | `#1a1a1a` arka plan koyu varyantı ekleyin; çok bölümlü düzen kare kırpma bölgesi için dikey olarak istiflenmelidir | ## 5. Oynatıcı Kart Posterleri Video/ses içeriği için `player` kart türü bir poster görüntüsü gerektirir: ```html ``` 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](../og-image-generator/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. | # | Stil | Karanlık Mod | X TO Potansiyeli | Şablon | |---|-------|-----------|----------------|----------| | 1 | Terminal / CLI | Her zaman koyu | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) | | 2 | Magazine Editorial | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) | | 3 | Swiss Minimal | Varyant gerektirir | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) | | 4 | Pixel Retro | Tümü koyu | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) | | 5 | Brutalist | Siyah arka plan | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) | | 6 | Newspaper | Varyant gerektirir | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) | | 7 | Neo-Brutalism | Evet | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) | | 8 | Bento Grid | Koyu taban | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) | | 9 | Neo-Swiss Gradient | Açık | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) | | 10 | Dark Gradient+Texture | Her zaman koyu | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) | | 11 | Text Overlay | Arka plana bağlı | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) | | 12 | Cinematic | Karanlık moda uygun | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) | | 13 | Collage | Değişir | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) | | 14 | Risograph | Kağıt tabanı | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) | | 15 | Vaporwave | Koyu neon | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) | | 16 | Grunge | Soluk koyu | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) | **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](../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 ```yaml 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ü ## FAQ ### Twitter Kartı görüntü oluşturucu nedir? Bir Twitter Kartı görüntü oluşturucu, X (Twitter) bağlantı önizlemeleri için özel olarak optimize edilmiş görüntüler oluşturan bir araç veya beceridir. Bu görüntüler, Twitter'ın benzersiz en boy oranına (2:1, 1200x675px) ve tasarım hususlarına uyarak, bir bağlantı platformda paylaşıldığında doğru ve çekici bir şekilde görüntülenmelerini sağlar. ### Bu oluşturucu, genel bir Open Graph (OG) görüntü oluşturucudan nasıl farklıdır? OG görüntü oluşturucularla altyapıyı paylaşsa da, bu beceri çıktı boyutlarını özellikle Twitter'ın 1200x675px (2:1) en boy oranına uyarlar, X'e özgü tasarım uyarlamalarını içerir, zaman akışı-güvenli bölgelemeyi dikkate alır ve oynatıcı kartı gereksinimlerini destekler. Genel OG görüntüleri genellikle 1200x630px (1.91:1) boyutundadır. ### Bir Twitter Kartı görüntüsü için önerilen boyutlar nelerdir? Bir Twitter Kartı görüntüsü için önerilen boyutlar 1200x675 pikseldir ve bu 2:1 en boy oranı sağlar. Bu, görüntünün kartı etkili bir şekilde doldurmasını ve siyah bant oluşmasını önler. ### Twitter Kartları için SVG görüntüleri kullanabilir miyim? Hayır, Twitter kart görüntüleri için SVG'yi desteklemez. PNG, JPG veya WebP formatlarını kullanmalısınız. GIF kullanırsanız, yalnızca ilk kare görüntülenir. ### Bu oluşturucu, Twitter Kartı görüntüleri için karanlık modu nasıl ele alır? Oluşturucu, şablonlar için koyu arka plan stillerini tercih ederek veya karanlık mod varyantları sunarak Twitter'ın karanlık mod kullanımını dikkate alır. Bu, görüntülerin karanlık mod zaman akışına doğal bir şekilde uyum sağlamasını ve Twitter kullanıcılarının yaklaşık %40'ı için görsel çekiciliği korumasını sağlar. ### 'Zaman akışı-güvenli bölge' nedir ve Twitter Kartı görüntüleri için neden önemlidir? 'Zaman akışı-güvenli bölge', kritik içeriğin (başlık, ana görsel) yerleştirilmesi gereken görüntünün üst %60'ını ifade eder. Bu, Twitter'ın mobil zaman akışlarında tweet genişletilene kadar görüntüleri yaklaşık 1:1 oranında kırpması nedeniyle hayati önem taşır, bu da alt %20'deki içeriğin kesilebileceği anlamına gelir.