Twitter Card Afbeeldingsgenerator Agentvaardigheid

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

Kaarttype bepaalt beeldweergave:

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.

// 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(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}

Vervolgens in paginametadata:

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 en 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):

5. Player Card Posters

Voor video-/audio-inhoud vereist het player kaarttype een posterafbeelding:

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

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. Alle templates werken voor Twitter — verander alleen de canvas hoogte naar 675px.

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.

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

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