# Twitter Card Afbeeldingsgenerator Agentvaardigheid > Genereer geoptimaliseerde Twitter Card (X) link preview afbeeldingen met de juiste 2:1 beeldverhouding en platformspecifieke beperkingen. Deze vaardigheid zorgt ervoor dat je tweet-previews er perfect uitzien, helpt je de aandacht van het publiek te trekken en de betrokkenheid te vergroten. - Canonical: https://nanoskill.ai/nl/skills/twitter-card-image-generator - Markdown: https://nanoskill.ai/nl/skills/twitter-card-image-generator.md - Author: kostja94 - Published: 2026-06-09T06:00:00.000Z - Updated: 2026-07-25T04:19:51.168Z - Language: nl - 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 Deze Twitter Card afbeeldingsgenerator-vaardigheid stelt gebruikers in staat om perfect geoptimaliseerde afbeeldingen te maken voor X (Twitter) link previews, waardoor hun content een sterke visuele impact maakt in de tijdlijn. In tegenstelling tot generieke Open Graph-afbeeldingen past deze tool zich specifiek aan aan de unieke 2:1 beeldverhouding (1200x675px) van Twitter en platformspecifieke renderingsquirks, waardoor contentmakers, marketeers en ontwikkelaars hun aanwezigheid op sociale media kunnen verbeteren en de betrokkenheid kunnen stimuleren. Door gebruik te maken van zes verschillende generatiebenaderingen en 16 veelzijdige visuele stijlen, biedt de vaardigheid uitgebreide opties voor het maken van afbeeldingen. Het bevat geavanceerde functies zoals AI-afbeeldingsgeneratie voor achtergronden, contentbewuste workflows en Satori/resvg-pijplijnintegratie. Belangrijke ontwerpoverwegingen zoals compatibiliteit met de donkere modus, bijsnijden van de mobiele tijdlijn en randmaskering zijn ingebouwd, waardoor afbeeldingen visueel aantrekkelijk en functioneel zijn voor alle gebruikerservaringen. Naast standaard link previews ondersteunt de generator ook het maken van overtuigende posterafbeeldingen voor Twitter Player Cards, ideaal voor video- en audiocontent. Met geïntegreerde YAML-controles en begeleiding bij veelvoorkomende fouten kunnen gebruikers vol vertrouwen hoogwaardige Twitter Card-afbeeldingen produceren die voldoen aan technische specificaties en de klikfrequentie maximaliseren, waardoor hun gedeelde links effectiever en professioneler worden. ## Key features - **Geoptimaliseerd voor X (Twitter) linkvoorbeelden**: Genereer afbeeldingen die specifiek zijn ontworpen voor de 2:1-beeldverhouding (1200x675px) en unieke weergavegedragingen van Twitter, zodat uw inhoud opvalt in de tijdlijn. - **Zes generatiebenaderingen & 16 visuele stijlen**: Gebruik zes verschillende generatiemethoden, waaronder AI-afbeeldingsgeneratie en inhoudsbewuste workflows, in 16 visuele stijlen om diverse en boeiende Twitter Card-afbeeldingen te creëren. - **Aanpassingen voor donkere modus en mobiel bijsnijden**: Ontwerp afbeeldingen die goed presteren in de donkere modus van Twitter en bestand zijn tegen het bijsnijden op mobiele tijdlijnen, door belangrijke inhoud in veilige zones te plaatsen voor maximale zichtbaarheid. - **Generatie van spelerskaartposters**: Maak aantrekkelijke posterafbeeldingen voor Twitter Player Cards, compleet met afspeelknop-overlays en videotitels, om gebruikers te verleiden om met uw multimedia-inhoud aan de slag te gaan. - **Uitgebreide validatiecontroles**: Profiteer van ingebouwde YAML-controles die de afbeeldingsafmetingen, het type kaart, het URL-formaat en ontwerpoverwegingen zoals tijdlijnveilige zones en compatibiliteit met de donkere modus valideren. ## Use cases - **Genereer Twitter Card-afbeeldingen voor blogberichten**: Maak automatisch visueel aantrekkelijke Twitter Card-afbeeldingen van 1200x675px voor nieuwe blogberichten, zodat ze er professioneel en boeiend uitzien wanneer ze worden gedeeld op X. - **Ontwerp spelerskaartposters voor video's**: Produceer geoptimaliseerde posterafbeeldingen voor uw video-inhoud die op Twitter wordt gedeeld, waardoor hogere klikfrequenties worden aangemoedigd nog voordat de video wordt afgespeeld. - **Zorg voor compatibiliteit met de donkere modus voor sociale shares**: Pas bestaande Open Graph-afbeeldingen aan of genereer nieuwe met ontwerpen die geschikt zijn voor de donkere modus, zodat uw Twitter Card-afbeeldingen er geweldig uitzien voor alle gebruikers, ongeacht hun weergave-instellingen. ## Result preview Verken een goed presterende Twitter Card-afbeelding mogelijk gemaakt door deze Vaardigheid. ![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 ### Installeren Voeg de Twitter Card Afbeeldingsgenerator-vaardigheid toe aan je AI-agent. ![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) ### Beschrijf content Deel je contentdetails, merkidentiteit en gewenste visuele richting. ![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) ### Genereer resultaat Maak een platform-geoptimaliseerde Twitter Card-afbeelding met een sterke visuele hiërarchie en op betrokkenheid gerichte ontwerpverbeteringen. ![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 Card Afbeeldingsgenerator Genereer afbeeldingen die zijn geoptimaliseerd voor X (Twitter) linkpreviews — de kaarten die in de tijdlijn verschijnen wanneer iemand een link deelt. Twitter Cards hebben afwijkende afbeeldingsafmetingen en weergavegedrag die verschillen van standaard Open Graph. Deze vaardigheid omvat de volledige generatiepipeline, aangepast voor de 2:1-beeldverhouding van Twitter en platformspecifieke eigenaardigheden. Alle zes generatiebenaderingen en alle zes visuele stijlen van **og-image-generator** zijn hier van toepassing. De enige verschillen zijn: uitvoerafmetingen (1200x675 i.p.v. 1200x630), X-specifieke ontwerpaanpassingen, veilige zones voor de tijdlijn en ondersteuning voor player cards. ## Wanneer te gebruiken - Gebruiker heeft **1200×675px (2:1)** afbeeldingen nodig voor X/Twitter linkpreviews, `summary_large_image` of posters voor player cards - Gebruiker noemt `twitter:image`, Twitter Card, X-voorbeeldafbeelding, tweet preview of tijdlijnkaartontwerp - Gebruiker heeft dark-mode-veilige lay-outs, bovenste 60%-inhoudzones of 20px randmarges nodig voor de hoekafronding van Twitter - Gebruiker gebruikt al **og-image-generator** en wil de Twitter-aangepaste variant van dezelfde stijlen en pipeline ## Wanneer NIET te gebruiken - **Generieke OG-afbeeldingen (1200×630, 1,91:1)** voor Facebook, LinkedIn, Slack, enz. — gebruik in plaats daarvan **og-image-generator** - **Alleen HTML-metatags instellen** (niet het afbeeldingsbestand aanmaken) — gebruik **twitter-cards** uit marketing-skills - **SVG-uitvoer** — Twitter ondersteunt geen SVG voor kaartafbeeldingen; gebruik PNG of JPG - **No-code visuele editor of gehoste API** — gebruik [Oginify](https://oginify.com) in plaats van een agent-pipeline **Bij het aanroepen**: Bij **eerste gebruik**, open met 1–2 zinnen over wat deze vaardigheid dekt en waarom het belangrijk is, geef dan de hoofdoutput. Bij **volgend gebruik** of wanneer de gebruiker vraagt om over te slaan, ga direct naar de hoofdoutput. ## 1. Hoe Twitter afbeeldingen consumeert Twitter leest afbeeldingen in deze prioriteitsvolgorde: 1. `twitter:image` — indien expliciet ingesteld, direct gebruikt 2. `og:image` — valt terug op OG-afbeelding als er geen Twitter Card-tags bestaan 3. Geen afbeelding — platte linkpreview **Belangrijk inzicht**: Facebook en LinkedIn lezen `twitter:image` NIET. Twitter is het enige platform dat Twitter Card-tags leest. Dit betekent dat je BEIDE afbeeldingspaden in je metadata nodig hebt, ook al kan de daadwerkelijke renderingpipeline worden gedeeld. ## 2. Twitter Afbeeldingsspecificaties | Eigenschap | Specificatie | |----------|--------------| | **Beeldverhouding** | 2:1 (officieel); Twitter rendert in de praktijk op ~1,91:1 | | **Aanbevolen** | 1200x675px (2:1); 1200x628px (cross-platform met OG) | | **Minimum** | 300x157px | | **Maximum** | 4096x4096px | | **Bestandsgrootte** | Onder 5MB | | **Formaten** | JPG, PNG, WebP, GIF (alleen eerste frame); SVG niet ondersteund | **Kaarttype bepaalt beeldweergave:** | Kaarttype | Afbeeldingsgedrag | |-----------|---------------| | `summary_large_image` | Volledige breedte prominente afbeelding (aanbevolen voor de meeste pagina's) | | `summary` | Kleine miniatuur (100x100px vierkant) | | `player` | Video/audio-embed; afbeelding is de posterframe voor het afspelen | | `app` | App-pictogram; afbeelding is het app-pictogram + promotieafbeelding | Voor de meeste gebruikssituaties, richt op `summary_large_image` op 1200x675px. ## 3. Zes Generatiebenaderingen (Twitter-aangepast) Alle zes benaderingen van **og-image-generator** §1 werken voor Twitter-afbeeldingen. Het enige verschil is de uitvoerafmetingen. Deze sectie behandelt Twitter-specifieke aanpassingen — zie **og-image-generator** §1 voor de volledige renderingpipeline-documentatie. ### 3.1 AI Afbeeldingsgeneratie (Core #1) Zelfde driedelige promptstrategie als OG, maar met Twitter-specifieke framing: ``` Deel 1 — Visuele beschrijving: achtergrond, compositie, sfeer Deel 2 — Tekstspecificatie: EXACTE tekst, tussen aanhalingstekens, met groottehints Deel 3 — Twitter-beperkingen: "1200x675px, 2:1 beeldverhouding, sleuteltekst in bovenste 60%, donkere achtergrond aanbevolen voor dark mode" ``` **Hybride aanpak (aanbevolen)**: AI genereert de achtergrond/sfeer; Satori plaatst tekst er overheen. Cruciaal voor Chinese tekst waar AI-modellen nog steeds moeite mee hebben — en het ~40% dark mode-gebruik van Twitter maakt tekstnauwkeurigheid nog zichtbaarder. Zie **og-image-generator** §1.1 voor de volledige vergelijkingstabel van AI-tools (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney). ### 3.2 Agent-Native Content-Aware Workflow (Core #2) Zelfde 6-stappen workflow als OG (§1.2): Lees Inhoud → Match Stijl → Extraheer Visuele Elementen → Selecteer Generatie → Genereer → Valideer. Twitter-specifieke toevoegingen bij elke stap: **Stap 2 (Match Stijl)** — Twitter dark mode overweging: geef de voorkeur aan stijlen met donkere achtergrond (Terminal/CLI, Midnight Ink Magazine, Brutalist dark mode) of stijlen met donkere varianten voor X. **Stap 3 (Extraheer Visuele Elementen)** — De tijdlijnbijsnijding van Twitter naar ~1:1 op mobiel betekent dat het belangrijkste visuele element binnen een vierkant moet werken. Een horizontale gegevenslint die werkt op 1200x675 kan onzichtbaar zijn in de vierkante bijsnijding. Extraheer ten minste één element dat goed leesbaar is bij 1:1. **Stap 4 (Selecteer Generatie)** — Zelfde beslisboom. Voor AI-generatie, voeg toe: "Zal de tekst overleven bij de ~260px mobiele weergavebreedte van Twitter?" **Stap 6 (Valideer)** — Voer zowel OG-controles als Twitter-specifieke controles uit (§8). ### 3.3 Satori + resvg (Code-based) Zelfde pipeline als OG. Verander hoogte van 630 naar 675. Zie **og-image-generator** §1.3 voor volledige implementatie. ```tsx // Gedeeld endpoint bedient zowel OG als 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 }, ); } ``` **Vervolgens in paginametadata:** ```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-specifiek 1200x675 }, }; ``` ### 3.4 Puppeteer, Beheerde Services, JSON Config Zelfde als OG — stel viewport/hoogte in op 675 in plaats van 630. Zie **og-image-generator** §1.4–1.6. Voor het v3-pagina prioriteitssysteem (S/A/B/C) en pipelineselectie, zie [content-strategy.md](../og-image-generator/references/content-strategy.md) en [pipeline-guide.md](../og-image-generator/references/pipeline-guide.md). ## 4. X-specifieke Ontwerpoverwegingen Twitter rendert afbeeldingen anders dan Facebook/LinkedIn. Ontwerp met deze punten in gedachten: **Dark mode (~40% van gebruikers)**: Afbeeldingen verschijnen inline in de feed, omringd door tweets. Donkere achtergronden vallen natuurlijk samen; lichte achtergronden vallen op maar kunnen storend overkomen in dark mode. Elke template moet een donkere variant of een donker-vriendelijke standaard hebben. Van de 6 stijlen zijn Terminal/CLI, Midnight Ink Magazine en Brutalist (zwarte achtergrond) van nature dark-mode-vriendelijk. Swiss Minimal en Newspaper moeten een dark mode-alternatief bevatten. **Tijdlijn bijsnijding (mobiel)**: Op mobiel worden `summary_large_image` afbeeldingen bijgesneden tot ~1:1 in de tijdlijn totdat de tweet wordt uitgevouwen. De volledige 2:1 afbeelding is alleen zichtbaar wanneer erop wordt getikt. Plaats de belangrijkste inhoud (titel, primaire visuele element) in de bovenste 60% van de afbeelding — het centrale vierkant dat de bijsnijding overleeft. Zet nooit kritieke tekst in de onderste 20%. **Tekstleesbaarheid bij kleine formaten**: Tijdlijnafbeeldingen worden weergegeven op ~260px breed in mobiele feeds. Test je template op 1/4 schaal (~300px breed) om ervoor te zorgen dat tekst leesbaar blijft. Dit is strenger dan de ~500px desktop feedgrootte van OG. **Randmasker**: Twitter past een subtiel hoekafrondingsmasker toe op kaartafbeeldingen. Logo's en kritieke elementen die binnen 20px van een rand worden geplaatst, lopen het risico gedeeltelijk te worden afgesneden. **Aanbevolen template-aanpassingen voor Twitter (per stijl):** | OG-template | Twitter-aanpassing | |-------------|-------------------| | Terminal/CLI | Verplaats window chrome lager (de hoekafronding van Twitter snijdt de stippen linksboven af); gebruik de accentkleur voor dark mode contrast | | Magazine Editorial | Gebruik Midnight Ink preset (donkere variant ontworpen voor X); verplaats fotogat hoger (bovenste 50% i.p.v. lager) | | Swiss Minimal | Voeg dark mode variant toe: `#0a0a0a` achtergrond met accent intact, witte tekst; gegevensrijen overleven de 1:1 bijsnijding goed | | Pixel Retro | Natuurlijk donkere achtergronden — NES/Arcade/CGA presets zijn al X-ready; verklein HUD-elementen met 10% om het randmasker te ontwijken | | Brutalist | Zwarte achtergrondvariant is al dark-mode-native; het asymmetrische titelblok blijft standaard in de bovenste 60% zone | | Newspaper | Voeg `#1a1a1a` achtergrond donkere variant toe; de multi-sectie lay-out moet verticaal stapelen voor de vierkante bijsnijdzone | ## 5. Player Card Posters Voor video-/audio-inhoud vereist het `player` kaarttype een posterafbeelding: ```html ``` De posterafbeelding wordt getoond voordat de gebruiker op play tikt. Ontwerp het als een aantrekkelijke miniatuur — voeg een afspeelknop-overlay toe (gecentreerde driehoek in een cirkel), de videotitel en een frame van de inhoud. Dezelfde 2:1 beeldverhouding is aanbevolen. De afspeelknop moet het grootste element zijn in de centrale vierkante zone. Voor AI-gegenereerde posters: prompt voor "videominiatuur met gecentreerde afspeelknop, titeltekst in het bovenste derde deel, donkere achtergrond, 1200x675px." ## 6. Stijlsysteem (gedeeld met OG — 16 stijlen) Twitter-afbeeldingen gebruiken dezelfde 16 visuele stijlen uit **og-image-generator** §3 en [references/style-system-v3.md](../og-image-generator/references/style-system-v3.md). Alle templates werken voor Twitter — verander alleen de canvas hoogte naar 675px. | # | Stijl | Dark Mode | X CTR Potentieel | Template | |---|-------|-----------|----------------|----------| | 1 | Terminal / CLI | Altijd donker | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) | | 2 | Magazine Editorial | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) | | 3 | Swiss Minimal | Heeft variant nodig | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) | | 4 | Pixel Retro | Allemaal donker | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) | | 5 | Brutalist | Zwarte achtergrond | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) | | 6 | Newspaper | Heeft variant nodig | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) | | 7 | Neo-Brutalism | Ja | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) | | 8 | Bento Grid | Donkere basis | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) | | 9 | Neo-Swiss Gradient | Licht | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) | | 10 | Dark Gradient+Texture | Altijd donker | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) | | 11 | Text Overlay | Afhankelijk van achtergrond | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) | | 12 | Cinematic | Donker-vriendelijk | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) | | 13 | Collage | Varieert | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) | | 14 | Risograph | Papieren basis | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) | | 15 | Vaporwave | Donker neon | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) | | 16 | Grunge | Vervaagd donker | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) | **X toppresteerders**: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — hoog contrast + donkere achtergrond zijn optimaal voor de X-tijdlijn. **X vermijden**: te zakelijke on-brand stijlen zonder donkere variant; puur witte achtergronden in dark mode tijdlijn. ## 7. Lettertype & Typografie Zelfde regels als OG. Zie **og-image-generator** [references/typography.md](../og-image-generator/references/typography.md). Twitter-specifieke toevoeging: omdat tijdlijnafbeeldingen worden weergegeven op ~260px breed (versus OG's ~500px desktop feed), verhoog de minimum lettergrootte met 4px — gebruik minimaal 28px in plaats van 24px. ## 8. Agent YAML-controles ```yaml checks: # P0 — moet slagen - id: dimensions-twitter description: twitter:image is 1200x675px (2:1) of 1200x628px (cross-platform) - id: card-type-match description: twitter:card is summary_large_image bij gebruik van een grote afbeelding - id: absolute-url description: twitter:image URL is absoluut (https://) en openbaar toegankelijk - id: format description: Afbeeldingsformaat is PNG, JPG of WebP (niet SVG) # P1 — zou moeten slagen - id: og-fallback description: og:image is ook ingesteld (als fallback voor platforms die twitter:image niet lezen) - id: timeline-safe-zone description: Kritische tekst en primair visueel anker bevinden zich in de bovenste 60%; niets kritisch in de onderste 20% - id: square-crop-survival description: Het belangrijkste visuele element is correct leesbaar in een 1:1 middenuitsnede (mobiele tijdlijn) - id: dark-mode description: Template bevat een variant met donkere achtergrond of gebruikt een donker-vriendelijke standaardstijl - id: edge-mask-clearance description: Logo's en kritische elementen zijn ≥20px van alle randen (Twitter hoekafrondingsmasker) # P2 — leuk om te hebben - id: cross-platform-compatible description: Zelfde afbeelding op 1200x628px werkt voor zowel OG als Twitter zonder afzonderlijke generatie - id: ai-text-validated description: Indien AI-gegenereerd, alle tekst is gevalideerd tegen de bron — geen hallucinante of verkeerd gespelde tekst - id: player-poster description: Pagina's met player cards hebben een speciale posterafbeelding met afspeelknop - id: content-aware-twitter description: Afbeelding weerspiegelt pagina-specifieke inhoud, niet alleen een titel in een Twitter-grootte template ``` ## 9. Veelgemaakte Fouten 1. **Verkeerde beeldverhouding**: Gebruik van OG's 1200x630 (1,91:1) zonder aanpassing. Hoewel Twitter het tolereert, vult 1200x675 (2:1) de kaart beter en voorkomt brievenbusformaat. 2. **Ontbrekende `twitter:image` tag**: Uitsluitend vertrouwen op OG-fallback — zonder expliciete `twitter:image` verlies je controle over welke afbeelding Twitter kiest. 3. **Tekst in de onderste 20%**: Twitter snijdt afbeeldingen bij tot ~1:1 op mobiel. Kritieke tekst onderaan wordt afgesneden in de tijdlijn. 4. **Geen dark mode overweging**: Afbeeldingen met lichte achtergrond zien er hard uit in Twitter's dark mode tijdlijn, die ~40% van de gebruikers heeft ingeschakeld. 5. **Gebruik van SVG**: Twitter ondersteunt geen SVG voor kaartafbeeldingen. Voer altijd PNG of JPG uit. 6. **GIF zonder statisch eerste frame**: Twitter toont alleen het eerste frame van GIF's. Zorg dat frame 1 een betekenisvol stilstaand beeld is. 7. **AI-tekst hallucinatie in het 260px-beeld**: AI-gegenereerde tekst die op volledige grootte correct lijkt, kan vervormde tekens tonen wanneer deze klein wordt weergegeven. Valideer op 1/4 schaal. 8. **Logo's die randen raken**: Twitter's hoekafrondingsmasker snijdt ~10px van de randen af. Houd logo's ≥20px van de randen. ## 10. Testen - **Card Validator**: https://cards-dev.twitter.com/validator — toont precies hoe de kaart zal renderen. Plak elke URL om een voorbeeld te bekijken. - **Handmatige test**: Tweet een link vanaf een testaccount en controleer de tijdlijn + uitgevouwen weergaven. - **Dark mode test**: Controleer de kaart in zowel lichte als donkere modus Twitter-clients. - **Cache leegmaken**: Twitter cachet kaartgegevens agressief (tot 7 dagen). Gebruik na wijzigingen de Card Validator om een her-kruip te forceren. - **Mobiele bijsnijdtest**: Maak een schermafbeelding van de kaart op 1:1 beeldverhouding (bijsnijden tot 675x675 midden) om te verifiëren dat de vierkante uitsnede nog steeds de inhoud van de pagina communiceert. ## 11. Gerelateerde Vaardigheden Deze vaardigheden zijn optioneel — deze vaardigheid werkt zelfstandig. Installeer ze als je extra functionaliteiten nodig hebt: **Zelfde repo** (altijd samen geïnstalleerd): - **og-image-generator**: OG-afbeeldingsgeneratie (1200x630, 1,91:1) — de volledige renderingpipeline, alle 6 stijlen, seed templates, typografiegids, Satori-beperkingen. Deze Twitter Card Generator hergebruikt de volledige infrastructuur. **Afzonderlijke repo's** (kunnen wel of niet geïnstalleerd zijn): - **twitter-cards** (marketing-skills): HTML-metatag configuratie voor `twitter:card`, `twitter:site`, `twitter:creator`, validatie. Behandelt hoe de tag in te stellen; deze vaardigheid behandelt hoe de afbeelding te creëren. - **open-graph** (marketing-skills): HTML-metatag configuratie voor `og:title`, `og:image`, `og:url`, platform testtools - **social-share-generator** (marketing-skills): Deelknop-UI die Twitter Card-gegevens gebruikt wanneer gebruikers links delen naar X ## FAQ ### Wat is een Twitter Card afbeeldingsgenerator? Een Twitter Card afbeeldingsgenerator is een tool of vaardigheid die afbeeldingen maakt die specifiek zijn geoptimaliseerd voor X (Twitter) linkvoorbeelden. Deze afbeeldingen voldoen aan de unieke beeldverhouding van Twitter (2:1, 1200x675px) en ontwerpoverwegingen, zodat ze correct en aantrekkelijk worden weergegeven wanneer een link op het platform wordt gedeeld. ### Hoe verschilt deze generator van een generieke Open Graph (OG) afbeeldingsgenerator? Hoewel het de infrastructuur deelt met OG-afbeeldingsgeneratoren, past deze vaardigheid specifiek de uitvoerafmetingen aan aan de 1200x675px (2:1) beeldverhouding van Twitter, bevat het X-specifieke ontwerpadaptaties, houdt het rekening met tijdlijnveilige zones en ondersteunt het de vereisten voor spelerkaarten. Generieke OG-afbeeldingen zijn doorgaans 1200x630px (1,91:1). ### Wat zijn de aanbevolen afmetingen voor een Twitter Card-afbeelding? De aanbevolen afmetingen voor een Twitter Card-afbeelding zijn 1200x675 pixels, wat een beeldverhouding van 2:1 oplevert. Dit zorgt ervoor dat de afbeelding de kaart effectief vult en letterboxing vermijdt. ### Kan ik SVG-afbeeldingen gebruiken voor Twitter Cards? Nee, Twitter ondersteunt geen SVG voor kaartafbeeldingen. Gebruik PNG-, JPG- of WebP-indelingen. Als je een GIF gebruikt, wordt alleen het eerste frame weergegeven. ### Hoe gaat deze generator om met de donkere modus voor Twitter Card-afbeeldingen? De generator houdt rekening met het gebruik van de donkere modus van Twitter door de voorkeur te geven aan stijlen met een donkere achtergrond of door varianten voor de donkere modus voor sjablonen aan te bieden. Dit zorgt ervoor dat afbeeldingen op natuurlijke wijze opgaan in de tijdlijn in de donkere modus en visueel aantrekkelijk blijven voor ongeveer 40% van de Twitter-gebruikers. ### Wat is de 'tijdlijnveilige zone' en waarom is deze belangrijk voor Twitter Card-afbeeldingen? De 'tijdlijnveilige zone' verwijst naar de bovenste 60% van de afbeelding waar belangrijke inhoud (titel, primaire visualisatie) moet worden geplaatst. Dit is cruciaal omdat Twitter afbeeldingen bijsnijdt tot ongeveer 1:1 op mobiele tijdlijnen totdat de tweet wordt uitgevouwen, wat betekent dat inhoud in de onderste 20% mogelijk wordt afgesneden.