# Twitter-kortbildegenerator agentferdighet

> Generer optimaliserte Twitter-kort (X) lenkeforhåndsvisningsbilder med korrekt 2:1 sideforhold og plattformspesifikke begrensninger. Denne ferdigheten sørger for at tweet-forhåndsvisningene dine ser perfekte ut, og hjelper deg med å fange publikums oppmerksomhet og øke engasjementet.

- Canonical: https://nanoskill.ai/nb/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/nb/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: nb
- 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-kortbildgeneratorferdigheten gir brukerne muligheten til å lage perfekt optimaliserte bilder for X (Twitter) lenkeforhåndsvisninger, og sikrer at innholdet deres gjør et sterkt visuelt inntrykk i tidslinjen. I motsetning til generiske Open Graph-bilder, tilpasser dette verktøyet seg spesifikt til Twitters unike 2:1 sideforhold (1200x675px) og plattformspesifikke gjengivelsessærheter, og hjelper innholdsskapere, markedsførere og utviklere med å forbedre sin tilstedeværelse på sosiale medier og drive engasjement.

Ved å utnytte seks forskjellige genereringstilnærminger og 16 allsidige visuelle stiler, gir ferdigheten omfattende alternativer for bildegenerering. Den inkluderer avanserte funksjoner som AI-bildegenerering for bakgrunner, innholdsbevisste arbeidsflyter og integrasjon av Satori/resvg-pipeline. Viktige designhensyn som kompatibilitet med mørk modus, beskjæring av mobil tidslinje og kantmaskering er innebygd, noe som sikrer at bilder er visuelt tiltalende og funksjonelle på tvers av alle brukeropplevelser.

Utover standard lenkeforhåndsvisninger støtter generatoren også opprettelsen av overbevisende plakatbilder for Twitter Player-kort, ideelt for video- og lydinnhold. Med integrerte YAML-kontroller og veiledning om vanlige feil kan brukerne trygt produsere høykvalitets Twitter-kortbilder som oppfyller tekniske spesifikasjoner og maksimerer klikkfrekvensen, noe som gjør delte lenker mer effektive og profesjonelle.

## Key features

- **Optimalisert for X (Twitter) lenkeforhåndsvisninger**: Generer bilder spesifikt utformet for Twitters 2:1-sideforhold (1200x675 piksler) og unike gjengivelsesatferder, og sørg for at innholdet ditt skiller seg ut i tidslinjen.
- **Seks genereringstilnærminger og 16 visuelle stiler**: Benytt seks forskjellige genereringsmetoder, inkludert AI-bildegenerering og innholdsbevisste arbeidsflyter, på tvers av 16 visuelle stiler for å lage varierte og engasjerende Twitter-kortbilder.
- **Tilpasninger for mørk modus og mobilbeskjæring**: Utform bilder som fungerer godt i Twitters mørke modus og overlever mobil-tidslinjebeskjæring, ved å plassere kritisk innhold i sikre soner for maksimal synlighet.
- **Generering av plakater for spillerkort**: Lag overbevisende plakatbilder for Twitter-spillerkort, komplett med overlegg for spillknapp og videotitler, for å lokke brukere til å engasjere seg i multimedia-innholdet ditt.
- **Omfattende valideringskontroller**: Dra nytte av innebygde YAML-kontroller som validerer bildedimensjoner, korttype, URL-format og designhensyn som tidslinje-sikre soner og mørk modus-kompatibilitet.

## Use cases

- **Generer Twitter-kortbilder for blogginnlegg**: Opprett automatisk visuelt tiltalende 1200x675 piksler Twitter-kortbilder for nye blogginnlegg, og sørg for at de ser profesjonelle og engasjerende ut når de deles på X.
- **Utform spillerkort-plakater for videoer**: Produser optimaliserte plakatbilder for videoinnholdet ditt som deles på Twitter, og oppmuntre til høyere klikkfrekvenser før videoen i det hele tatt spiller av.
- **Sikre mørk modus-kompatibilitet for sosiale delinger**: Tilpass eksisterende Open Graph-bilder eller generer nye med design tilpasset mørk modus, som garanterer at Twitter-kortbildene dine ser bra ut for alle brukere, uavhengig av skjerminnstillingene deres.

## Result preview

Utforsk et høytytende Twitter-kortbilde drevet av denne ferdigheten.

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

Legg til Twitter-kortbildgeneratorferdigheten til AI-agenten din.

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

Del innholdsdetaljene dine, merkeidentiteten din og den foretrukne visuelle retningen.

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

