Twitter-kortbildegenerator agentferdighet

Twitter Card-bildegenerator

Generer bilder optimalisert for forhåndsvisninger av lenker på X (Twitter) — kortene som vises i tidslinjen når noen deler en lenke. Twitter-kort har egne bildedimensjoner og gjengivelsesatferd som skiller seg fra vanlig Open Graph. Denne ferdigheten dekker hele genereringspipelinen tilpasset Twitters 2:1-sideforhold og plattformspesifikke særegenheter.

Alle seks genereringstilnærminger og alle seks visuelle stiler fra og-image-generator gjelder her. De eneste forskjellene er: utdatadimensjoner (1200x675 i stedet for 1200x630), X-spesifikke designtilpasninger, tidslinjesikker soning og støtte for spillerkort.

Når du bør bruke

• Bruker trenger 1200×675px (2:1)-bilder for forhåndsvisninger av X/Twitter-lenker, summary_large_image, eller spillerkortplakater
• Bruker nevner twitter:image, Twitter-kort, forhåndsvisningsbilde for X, tweet-forhåndsvisning eller tidslinjekortdesign
• Bruker trenger mørk-modus-sikre oppsett, øvre 60 % innholdssoner eller 20px kantmasker for X sin avrundede hjørnebeskjæring
• Bruker allerede bruker og-image-generator og ønsker den Twitter-tilpassede varianten av de samme stilene og pipelinen

Når du IKKE bør bruke

• Generiske OG-bilder (1200×630, 1,91:1) for Facebook, LinkedIn, Slack osv. — bruk og-image-generator i stedet
• Kun oppsett av HTML-metatagger (ikke opprettelse av bildefilen) — bruk twitter-cards fra marketing-skills
• SVG-utdata — Twitter støtter ikke SVG for kortbilder; bruk PNG eller JPG
• Visuell editor uten koding eller hostet API — bruk Oginify i stedet for å kjøre en agentpipeline

Ved aktivering: Ved første gangs bruk, start med 1–2 setninger om hva denne ferdigheten dekker og hvorfor den er viktig, og gi deretter hovedutdataene. Ved gjentatt bruk eller når brukeren ber om å hoppe over, gå direkte til hovedutdataene.

1. Hvordan Twitter behandler bilder

Twitter leser bilder i denne prioriteringsrekkefølgen:

1. twitter:image — hvis satt eksplisitt, brukes direkte
2. og:image — faller tilbake til OG-bildet hvis ingen Twitter-kort-tagger finnes
3. Intet bilde — ren tekstforhåndsvisning av lenken

Nøkkelinnsikt: Facebook og LinkedIn leser IKKE twitter:image. Twitter er den eneste plattformen som leser Twitter-kort-tagger. Dette betyr at du trenger BEGGE bildestier i metadataene dine, selv om den faktiske gjengivelsespipelinen kan deles.

2. Spesifikasjoner for Twitter-bilder

Korttype bestemmer bildevisning:

For de fleste brukstilfeller, sikte på summary_large_image med 1200x675px.

3. Seks genereringstilnærminger (Twitter-tilpasset)

Alle seks tilnærminger fra og-image-generator §1 fungerer for Twitter-bilder. Den eneste forskjellen er utdatadimensjonene. Denne delen dekker Twitter-spesifikke tilpasninger — se og-image-generator §1 for fullstendig dokumentasjon av gjengivelsespipelinen.

3.1 KI-bildegenerering (Kjerne #1)

Samme tredelte prompt-strategi som OG, men med Twitter-spesifikk innramming:

Del 1 — Visuell beskrivelse: bakgrunn, komposisjon, stemning
Del 2 — Tekstspesifikasjon: NØYAKTIG tekst, i anførselstegn, med størrelseshint
Del 3 — Twitter-begrensninger: "1200x675px, 2:1-sideforhold, nøkkeltekst i
         øvre 60 %, mørk bakgrunn foretrekkes for mørk modus"

Hybrid tilnærming (anbefalt): KI genererer bakgrunnen/atmosfæren; Satori legger tekst over. Kritisk for kinesisk tekst der KI-modeller fortsatt sliter — og Twitters ~40 % bruk av mørk modus gjør tekstnøyaktigheten enda mer synlig.

Se og-image-generator §1.1 for fullstendig sammenligningstabell for KI-verktøy (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Agent-innfødt innholdsbevisst arbeidsflyt (Kjerne #2)

Samme 6-trinns arbeidsflyt som OG (§1.2): Les innhold → Match stil → Trekk ut visuelle elementer → Velg generering → Generer → Valider. Twitter-spesifikke tillegg på hvert trinn:

Trinn 2 (Match stil) — Mørk modus-hensyn for Twitter: foretrekk stiler med mørk bakgrunn (Terminal/CLI, Midnight Ink Magazine, Brutalist mørk modus) eller stiler med mørke varianter for X.

Trinn 3 (Trekk ut visuelle elementer) — Twitters tidslinjebeskjæring til ~1:1 på mobil betyr at det viktigste visuelle elementet må fungere i en firkant. Et horisontalt databånd som fungerer ved 1200x675 kan være usynlig i den kvadratiske beskæringen. Trekk ut minst ett element som leser godt ved 1:1.

Trinn 4 (Velg generering) — Samme beslutningstre. For KI-generering, legg til: "Vil teksten overleve Twitters ~260px mobile gjengivelsesbredde?"

Trinn 6 (Valider) — Kjør både OG-sjekker OG Twitter-spesifikke sjekker (§8).

3.3 Satori + resvg (Kodebasert)

Samme pipeline som OG. Endre høyde fra 630 til 675. Se og-image-generator §1.3 for full implementering.

// Shared endpoint serves both OG and 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 },
  );
}

Deretter i sidemetadata:

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-specific 1200x675
  },
};

