Twitter-kort-billedgenerator-agentfærdighed

Twitter Card Billedgenerator

Generer billeder optimeret til X (Twitter) linkforhåndsvisninger — de kort der vises i tidslinjen når nogen deler et link. Twitter Cards har særlige billeddimensioner og gengivelsesadfærd der adskiller sig fra standard Open Graph. Denne færdighed dækker den komplette genereringspipeline tilpasset Twitters 2:1 billedformat og platformspecifikke særheder.

Alle seks genereringsmetoder og alle seks visuelle stilarter fra og-image-generator gælder her. De eneste forskelle er: outputdimensioner (1200x675 i stedet for 1200x630), X-specifikke designtilpasninger, tidslinjesikker zoneinddeling og understøttelse af player-kort.

Hvornår du skal bruge den

• Brugeren har brug for 1200×675px (2:1) billeder til X/Twitter linkforhåndsvisninger, summary_large_image eller player-kortplakater
• Brugeren nævner twitter:image, Twitter Card, X forhåndsvisningsbillede, tweet-forhåndsvisning eller tidslinjekortdesign
• Brugeren har brug for layouts der er sikre i mørk tilstand, indholdszoner i de øverste 60 % eller 20px kantmasker til X's beskæring med afrundede hjørner
• Brugeren bruger allerede og-image-generator og ønsker den Twitter-tilpassede variant af de samme stilarter og pipeline

Hvornår du IKKE skal bruge den

• Generiske OG-billeder (1200×630, 1.91:1) til Facebook, LinkedIn, Slack osv. — brug og-image-generator i stedet
• Kun indstilling af HTML-meta-tags (ikke oprettelse af billedfilen) — brug twitter-cards fra marketing-skills
• SVG-output — Twitter understøtter ikke SVG til kortbilleder; brug PNG eller JPG
• No-code visuel editor eller hosted API — brug Oginify i stedet for at køre en agentpipeline

Ved start: Ved første brug, åbn med 1–2 sætninger om hvad denne færdighed dækker og hvorfor det er vigtigt, og giv derefter hovedoutputtet. Ved efterfølgende brug eller når brugeren beder om at springe over, gå direkte til hovedoutputtet.

1. Hvordan Twitter håndterer billeder

Twitter læser billeder i denne prioriterede rækkefølge:

1. twitter:image — hvis det er eksplicit angivet, bruges det direkte
2. og:image — falder tilbage på OG-billede hvis ingen Twitter Card-tags findes
3. Intet billede — ren tekst linkforhåndsvisning

Vigtig indsigt: Facebook og LinkedIn læser IKKE twitter:image. Twitter er den eneste platform der læser Twitter Card-tags. Det betyder at du har brug for BEGGE billedstier i din metadata, selvom selve gengivelsespipelinen kan deles.

2. Twitter billedspecifikationer

Korttypen bestemmer billedvisningen:

I de fleste tilfælde målret mod summary_large_image ved 1200x675px.

3. Seks genereringsmetoder (Tilpasset Twitter)

Alle seks metoder fra og-image-generator §1 fungerer til Twitter-billeder. Den eneste forskel er outputdimensionerne. Dette afsnit dækker Twitter-specifikke tilpasninger — se og-image-generator §1 for den fulde dokumentation af gengivelsespipelinen.

3.1 AI-billedgenerering (Kerne #1)

Samme tredelte prompt-strategi som OG, men med Twitter-specifik indramning:

Del 1 — Visuel beskrivelse: baggrund, komposition, stemning
Del 2 — Tekstspecifikation: PRÆCIS tekst, i anførselstegn, med størrelseshint
Del 3 — Twitter-begrænsninger: "1200x675px, 2:1 billedformat, nøgletekst i
         øverste 60 %, mørk baggrund foretrækkes til mørk tilstand"

Hybrid metode (anbefalet): AI genererer baggrunden/atmosfæren; Satori lægger tekst ovenfor. Afgørende for kinesisk tekst hvor AI-modeller stadig kæmper — og Twitters ~40 % brug af mørk tilstand gør tekstnøjagtighed endnu mere synlig.

Se og-image-generator §1.1 for den fulde sammenligningstabel over AI-værktøjer (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Agent-native indholdsbevidst arbejdsgang (Kerne #2)

Samme 6-trins arbejdsgang som OG (§1.2): Læs indhold → Match stil → Udtræk visuelle elementer → Vælg generering → Generer → Valider. Twitter-specifikke tilføjelser ved hvert trin:

Trin 2 (Match stil) — Overvejelse af Twitters mørke tilstand: foretræk mørk-baggrund stilarter (Terminal/CLI, Midnight Ink Magazine, Brutalist mørk tilstand) eller stilarter med mørke varianter til X.

Trin 3 (Udtræk visuelle elementer) — Twitters tidslinjebeskæring til ~1:1 på mobil betyder at det vigtigste visuelle element skal fungere inden for en firkant. Et horisontalt databånd der fungerer ved 1200x675 kan være usynligt i den firkantede beskæring. Udtræk mindst ét element der læser godt ved 1:1.

Trin 4 (Vælg generering) — Samme beslutningstræ. Til AI-generering tilføjes: "Vil teksten overleve Twitters ~260px mobile gengivelsesbredde?"

Trin 6 (Valider) — Kør både OG-kontroller OG Twitter-specifikke kontroller (§8).

3.3 Satori + resvg (Kodebaseret)

Samme pipeline som OG. Skift højde fra 630 til 675. Se og-image-generator §1.3 for fuld implementering.

// Delt endpoint betjener både OG og Twitter:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Standard';
  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 },
  );
}