Lag et plattformoptimalisert Twitter-kortbilde med sterk visuell hierarki og engasjementsfokuserte 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-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](https://oginify.com) 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

| Egenskap | Spesifikasjon |
|----------|--------------|
| **Sideforhold** | 2:1 (offisielt); Twitter gjengir med ~1,91:1 i praksis |
| **Anbefalt** | 1200x675px (2:1); 1200x628px (kryssplattform med OG) |
| **Minimum** | 300x157px |
| **Maksimum** | 4096x4096px |
| **Filstørrelse** | Under 5 MB |
| **Formater** | JPG, PNG, WebP, GIF (bare første bilde); SVG støttes ikke |

**Korttype bestemmer bildevisning:**

| Korttype | Bildeatferd |
|-----------|---------------|
| `summary_large_image` | Fremtredende bilde i full bredde (anbefales for de fleste sider) |
| `summary` | Lite miniatyrbilde (100x100px kvadrat) |
| `player` | Video-/lydinnbygging; bildet er plakatrammen før avspilling |
| `app` | App-ikon; bildet er app-ikonet + kampanjebilde |

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.

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

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

| OG-mal | Twitter-tilpasning |
|-------------|-------------------|
| Terminal/CLI | Flytt vinduskrom lavere (Twitters avrundede hjørner klipper topp-venstre prikker); bruk aksentfargen for mørk modus-kontrast |
| Magazine Editorial | Bruk Midnight Ink-forhåndsinnstilling (mørk variant designet for X); flytt bildebrønnen høyere (topp 50 % i stedet for lavere) |
| Swiss Minimal | Legg til mørk modus-variant: `#0a0a0a` bakgrunn med aksent intakt, hvit tekst; datarader overlever 1:1-beskjæringen godt |
| Pixel Retro | Naturlig mørke bakgrunner — NES/Arcade/CGA-forhåndsinnstillinger er allerede X-klare; forminsk HUD-elementer med 10 % for å unngå kantmasker |
| Brutalist | Svart bg-variant er allerede innebygd for mørk modus; den asymmetriske tittelblokken holder seg i øvre 60 %-sone som standard |
| Newspaper | Legg til `#1a1a1a` bakgrunn mørk variant; flerseksjonslayouten bør stables vertikalt for den kvadratiske beskæringssonen |

## 5. Spillerkortplakater

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

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

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](../og-image-generator/references/style-system-v3.md). Alle maler fungerer for Twitter — bare endre lerretshøyden til 675px.

| # | Stil | Mørk modus | X CTR-potensial | Mal |
|---|-------|-----------|----------------|----------|
| 1 | Terminal / CLI | Alltid 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 | Trenger 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 | Svart bg | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | Newspaper | Trenger 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 | Alltid mørk | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | Text Overlay | Avhenger av bg | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | Cinematic | Mørkevennlig | ★★★ | [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 | Falmet mørk | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |

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

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

## FAQ

### Hva er en Twitter-kort-bildegenerator?

En Twitter-kort-bildegenerator er et verktøy eller en ferdighet som lager bilder spesifikt optimalisert for X (Twitter) lenkeforhåndsvisninger. Disse bildene overholder Twitters unike sideforhold (2:1, 1200x675 piksler) og designhensyn, og sikrer at de vises korrekt og attraktivt når en lenke deles på plattformen.

### Hvordan skiller denne generatoren seg fra en generisk Open Graph (OG)-bildegenerator?

Selv om den deler infrastruktur med OG-bildegeneratorer, tilpasser denne ferdigheten spesifikt utdata-dimensjoner til Twitters 1200x675 piksler (2:1) sideforhold, innlemmer X-spesifikke designtilpasninger, tar hensyn til tidslinje-sikker soning, og støtter spillerkortkrav. Generiske OG-bilder er vanligvis 1200x630 piksler (1,91:1).

### Hva er de anbefalte dimensjonene for et Twitter-kortbilde?

De anbefalte dimensjonene for et Twitter-kortbilde er 1200x675 piksler, som gir et sideforhold på 2:1. Dette sikrer at bildet fyller kortet effektivt og unngår letterboxing.

### Kan jeg bruke SVG-bilder for Twitter-kort?

Nei, Twitter støtter ikke SVG for kortbilder. Du bør bruke PNG-, JPG- eller WebP-format. Hvis du bruker en GIF, vil bare den første rammen vises.

### Hvordan håndterer denne generatoren mørk modus for Twitter-kortbilder?

Generatoren tar hensyn til Twitters bruk av mørk modus ved å foretrekke stiler med mørk bakgrunn eller å tilby varianter for mørk modus for maler. Dette sikrer at bilder blander seg naturlig inn i tidslinjen for mørk modus og opprettholder visuell appell for omtrent 40 % av Twitter-brukere.

### Hva er 'tidslinje-sikker sone', og hvorfor er det viktig for Twitter-kortbilder?

Den 'tidslinje-sikre sonen' refererer til de øverste 60 % av bildet der kritisk innhold (tittel, primærvissuelt) bør plasseres. Dette er avgjørende fordi Twitter beskjærer bilder til omtrent 1:1 på mobile tidslinjer inntil tweeten utvides, noe som betyr at innhold i de nederste 20 % kan bli kuttet av.