# Twitter-kort-billedgenerator-agentfærdighed

> Generer optimerede Twitter-kort (X) link forhåndsvisningsbilleder med det korrekte 2:1-breddeforhold og platformspecifikke begrænsninger. Denne færdighed sikrer, at dine tweet-forhåndsvisninger ser perfekte ud, hvilket hjælper dig med at fange publikums opmærksomhed og øge engagementet.

- Canonical: https://nanoskill.ai/da/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/da/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: da
- 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

Denne Twitter-kort-billedgeneratorfærdighed giver brugerne mulighed for at oprette perfekt optimerede billeder til X (Twitter) link forhåndsvisninger, hvilket sikrer, at deres indhold gør et stærkt visuelt indtryk i tidslinjen. I modsætning til generiske Open Graph-billeder tilpasser dette værktøj sig specifikt til Twitters unikke 2:1-breddeforhold (1200x675px) og platformspecifikke gengivelsesmærkværdigheder, hvilket hjælper indholdsskabere, marketingfolk og udviklere med at forbedre deres tilstedeværelse på sociale medier og øge engagement.

Ved at udnytte seks forskellige generationstilgange og 16 alsidige visuelle stilarter giver færdigheden omfattende muligheder for billedoprettelse. Den indeholder avancerede funktioner som AI-billedgenerering til baggrunde, indholdsbevidste arbejdsgange og Satori/resvg-pipelineintegration. Vigtige designovervejelser såsom dark mode-kompatibilitet, beskæring af mobil-tidslinje og kantmaskering er indbygget, hvilket sikrer, at billeder er visuelt tiltalende og funktionelle på tværs af alle brugeroplevelser.

Ud over standard link forhåndsvisninger understøtter generatoren også oprettelsen af overbevisende plakatbilleder til Twitter-afspillerkort, ideelt til video- og lydindhold. Med integrerede YAML-kontroller og vejledning om almindelige fejl kan brugerne trygt producere Twitter-kortbilleder i høj kvalitet, der opfylder tekniske specifikationer og maksimerer klikrater, hvilket gør deres delte links mere effektive og professionelle.

## Key features

- **Optimeret til X (Twitter) linkforhåndsvisninger**: Generer billeder, der er specielt designet til Twitters 2:1 billedformat (1200x675 px) og unikke gengivelsesadfærd, så dit indhold skiller sig ud i tidslinjen.
- **Seks generationstilgange og 16 visuelle stilarter**: Brug seks forskellige generationsteknikker, herunder AI-billedgenerering og indholdsbevidste arbejdsgange, på tværs af 16 visuelle stilarter for at skabe varierede og engagerende Twitter Card-billeder.
- **Tilpasninger til mørk tilstand og mobilbeskæring**: Design billeder, der fungerer godt i Twitters mørke tilstand og overlever mobil tidslinjebeskæring, og placer kritisk indhold i sikre zoner for maksimal synlighed.
- **Generering af player card-plakater**: Opret overbevisende plakatbilleder til Twitter Player Cards, komplet med afspilningsknapoverlejringer og videotitler, for at lokke brugere til at engagere sig i dit multimedieindhold.
- **Omfattende valideringskontrol**: Drag fordel af indbyggede YAML-kontrol, der validerer billeddimensioner, korttype, URL-format og designovervejelser som tidslinje-sikre zoner og kompatibilitet med mørk tilstand.

## Use cases

- **Generer Twitter Card-billeder til blogindlæg**: Opret automatisk visuelt tiltalende 1200x675 px Twitter Card-billeder til nye blogindlæg, så de ser professionelle og engagerende ud, når de deles på X.
- **Design player card-plakater til videoer**: Producer optimerede plakatbilleder til dit videoindhold, der deles på Twitter, hvilket tilskynder til højere klikrater, før videoen overhovedet afspilles.
- **Sikre kompatibilitet med mørk tilstand for sociale delinger**: Tilpas eksisterende Open Graph-billeder eller generer nye med designs, der er venlige over for mørk tilstand, og garanter, at dine Twitter Card-billeder ser godt ud for alle brugere, uanset deres skærmindstillinger.

## Result preview

Udforsk et højtydende Twitter-kortbillede drevet af denne færdighed.

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

### Installer

Tilføj Twitter-kort-billedgeneratorfærdigheden til din 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)

### Beskriv indhold

Del dine indholdsoplysninger, brandidentitet og foretrukne visuelle retning.

![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)

### Generer resultat

Opret et platformoptimeret Twitter-kortbillede med stærk visuel hierarki og engagementsfokuserede designforbedringer.

![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 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](https://oginify.com) 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

| Egenskab | Specifikation |
|----------|--------------|
| **Billedformat** | 2:1 (officielt); Twitter gengiver ved ~1.91:1 i praksis |
| **Anbefalet** | 1200x675px (2:1); 1200x628px (på tværs af platforme med OG) |
| **Minimum** | 300x157px |
| **Maksimum** | 4096x4096px |
| **Filstørrelse** | Under 5MB |
| **Formater** | JPG, PNG, WebP, GIF (kun første frame); SVG understøttes ikke |

**Korttypen bestemmer billedvisningen:**

| Korttype | Billedopførsel |
|-----------|---------------|
| `summary_large_image` | Fyld i fuld bredde fremtrædende billede (anbefales til de fleste sider) |
| `summary` | Lille miniature (100x100px firkant) |
| `player` | Video/audio integration; billedet er plakatrammen før afspilning |
| `app` | App-ikon; billedet er app-ikonet + reklamebillede |

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.

```tsx
// 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:**

```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-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-image-generator/references/content-strategy.md) og [pipeline-guide.md](../og-image-generator/references/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):**