3.4 Puppeteer, Administrerte tjenester, JSON-konfigurasjon

Samme som OG — sett viewport/høyde til 675 i stedet for 630. Se og-image-generator §1.4–1.6. For v3-sideprioriteringssystemet (S/A/B/C) og pipelinevalg, se content-strategy.md og pipeline-guide.md.

4. X-spesifikke designhensyn

Twitter gjengir bilder annerledes enn Facebook/LinkedIn. Design med disse i tankene:

Mørk modus (~40 % av brukerne): Bilder vises innfelt i feeden, omgitt av tweets. Mørke bakgrunner blander seg naturlig; lyse bakgrunner skiller seg ut, men kan se skurrende ut i mørk modus. Hver mal bør ha en mørk variant eller et mørkevennlig standardvalg. Blant de 6 stilene er Terminal/CLI, Midnight Ink Magazine og Brutalist (svart bg) naturlig mørk-modus-vennlige. Swiss Minimal og Newspaper bør leveres med et alternativ for mørk modus.

Tidslinjebeskjæring (mobil): På mobil beskjæres summary_large_image-bilder til ~1:1 i tidslinjen til tweeten utvides. Det fullstendige 2:1-bildet er kun synlig når det trykkes på. Plasser det viktigste innholdet (tittel, primært visuelt element) i de øvre 60 % av bildet — midtfirkanten som overlever beskæring. Aldri legg kritisk tekst i de nederste 20 %.

Tekstlesbarhet ved små størrelser: Tidslinjebilder vises med ~260px bredde på mobilfeeder. Test malen din i 1/4 skala (~300px bred) for å sikre at teksten forblir lesbar. Dette er strengere enn OGs ~500px desktop-feedstørrelse.

Kantmaske: Twitter påfører en subtil avrundet hjørnemaske på kortbilder. Logoer og kritiske elementer plassert innenfor 20px fra en hvilken som helst kant risikerer å bli delvis klippet.

Anbefalte maltilpasninger for Twitter (per stil):

5. Spillerkortplakater

For video-/lydinnhold krever player-korttypen et plakatbilde:

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

Plakatbildet vises før brukeren trykker på spill. Design det som et tiltalende miniatyrbilde — inkluder et spillknapp-overlegg (sentrert trekant i en sirkel), videotittelen og en ramme fra innholdet. Samme 2:1-forholdsanbefaling gjelder. Spillknappen bør være det største elementet i midtfirkantsonen.

For KI-genererte plakater: prompt for "videominiatyr med sentrert spillknapp, titteltekst i øvre tredjedel, mørk bakgrunn, 1200x675px."

6. Stilsystem (delt med OG — 16 stiler)

Twitter-bilder bruker de samme 16 visuelle stilene fra og-image-generator §3 og references/style-system-v3.md. Alle maler fungerer for Twitter — bare endre lerretshøyden til 675px.

X-toppresterere: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — høy kontrast + mørk bakgrunn er optimalt for X-tidslinjen. Unngå for X: altfor bedriftsmerke-stiler uten mørk variant; helhvite bakgrunner i mørk modus-tidslinjen.

7. Font & Typografi

Samme regler som OG. Se og-image-generator references/typography.md.

Twitter-spesifikt tillegg: fordi tidslinjebilder gjengis med ~260px bredde (mot OGs ~500px desktop-feed), øk minste skriftstørrelse med 4px — bruk 28px minimum i stedet for 24px.

8. Agent YAML-sjekker