Derefter i sidens metadata:

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

3.4 Puppeteer, Administrerede tjenester, JSON-konfiguration

Samme som OG — indstil viewport/højde 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-specifikke designovervejelser

Twitter gengiver billeder anderledes end Facebook/LinkedIn. Design med disse i tankerne:

Mørk tilstand (~40 % af brugerne): Billeder vises indlejret i feedet, omgivet af tweets. Mørke baggrunde integreres naturligt; lyse baggrunde skiller sig ud, men kan virke skurrende i mørk tilstand. Hver skabelon bør have en mørk variant eller en mørk-venlig standard. Blandt de 6 stilarter er Terminal/CLI, Midnight Ink Magazine og Brutalist (sort bg) naturligt mørk-tilstand-venlige. Swiss Minimal og Newspaper bør leveres med en alternativ mørk tilstand.

Tidslinjebeskæring (mobil): På mobil beskæres summary_large_image-billeder til ~1:1 i tidslinjen indtil tweetet udvides. Det fulde 2:1-billede er kun synligt når der trykkes. Placer det vigtigste indhold (titel, primær visuel) i de øverste 60 % af billedet — den centrale firkant der overlever beskæring. Læg aldrig kritisk tekst i de nederste 20 %.

Tekstlæsbarhed ved små størrelser: Tidslinjebilleder vises i ~260px bredde på mobile feeds. Test din skabelon ved 1/4 skala (~300px bred) for at sikre at tekst forbliver læselig. Dette er strengere end OG's ~500px desktop feed-størrelse.

Kantmaske: Twitter anvender en subtil afrundet hjørnemaske på kortbilleder. Logoer og kritiske elementer placeret inden for 20px fra nogen kant risikerer at blive delvist klippet.

Anbefalede skabelontilpasninger til Twitter (pr. stil):

5. Player-kort plakater

For video-/lydindhold kræver player-korttypen et plakatbillede:

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

Plakatbilledet vises før brugeren trykker på afspil. Design det som et overbevisende miniature — inkluder et afspil-knap-overlay (centreret trekant i en cirkel), videotitlen og en frame fra indholdet. Samme anbefaling om 2:1-format gælder. Afspil-knappen bør være det største element i den centrale firkantzone.

For AI-genererede plakater: prompt for "video thumbnail med centreret afspil-knap, titeltekst i øverste tredjedel, mørk baggrund, 1200x675px."

6. Stilsystem (delt med OG — 16 stilarter)

Twitter-billeder bruger de samme 16 visuelle stilarter fra og-image-generator §3 og references/style-system-v3.md. Alle skabeloner fungerer til Twitter — bare ændr lærredshøjden til 675px.

X toppræstationer: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — høj kontrast + mørk baggrund er optimale til X tidslinje. X undgå: alt for virksomhedsidentiske stilarter uden mørk variant; kridhvide baggrunde i mørk tilstand tidslinje.

7. Skrifttype & Typografi

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