| OG-skabelon | Twitter-tilpasning |
|-------------|-------------------|
| Terminal/CLI | Flyt vinduespynt lavere (Twitters afrundede hjørner klipper prikkerne i øverste venstre); brug accent-farven til kontrast i mørk tilstand |
| Magazine Editorial | Brug Midnight Ink-forudindstillingen (mørk variant designet til X); flyt foto-brønden højere (øverste 50 % i stedet for nederst) |
| Swiss Minimal | Tilføj mørk tilstand-variant: `#0a0a0a` baggrund med accent intakt, hvid tekst; datarækker overlever 1:1-beskæringen godt |
| Pixel Retro | Naturligt mørke baggrunde — NES/Arcade/CGA-forudindstillinger er allerede X-klare; reducer HUD-elementer 10 % for at rydde kantmasken |
| Brutalist | Sort bg-variant er allerede mørk-tilstand-nativ; den asymmetriske titelblok forbliver i øverste 60 %-zone som standard |
| Newspaper | Tilføj `#1a1a1a` baggrund mørk variant; flersektionslayoutet bør stables lodret for den firkantede beskæringszone |

## 5. Player-kort plakater

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

```html
<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](../og-image-generator/references/style-system-v3.md). Alle skabeloner fungerer til Twitter — bare ændr lærredshøjden til 675px.

| # | Stil | Mørk tilstand | X CTR-potentiale | Skabelon |
|---|-------|-----------|----------------|----------|
| 1 | Terminal / CLI | Altid mørk | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) |
| 2 | Magazine Editorial | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) |
| 3 | Swiss Minimal | Behov for variant | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) |
| 4 | Pixel Retro | Alle mørke | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) |
| 5 | Brutalist | Sort bg | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | Newspaper | Behov for variant | ★★★ | [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 | Mørk base | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) |
| 9 | Neo-Swiss Gradient | Lys | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) |
| 10 | Dark Gradient+Texture | Altid mørk | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | Text Overlay | Afhænger af bg | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | Cinematic | Mørkevenlig | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) |
| 13 | Collage | Varierer | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) |
| 14 | Risograph | Papirbase | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) |
| 15 | Vaporwave | Mørk neon | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) |
| 16 | Grunge | Faded mørk | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |

**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](../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

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

## FAQ

### Hvad er en Twitter Card-billedgenerator?

En Twitter Card-billedgenerator er et værktøj eller en færdighed, der opretter billeder, der er specifikt optimeret til X (Twitter) linkforhåndsvisninger. Disse billeder følger Twitters unikke billedformat (2:1, 1200x675 px) og designovervejelser, hvilket sikrer, at de vises korrekt og attraktivt, når et link deles på platformen.

### Hvordan adskiller denne generator sig fra en generisk Open Graph (OG)-billedgenerator?

Selvom den deler infrastruktur med OG-billedgeneratorer, tilpasser denne færdighed specifikt outputdimensioner til Twitters 1200x675 px (2:1) billedformat, inkorporerer X-specifikke designtilpasninger, tager hensyn til tidslinje-sikker zoneinddeling og understøtter player card-krav. Generiske OG-billeder er typisk 1200x630 px (1,91:1).

### Hvad er de anbefalede dimensioner for et Twitter Card-billede?

De anbefalede dimensioner for et Twitter Card-billede er 1200x675 pixels, hvilket giver et 2:1 billedformat. Dette sikrer, at billedet fylder kortet effektivt og undgår letterboxing.

### Kan jeg bruge SVG-billeder til Twitter Cards?

Nej, Twitter understøtter ikke SVG til kortbilleder. Du skal bruge PNG-, JPG- eller WebP-formater. Hvis du bruger en GIF, vises kun den første frame.

### Hvordan håndterer denne generator mørk tilstand for Twitter Card-billeder?

Generatoren tager højde for Twitters brug af mørk tilstand ved at foretrække stilarter med mørk baggrund eller levere varianter med mørk tilstand til skabeloner. Dette sikrer, at billeder smelter naturligt ind i tidslinjen i mørk tilstand og bevarer den visuelle appel for cirka 40 % af Twitter-brugerne.

### Hvad er den 'tidslinje-sikre zone', og hvorfor er den vigtig for Twitter Card-billeder?

Den 'tidslinje-sikre zone' henviser til de øverste 60 % af billedet, hvor kritisk indhold (titel, primært visuelt element) skal placeres. Dette er afgørende, fordi Twitter beskærer billeder til cirka 1:1 på mobile tidslinjer, indtil tweetet udvides, hvilket betyder, at indhold i de nederste 20 % kan blive skåret af.