checks:
  # P0 — must pass
  - id: dimensions-twitter
    description: twitter:image is 1200x675px (2:1) or 1200x628px (cross-platform)
  - id: card-type-match
    description: twitter:card is summary_large_image when using a large image
  - id: absolute-url
    description: twitter:image URL is absolute (https://) and publicly accessible
  - id: format
    description: Image format is PNG, JPG, or WebP (not SVG)

  # P1 — should pass
  - id: og-fallback
    description: og:image is also set (as fallback for platforms that don't read twitter:image)
  - id: timeline-safe-zone
    description: Critical text and primary visual anchor are in the top 60%; nothing critical in bottom 20%
  - id: square-crop-survival
    description: The most important visual element reads correctly in a 1:1 center crop (mobile timeline)
  - id: dark-mode
    description: Template includes a dark-background variant or uses a dark-friendly default style
  - id: edge-mask-clearance
    description: Logos and critical elements are ≥20px from all edges (Twitter rounded corner mask)

  # P2 — nice to have
  - id: cross-platform-compatible
    description: Same image at 1200x628px works for both OG and Twitter without separate generation
  - id: ai-text-validated
    description: If AI-generated, all text was validated against source — no hallucinated or misspelled text
  - id: player-poster
    description: Player card pages have a dedicated poster image with play button
  - id: content-aware-twitter
    description: Image reflects page-specific content, not just a title in a Twitter-sized template

9. Vanlige feil

1. Feil sideforhold: Bruke OGs 1200x630 (1,91:1) uten justering. Selv om Twitter tolererer det, fyller 1200x675 (2:1) kortet bedre og unngår brevkasse-effekt.
2. Manglende twitter:image-tagg: Stol utelukkende på OG-fallback — uten eksplisitt twitter:image, mister du kontrollen over hvilket bilde Twitter plukker.
3. Tekst i de nederste 20 %: Twitter beskjærer bilder til ~1:1 på mobil. Kritisk tekst nær bunnen blir kuttet i tidslinjen.
4. Ingen hensyn til mørk modus: Bilder med lys bakgrunn ser harde ut i Twitters mørk modus-tidslinje, som ~40 % av brukerne har aktivert.
5. Bruker SVG: Twitter støtter ikke SVG for kortbilder. Alltid oppgi PNG eller JPG.
6. GIF uten statisk første bilde: Twitter viser bare det første bildet i GIF-er. Sørg for at bilde 1 er et meningsfullt stillbilde.
7. KI-teksthallusinasjon i 260px-visning: KI-generert tekst som ser riktig ut i full størrelse, kan vise uklare tegn når den gjengis liten. Valider i 1/4 skala.
8. Logoer som berører kanter: Twitters avrundede hjørnemaske klipper ~10px fra kantene. Hold logoer ≥20px fra kanter.

10. Testing

• Card Validator: https://cards-dev.twitter.com/validator — viser nøyaktig hvordan kortet vil gjengis. Lim inn en URL for å forhåndsvise.
• Manuell test: Tweet en lenke fra en testkonto, sjekk deretter tidslinje + utvidede visninger.
• Mørk modus-test: Sjekk kortet i både lys og mørk modus Twitter-klienter.
• Cache-overskriving: Twitter cacher kortdata aggressivt (opptil 7 dager). Etter endringer, bruk Card Validator for å tvinge en ny skraping.
• Mobilbeskjæringstest: Ta skjermbilde av kortet med 1:1 sideforhold (beskjær til 675x675 senter) for å bekrefte at den kvadratiske beskæringen fortsatt formidler sidens innhold.

11. Relaterte ferdigheter

Disse ferdighetene er valgfrie — denne ferdigheten fungerer frittstående. Installer dem hvis du trenger ekstra funksjoner:

Samme repo (alltid installert sammen):

• og-image-generator: OG-bildegenerering (1200x630, 1,91:1) — hele gjengivelsespipelinen, alle 6 stiler, frømaler, typografi-guide, Satori-begrensninger. Denne Twitter-kortgeneratoren gjenbruker hele infrastrukturen.

Separate repoer (kan være installert eller ikke):

• twitter-cards (marketing-skills): HTML-metatagg-konfigurasjon for twitter:card, twitter:site, twitter:creator, validering. Håndterer hvordan du SETTER taggen; denne ferdigheten håndterer hvordan du SKAPER bildet.
• open-graph (marketing-skills): HTML-metatagg-konfigurasjon for og:title, og:image, og:url, plattformtestingverktøy
• social-share-generator (marketing-skills): Delingsknapp-UI som bruker Twitter-kortdata når brukere deler lenker til X