Twitter-specifik tilføjelse: fordi tidslinjebilleder gengives ved ~260px bredde (mod OG's ~500px desktop feed), øg minimum skriftstørrelse med 4px — brug 28px minimum i stedet for 24px.

8. Agent YAML Kontroller

checks:
  # P0 — skal bestå
  - id: dimensions-twitter
    description: twitter:image er 1200x675px (2:1) eller 1200x628px (tværgående platforme)
  - id: card-type-match
    description: twitter:card er summary_large_image når der bruges et stort billede
  - id: absolute-url
    description: twitter:image URL er absolut (https://) og offentligt tilgængelig
  - id: format
    description: Billedformat er PNG, JPG eller WebP (ikke SVG)

  # P1 — bør bestå
  - id: og-fallback
    description: og:image er også indstillet (som fallback til platforme der ikke læser twitter:image)
  - id: timeline-safe-zone
    description: Kritisk tekst og primært visuelt anker er i de øverste 60 %; intet kritisk i nederste 20 %
  - id: square-crop-survival
    description: Det vigtigste visuelle element læses korrekt i en 1:1 centreret beskæring (mobil tidslinje)
  - id: dark-mode
    description: Skabelon indeholder en mørk-baggrund variant eller bruger en mørkevenlig standardstil
  - id: edge-mask-clearance
    description: Logoer og kritiske elementer er ≥20px fra alle kanter (Twitter afrundet hjørnemaske)

  # P2 — rart at have
  - id: cross-platform-compatible
    description: Samme billede ved 1200x628px fungerer til både OG og Twitter uden separat generering
  - id: ai-text-validated
    description: Hvis AI-genereret, blev al tekst valideret mod kilde — ingen hallucineret eller forkert stavet tekst
  - id: player-poster
    description: Player-kort sider har et dedikeret plakatbillede med afspil-knap
  - id: content-aware-twitter
    description: Billede afspejler sidespecifikt indhold, ikke kun en titel i en Twitter-størrelse skabelon

9. Almindelige fejl

1. Forkert billedformat: Bruger OG's 1200x630 (1.91:1) uden justering. Selvom Twitter tolererer det, udfylder 1200x675 (2:1) kortet bedre og undgår letterboxing.
2. Manglende twitter:image-tag: Stoler udelukkende på OG fallback — uden eksplicit twitter:image mister du kontrol over hvilket billede Twitter vælger.
3. Tekst i de nederste 20 %: Twitter beskærer billeder til ~1:1 på mobil. Kritisk tekst nær bunden bliver skåret af i tidslinjen.
4. Ingen overvejelse om mørk tilstand: Billeder med lys baggrund ser skarpe ud i Twitters mørke tilstand-tidslinje, som ~40 % af brugerne har aktiveret.
5. Brug af SVG: Twitter understøtter ikke SVG til kortbilleder. Output altid PNG eller JPG.
6. GIF uden statisk første frame: Twitter viser kun den første frame af GIF'er. Sørg for at frame 1 er et meningsfuldt stillbillede.
7. AI-tekst hallucination i 260px visning: AI-genereret tekst der ser korrekt ud i fuld størrelse kan vise forvrængede tegn når den gengives lille. Valider ved 1/4 skala.
8. Logoer der rører kanter: Twitters afrundede hjørnemaske klipper ~10px fra kanter. Hold logoer ≥20px fra kanter.

10. Test

• Kortvalidator: https://cards-dev.twitter.com/validator — viser præcis hvordan kortet vil blive gengivet. Indsæt enhver URL for forhåndsvisning.
• Manuel test: Tweet et link fra en testkonto, kontroller derefter tidslinje + udvidede visninger.
• Test i mørk tilstand: Kontroller kortet i både lys og mørk tilstand Twitter-klienter.
• Cache-bust: Twitter cacher kortdata aggressivt (op til 7 dage). Efter ændringer, brug Kortvalidator til at udløse en ny scraping.
• Test af mobilbeskæring: Tag et skærmbillede af kortet i 1:1 billedformat (beskær til 675x675 center) for at verificere at den firkantede beskæring stadig kommunikerer sidens indhold.

11. Relaterede færdigheder

Disse færdigheder er valgfri — denne færdighed fungerer selvstændigt. Installer dem hvis du har brug for yderligere kapaciteter:

Samme repo (altid installeret sammen):

• og-image-generator: OG-billedgenerering (1200x630, 1.91:1) — den fulde gengivelsespipeline, alle 6 stilarter, grundskabeloner, typografivejledning, Satori-begrænsninger. Denne Twitter Card-generator genbruger hele sin infrastruktur.

Separate repos (kan være installeret eller ikke):

• twitter-cards (marketing-skills): HTML-meta-tag-konfiguration til twitter:card, twitter:site, twitter:creator, validering. Håndterer hvordan man INDSTLLER tagget; denne færdighed håndterer hvordan man OPRETTER billedet.
• open-graph (marketing-skills): HTML-meta-tag-konfiguration til og:title, og:image, og:url, platform-testværktøjer
• social-share-generator (marketing-skills): Delingsknap-UI der bruger Twitter Card-data når brugere deler links til X