# Competenza agente generatore di immagini per Twitter Card > Genera immagini di anteprima dei link per Twitter Card (X) ottimizzate, con il corretto rapporto d'aspetto 2:1 e i vincoli specifici della piattaforma. Questa competenza garantisce che le anteprime dei tuoi tweet appaiano perfette, aiutandoti a catturare l'attenzione del pubblico e ad aumentare il coinvolgimento. - Canonical: https://nanoskill.ai/it/skills/twitter-card-image-generator - Markdown: https://nanoskill.ai/it/skills/twitter-card-image-generator.md - Author: kostja94 - Published: 2026-06-09T06:00:00.000Z - Updated: 2026-07-25T04:19:51.168Z - Language: it - 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 Questa competenza di generazione di immagini per Twitter Card consente agli utenti di creare immagini perfettamente ottimizzate per le anteprime dei link su X (Twitter), garantendo che i loro contenuti abbiano un forte impatto visivo nella timeline. A differenza delle immagini Open Graph generiche, questo strumento si adatta specificamente al rapporto d'aspetto 2:1 unico di Twitter (1200x675 px) e alle peculiarità di rendering della piattaforma, aiutando creatori di contenuti, marketer e sviluppatori a migliorare la loro presenza sui social media e a stimolare il coinvolgimento. Sfruttando sei approcci di generazione distinti e 16 stili visivi versatili, questa competenza offre opzioni complete per la creazione di immagini. Incorpora funzionalità avanzate come la generazione di immagini tramite IA per gli sfondi, flussi di lavoro consapevoli del contenuto e l'integrazione con la pipeline Satori/resvg. Considerazioni di progettazione chiave come la compatibilità con la modalità scura, il ritaglio per la timeline mobile e il mascheramento dei bordi sono incorporati, garantendo che le immagini siano visivamente accattivanti e funzionali in tutte le esperienze utente. Oltre alle anteprime standard dei link, il generatore supporta anche la creazione di immagini poster accattivanti per le Twitter Player Card, ideali per contenuti video e audio. Con controlli YAML integrati e indicazioni sugli errori comuni, gli utenti possono produrre con sicurezza immagini per Twitter Card di alta qualità che soddisfano le specifiche tecniche e massimizzano i tassi di clic, rendendo i link condivisi più efficaci e professionali. ## Key features - **Ottimizzato per le anteprime dei link di X (Twitter)**: Genera immagini progettate specificamente per il rapporto d'aspetto 2:1 (1200x675px) di Twitter e per i suoi comportamenti di rendering unici, garantendo che i tuoi contenuti risaltino nella timeline. - **Sei approcci di generazione e 16 stili visivi**: Utilizza sei metodi di generazione distinti, tra cui la generazione di immagini AI e flussi di lavoro sensibili al contenuto, in 16 stili visivi per creare immagini Twitter Card varie e coinvolgenti. - **Adattamenti per la modalità scura e il ritaglio mobile**: Progetta immagini che funzionino bene nella modalità scura di Twitter e resistano al ritaglio della timeline mobile, posizionando i contenuti critici in zone sicure per la massima visibilità. - **Generazione di poster per Player Card**: Crea immagini poster accattivanti per le Twitter Player Card, complete di sovrapposizioni del pulsante di riproduzione e titoli dei video, per invogliare gli utenti a interagire con i tuoi contenuti multimediali. - **Controlli di validazione completi**: Approfitta dei controlli YAML integrati che convalidano le dimensioni dell'immagine, il tipo di card, il formato dell'URL e le considerazioni di design come le zone sicure della timeline e la compatibilità con la modalità scura. ## Use cases - **Genera immagini Twitter Card per post di blog**: Crea automaticamente immagini Twitter Card 1200x675px visivamente accattivanti per nuovi post di blog, garantendo che appaiano professionali e coinvolgenti quando condivisi su X. - **Progetta poster per Player Card per video**: Produci immagini poster ottimizzate per i tuoi contenuti video condivisi su Twitter, incoraggiando percentuali di clic più elevate prima ancora che il video venga riprodotto. - **Garantisci la compatibilità con la modalità scura per le condivisioni social**: Adatta le immagini Open Graph esistenti o generane di nuove con design adatti alla modalità scura, garantendo che le tue immagini Twitter Card appaiano perfette per tutti gli utenti, indipendentemente dalle loro impostazioni di visualizzazione. ## Result preview Esplora un'immagine per Twitter Card ad alte prestazioni generata da questa Competenza. ![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 ### Installa Aggiungi la Competenza generatrice di immagini per Twitter Card al tuo agente AI. ![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) ### Descrivi i contenuti Condividi i dettagli dei tuoi contenuti, l'identità del marchio e la direzione visiva preferita. ![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) ### Genera risultato Crea un'immagine per Twitter Card ottimizzata per la piattaforma, con una forte gerarchia visiva e miglioramenti del design incentrati sul coinvolgimento. ![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 # Generatore di immagini per Twitter Card Genera immagini ottimizzate per le anteprime dei link su X (Twitter) — le card che appaiono nella timeline quando qualcuno condivide un link. Le Twitter Card hanno dimensioni e comportamenti di rendering distinti rispetto all'Open Graph standard. Questa competenza copre l'intera pipeline di generazione adattata per le proporzioni 2:1 di Twitter e le sue peculiarità specifiche di piattaforma. Tutti i sei approcci di generazione e tutti i sei stili visivi di **generatore-immagini-og** si applicano qui. Le uniche differenze sono: dimensioni di output (1200x675 invece di 1200x630), adattamenti di design specifici per X, zone sicure per la timeline e supporto per player card. ## Quando usarla - L'utente necessita di immagini **1200×675px (2:1)** per anteprime di link X/Twitter, `summary_large_image` o poster di player card - L'utente menziona `twitter:image`, Twitter Card, immagine anteprima X, anteprima tweet o design card timeline - L'utente necessita di layout adatti alla modalità scura, zone di contenuto nel 60% superiore, o maschere di 20px ai bordi per il ritaglio ad angoli arrotondati di X - L'utente già utilizza **generatore-immagini-og** e desidera la variante adattata per Twitter degli stessi stili e pipeline ## Quando NON usarla - **Immagini OG generiche (1200×630, 1.91:1)** per Facebook, LinkedIn, Slack, ecc. — usa invece **generatore-immagini-og** - **Solo impostazione dei meta tag HTML** (non la creazione del file immagine) — usa **twitter-cards** da marketing-skills - **Output SVG** — Twitter non supporta SVG per le immagini delle card; usa PNG o JPG - **Editor visivo no-code o API ospitata** — usa [Oginify](https://oginify.com) invece di eseguire una pipeline agente **All'invocazione**: Al **primo utilizzo**, apri con 1-2 frasi su cosa copre questa competenza e perché è importante, poi fornisci l'output principale. Ad **utilizzi successivi** o quando l'utente chiede di saltare, vai direttamente all'output principale. ## 1. Come Twitter consuma le immagini Twitter legge le immagini in questo ordine di priorità: 1. `twitter:image` — se impostata esplicitamente, usata direttamente 2. `og:image` — ricade sull'immagine OG se non esistono tag Twitter Card 3. Nessuna immagine — anteprima link in testo semplice **Intuizione chiave**: Facebook e LinkedIn NON leggono `twitter:image`. Twitter è l'unica piattaforma che legge i tag Twitter Card. Ciò significa che hai bisogno di ENTRAMBI i percorsi immagine nei tuoi metadati, anche se la pipeline di rendering effettiva può essere condivisa. ## 2. Specifiche delle immagini per Twitter | Proprietà | Specifica | |----------|--------------| | **Proporzioni** | 2:1 (ufficiale); Twitter rende a ~1.91:1 in pratica | | **Consigliato** | 1200x675px (2:1); 1200x628px (multipiattaforma con OG) | | **Minimo** | 300x157px | | **Massimo** | 4096x4096px | | **Dimensione file** | Sotto 5MB | | **Formati** | JPG, PNG, WebP, GIF (solo primo frame); SVG non supportato | **Il tipo di card determina la visualizzazione dell'immagine:** | Tipo di card | Comportamento immagine | |-----------|---------------| | `summary_large_image` | Immagine prominente a tutta larghezza (consigliata per la maggior parte delle pagine) | | `summary` | Miniatura piccola (100x100px quadrata) | | `player` | Embed video/audio; l'immagine è il frame poster prima della riproduzione | | `app` | Icona app; l'immagine è l'icona dell'app + immagine promozionale | Per la maggior parte dei casi d'uso, mira a `summary_large_image` a 1200x675px. ## 3. Sei approcci di generazione (adattati per Twitter) Tutti i sei approcci dal §1 di **generatore-immagini-og** funzionano per le immagini Twitter. L'unica differenza sono le dimensioni di output. Questa sezione copre gli adattamenti specifici per Twitter — vedi il §1 di **generatore-immagini-og** per la documentazione completa della pipeline di rendering. ### 3.1 Generazione di immagini AI (Core #1) Stessa strategia di prompt in tre parti come OG, ma con inquadramento specifico per Twitter: ``` Parte 1 — Descrizione visiva: sfondo, composizione, atmosfera Parte 2 — Specifica del testo: testo ESATTO, tra virgolette, con indicazioni di dimensione Parte 3 — Vincoli Twitter: "1200x675px, proporzioni 2:1, testo chiave nel 60% superiore, sfondo scuro preferito per la modalità scura" ``` **Approccio ibrido (consigliato)**: L'AI genera lo sfondo/l'atmosfera; Satori sovrappone il testo. Fondamentale per il testo in cinese dove i modelli AI ancora faticano — e l'uso della modalità scura di Twitter (~40% degli utenti) rende l'accuratezza del testo ancora più visibile. Vedi il §1.1 di **generatore-immagini-og** per la tabella completa di confronto degli strumenti AI (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney). ### 3.2 Flusso di lavoro nativo-agente consapevole del contenuto (Core #2) Stesso flusso di lavoro a 6 passi come OG (§1.2): Leggi contenuto → Abbina stile → Estrai elementi visivi → Seleziona generazione → Genera → Valida. Aggiunte specifiche per Twitter ad ogni passo: **Passo 2 (Abbina stile)** — Considerazione modalità scura Twitter: preferisci stili con sfondo scuro (Terminal/CLI, Midnight Ink Magazine, Brutalist dark mode) o stili con varianti scure per X. **Passo 3 (Estrai elementi visivi)** — Il ritaglio della timeline di Twitter a ~1:1 su mobile significa che l'elemento visivo più importante deve funzionare dentro un quadrato. Un nastro dati orizzontale che funziona a 1200x675 potrebbe essere invisibile nel ritaglio quadrato. Estrai almeno un elemento che si legga bene a 1:1. **Passo 4 (Seleziona generazione)** — Stesso albero decisionale. Per la generazione AI, aggiungi: "Il testo sopravviverà alla larghezza di rendering mobile ~260px di Twitter?" **Passo 6 (Valida)** — Esegui entrambi i controlli OG E i controlli specifici per Twitter (§8). ### 3.3 Satori + resvg (Basato su codice) Stessa pipeline di OG. Cambia l'altezza da 630 a 675. Vedi il §1.3 di **generatore-immagini-og** per l'implementazione completa. ```tsx // Endpoint condiviso serve sia OG che 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( , { width, height }, ); } ``` **Poi nei metadati della pagina:** ```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], // Specifico per Twitter 1200x675 }, }; ``` ### 3.4 Puppeteer, Servizi gestiti, Configurazione JSON Come OG — imposta viewport/altezza a 675 invece di 630. Vedi i §1.4–1.6 di **generatore-immagini-og**. Per il sistema di priorità delle pagine v3 (S/A/B/C) e la selezione della pipeline, vedi [content-strategy.md](../og-image-generator/references/content-strategy.md) e [pipeline-guide.md](../og-image-generator/references/pipeline-guide.md). ## 4. Considerazioni di design specifiche per X Twitter rende le immagini in modo diverso da Facebook/LinkedIn. Progetta tenendo presente questi aspetti: **Modalità scura (~40% degli utenti)**: Le immagini appaiono in linea nel feed, circondate da tweet. Sfondi scuri si integrano naturalmente; sfondi chiari risaltano ma possono sembrare stridenti in modalità scura. Ogni template dovrebbe avere una variante scura o un default adatto alla modalità scura. Tra i 6 stili, Terminal/CLI, Midnight Ink Magazine, e Brutalist (sfondo nero) sono naturalmente amici della modalità scura. Swiss Minimal e Newspaper dovrebbero essere forniti con un'alternativa per la modalità scura. **Ritaglio della timeline (mobile)**: Su mobile, le immagini `summary_large_image` vengono ritagliate a ~1:1 nella timeline finché il tweet non viene espanso. L'immagine completa 2:1 è visibile solo quando toccata. Posiziona il contenuto più importante (titolo, elemento visivo primario) nel 60% superiore dell'immagine — il quadrato centrale che sopravvive al ritaglio. Non mettere mai testo critico nel 20% inferiore. **Leggibilità del testo a dimensioni ridotte**: Le immagini della timeline vengono visualizzate a ~260px di larghezza nei feed mobili. Testa il tuo template a scala 1/4 (~300px di larghezza) per assicurarti che il testo rimanga leggibile. Questo è più restrittivo rispetto alla dimensione del feed desktop di OG ~500px. **Maschera ai bordi**: Twitter applica una sottile maschera di angoli arrotondati alle immagini delle card. Loghi ed elementi critici posizionati entro 20px da qualsiasi bordo rischiano di essere parzialmente ritagliati. **Adattamenti dei template raccomandati per Twitter (per stile):** | Template OG | Adattamento Twitter | |-------------|-------------------| | Terminal/CLI | Sposta il chrome della finestra più in basso (gli angoli arrotondati di Twitter ritagliano i punti in alto a sinistra); usa il colore di accento per il contrasto in modalità scura | | Magazine Editorial | Usa il preset Midnight Ink (variante scura progettata per X); sposta il pozzo foto più in alto (50% superiore invece che più in basso) | | Swiss Minimal | Aggiungi variante modalità scura: sfondo `#0a0a0a` con accento intatto, testo bianco; le righe dati sopravvivono bene al ritaglio 1:1 | | Pixel Retro | Sfondi naturalmente scuri — i preset NES/Arcade/CGA sono già pronti per X; riduci gli elementi HUD del 10% per liberare la maschera ai bordi | | Brutalist | La variante con sfondo nero è già nativa per la modalità scura; il blocco titolo asimmetrico rimane nella zona del 60% superiore per default | | Newspaper | Aggiungi variante scura con sfondo `#1a1a1a`; il layout multisezione dovrebbe impilarsi verticalmente per la zona di ritaglio quadrata | ## 5. Poster delle Player Card Per contenuti video/audio, il tipo di card `player` richiede un'immagine poster: ```html ``` L'immagine poster viene mostrata prima che l'utente tocchi play. Progettala come una miniatura coinvolgente — includi una sovrapposizione di pulsante play (triangolo centrato in un cerchio), il titolo del video, e un fotogramma del contenuto. Si applica la stessa raccomandazione delle proporzioni 2:1. Il pulsante play dovrebbe essere l'elemento più grande nella zona quadrata centrale. Per poster generati con AI: prompt per "miniatura video con pulsante play centrato, testo del titolo nel terzo superiore, sfondo scuro, 1200x675px." ## 6. Sistema di stili (condiviso con OG — 16 stili) Le immagini per Twitter usano gli stessi 16 stili visivi dal §3 di **generatore-immagini-og** e [riferimenti/style-system-v3.md](../og-image-generator/references/style-system-v3.md). Tutti i template funzionano per Twitter — basta cambiare l'altezza del canvas a 675px. | # | Stile | Modalità scura | Potenziale CTR su X | Template | |---|-------|-----------|----------------|----------| | 1 | Terminal / CLI | Sempre scuro | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) | | 2 | Magazine Editorial | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) | | 3 | Swiss Minimal | Necessita variante | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) | | 4 | Pixel Retro | Tutti scuri | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) | | 5 | Brutalist | Sfondo nero | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) | | 6 | Newspaper | Necessita variante | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) | | 7 | Neo-Brutalism | Sì | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) | | 8 | Bento Grid | Base scura | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) | | 9 | Neo-Swiss Gradient | Chiaro | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) | | 10 | Dark Gradient+Texture | Sempre scuro | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) | | 11 | Text Overlay | Dipende dallo sfondo | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) | | 12 | Cinematic | Adatto allo scuro | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) | | 13 | Collage | Variabile | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) | | 14 | Risograph | Base carta | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) | | 15 | Vaporwave | Neon scuro | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) | | 16 | Grunge | Scuro sbiadito | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) | **Top performer su X**: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — alto contrasto + sfondo scuro sono ottimali per la timeline di X. **Da evitare su X**: stili aziendali eccessivamente conformi senza variante scura; sfondi bianchi puri nella timeline in modalità scura. ## 7. Font e Tipografia Stesse regole di OG. Vedi il [riferimenti/typography.md](../og-image-generator/references/typography.md) di **generatore-immagini-og**. Aggiunta specifica per Twitter: poiché le immagini della timeline vengono renderizzate a ~260px di larghezza (contro i ~500px del feed desktop di OG), aumenta la dimensione minima del font di 4px — usa 28px minimo invece di 24px. ## 8. Controlli YAML Agente ```yaml checks: # P0 — deve passare - id: dimensions-twitter description: twitter:image è 1200x675px (2:1) o 1200x628px (multipiattaforma) - id: card-type-match description: twitter:card è summary_large_image quando si usa un'immagine grande - id: absolute-url description: L'URL di twitter:image è assoluto (https://) e pubblicamente accessibile - id: format description: Il formato dell'immagine è PNG, JPG, o WebP (non SVG) # P1 — dovrebbe passare - id: og-fallback description: og:image è anche impostato (come fallback per le piattaforme che non leggono twitter:image) - id: timeline-safe-zone description: Il testo critico e l'ancora visiva primaria sono nel 60% superiore; niente di critico nel 20% inferiore - id: square-crop-survival description: L'elemento visivo più importante si legge correttamente in un ritaglio centrale 1:1 (timeline mobile) - id: dark-mode description: Il template include una variante con sfondo scuro o usa uno stile predefinito adatto alla modalità scura - id: edge-mask-clearance description: Loghi ed elementi critici sono a ≥20px da tutti i bordi (maschera di angoli arrotondati di Twitter) # P2 — gradito ma non essenziale - id: cross-platform-compatible description: La stessa immagine a 1200x628px funziona sia per OG che per Twitter senza generazione separata - id: ai-text-validated description: Se generata con AI, tutto il testo è stato validato rispetto alla fonte — nessun testo allucinato o con errori di ortografia - id: player-poster description: Le pagine con player card hanno un'immagine poster dedicata con pulsante play - id: content-aware-twitter description: L'immagine riflette il contenuto specifico della pagina, non solo un titolo in un template di dimensioni Twitter ``` ## 9. Errori comuni 1. **Proporzioni sbagliate**: Usare 1200x630 di OG (1.91:1) senza aggiustamenti. Sebbene Twitter lo tolleri, 1200x675 (2:1) riempie meglio la card ed evita il letterboxing. 2. **Tag `twitter:image` mancante**: Fare affidamento solo sul fallback OG — senza un `twitter:image` esplicito, perdi il controllo su quale immagine Twitter sceglie. 3. **Testo nel 20% inferiore**: Twitter ritaglia le immagini a ~1:1 su mobile. Il testo critico vicino al fondo viene tagliato nella timeline. 4. **Nessuna considerazione per la modalità scura**: Immagini con sfondo chiaro appaiono dure nella timeline della modalità scura di Twitter, che ~40% degli utenti ha abilitato. 5. **Usare SVG**: Twitter non supporta SVG per le immagini delle card. Output sempre PNG o JPG. 6. **GIF senza primo frame statico**: Twitter mostra solo il primo frame delle GIF. Assicurati che il frame 1 sia un'immagine statica significativa. 7. **Allucinazione del testo AI nella vista a 260px**: Il testo generato dall'AI che sembra corretto a piena dimensione può mostrare caratteri confusi quando renderizzato piccolo. Valida a scala 1/4. 8. **Loghi che toccano i bordi**: La maschera di angoli arrotondati di Twitter ritaglia ~10px dai bordi. Mantieni i loghi a ≥20px dai bordi. ## 10. Test - **Card Validator**: https://cards-dev.twitter.com/validator — mostra esattamente come la card verrà renderizzata. Incolla qualsiasi URL per l'anteprima. - **Test manuale**: Tweetta un link da un account di test, poi controlla le viste timeline ed espanse. - **Test modalità scura**: Controlla la card sia in modalità chiara che scura nei client Twitter. - **Cache bust**: Twitter memorizza i dati della card in modo aggressivo (fino a 7 giorni). Dopo le modifiche, usa il Card Validator per forzare un nuovo scraping. - **Test di ritaglio mobile**: Fai uno screenshot della card a proporzioni 1:1 (ritaglia al centro 675x675) per verificare che il ritaglio quadrato comunichi ancora il contenuto della pagina. ## 11. Competenze correlate Queste competenze sono opzionali — questa competenza funziona autonomamente. Installale se hai bisogno di funzionalità aggiuntive: **Stesso repo** (sempre installate insieme): - **generatore-immagini-og**: Generazione immagini OG (1200x630, 1.91:1) — la pipeline di rendering completa, tutti i 6 stili, template di base, guida alla tipografia, vincoli Satori. Questo generatore di Twitter Card riutilizza tutta la sua infrastruttura. **Repo separati** (possono essere installati o meno): - **twitter-cards** (marketing-skills): Configurazione dei meta tag HTML per `twitter:card`, `twitter:site`, `twitter:creator`, validazione. Gestisce come IMPOSTARE il tag; questa competenza gestisce come CREARE l'immagine. - **open-graph** (marketing-skills): Configurazione dei meta tag HTML per `og:title`, `og:image`, `og:url`, strumenti di test per piattaforme - **social-share-generator** (marketing-skills): UI del pulsante di condivisione che consuma i dati della Twitter Card quando gli utenti condividono link su X ## FAQ ### Che cos'è un generatore di immagini per Twitter Card? Un generatore di immagini per Twitter Card è uno strumento o una competenza che crea immagini ottimizzate specificamente per le anteprime dei link di X (Twitter). Queste immagini rispettano le proporzioni uniche di Twitter (2:1, 1200x675px) e le considerazioni di design, garantendo che vengano visualizzate correttamente e in modo accattivante quando un link viene condiviso sulla piattaforma. ### In che modo questo generatore si differenzia da un generatore di immagini Open Graph (OG) generico? Pur condividendo l'infrastruttura con i generatori di immagini OG, questa competenza adatta specificamente le dimensioni dell'output al rapporto d'aspetto 1200x675px (2:1) di Twitter, incorpora adattamenti di design specifici per X, considera la suddivisione in zone safe per la timeline e supporta i requisiti delle player card. Le immagini OG generiche sono tipicamente 1200x630px (1,91:1). ### Quali sono le dimensioni consigliate per un'immagine Twitter Card? Le dimensioni consigliate per un'immagine Twitter Card sono 1200x675 pixel, che forniscono un rapporto d'aspetto 2:1. Ciò garantisce che l'immagine riempia efficacemente la card ed eviti il letterboxing. ### Posso usare immagini SVG per le Twitter Card? No, Twitter non supporta SVG per le immagini delle card. Dovresti usare formati PNG, JPG o WebP. Se usi una GIF, verrà visualizzato solo il primo fotogramma. ### Come gestisce questo generatore la modalità scura per le immagini Twitter Card? Il generatore tiene conto dell'uso della modalità scura di Twitter, preferendo stili con sfondo scuro o fornendo varianti per la modalità scura per i modelli. Ciò garantisce che le immagini si integrino naturalmente nella timeline in modalità scura e mantengano un aspetto gradevole per circa il 40% degli utenti di Twitter. ### Che cos'è la 'zona sicura della timeline' e perché è importante per le immagini Twitter Card? La 'zona sicura della timeline' si riferisce al 60% superiore dell'immagine in cui dovrebbe essere posizionato il contenuto critico (titolo, elemento visivo principale). Questo è cruciale perché Twitter ritaglia le immagini a circa 1:1 nelle timeline mobili fino a quando il tweet non viene espanso, il che significa che il contenuto nel 20% inferiore potrebbe essere tagliato.