Twitter Cards
Add or fix X (Twitter) link-preview meta tags so shared URLs show the right title, image, and description.
Overview
Twitter-cards is an agent skill for the Launch phase that guides Twitter Card meta tags for X link previews.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill twitter-cardsWhat is this skill?
- Documents four card types: summary, summary_large_image (recommended), app, and player
- Recommends summary_large_image at 1200×675px with full twitter:title, description, image, and site tags
- Clarifies X falls back to Open Graph when Twitter tags are missing—pair with open-graph for full coverage
- HTML snippets for recommended summary_large_image implementation
- Trigger phrases: twitter:card, twitter:image, tweet preview, X preview
- 4 documented card types
- 1200×675px recommended large image
Adoption & trust: 759 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your links look wrong or generic on X because twitter:card, image, and title tags are missing, mis-sized, or only Open Graph is set.
Who is it for?
Solo builders shipping landing pages, blogs, or marketing sites who want large-image tweet previews without researching card types from scratch.
Skip if: Facebook or LinkedIn-only Open Graph work without X—use the open-graph skill instead; mobile app install cards unless you need app or player card types.
When should I use this skill?
User wants Twitter Card metadata, mentions twitter:card, twitter:image, X preview, or tweet preview; use open-graph for Facebook/LinkedIn-only work.
What do I get? / Deliverables
You get validated Twitter Card markup (especially summary_large_image) aligned with X preview requirements, ready to ship with optional open-graph tags for other networks.
- Recommended twitter:card type and HTML meta block
- Checklist against summary_large_image tag set
Recommended Skills
Journey fit
Twitter Cards sit on launch SEO and social distribution—metadata you ship with pages before and after go-live. Canonical shelf is on-page SEO and share metadata alongside Open Graph, not app-store ASO or paid distribution.
How it compares
On-page meta guidance for X previews, not an MCP server or analytics dashboard.
Common Questions / FAQ
Who is twitter-cards for?
Indie builders and small teams using AI coding agents to implement or audit head metadata before sharing URLs on X.
When should I use twitter-cards?
During launch SEO when adding share metadata, after deploy when tweet previews break, or whenever you mention Twitter Card, twitter:image, or X preview in a repo task.
Is twitter-cards safe to install?
Review the Security Audits panel on this Prism page for install risk and upstream maintenance; the skill itself outputs HTML/meta guidance rather than running shell on your machine.
SKILL.md
READMESKILL.md - Twitter Cards
# SEO On-Page: Twitter Cards Guides implementation of Twitter Card meta tags for X (Twitter) link previews. Twitter falls back to Open Graph if Twitter-specific tags are missing; add both for best results. **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Scope (Social Sharing) - **Twitter Cards**: X-specific meta tags; control how links appear when shared on X/Twitter ## Card Types | Type | Use case | |------|----------| | **summary** | Small card with thumbnail | | **summary_large_image** | Large prominent image (recommended; 1200×675px) | | **app** | Mobile app promotion | | **player** | Video/audio content | ## Recommended Tags (summary_large_image) ```html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your Title"> <meta name="twitter:description" content="Your description"> <meta name="twitter:image" content="https://example.com/image.jpg"> <meta name="twitter:site" content="@yourusername"> <meta name="twitter:creator" content="@authorusername"> <meta name="twitter:image:alt" content="Alt text for image"> ``` | Tag | Guideline | |-----|-----------| | **twitter:card** | Required; `summary_large_image` for most pages | | **twitter:title** | Max 70 chars; concise title | | **twitter:description** | Max 200 chars; summary | | **twitter:image** | Absolute URL; unique per page | | **twitter:site** | @username of website | | **twitter:creator** | @username of content creator | | **twitter:image:alt** | Alt text; max 420 chars; accessibility | ## Image Requirements | Item | Guideline | |------|-----------| | **Aspect ratio** | 2:1 | | **Minimum** | 300×157 px | | **Recommended** | 1200×675 px | | **Max** | 4096×4096 px | | **File size** | Under 5MB | | **Formats** | JPG, PNG, WebP, GIF (first frame only); SVG not supported | ## Common Mistakes - Missing Twitter Card tags (Twitter won't display images properly without them) - Using relative image URLs instead of absolute https:// - Images too small or wrong aspect ratio - Title/description too long (gets truncated) ## Implementation ### Next.js (App Router) ```tsx export const metadata = { twitter: { card: 'summary_large_image', title: '...', description: '...', images: ['https://example.com/twitter.jpg'], site: '@yourusername', creator: '@authorusername', }, }; ``` ### HTML (generic) ```html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your Title"> <meta name="twitter:description" content="Your description"> <meta name="twitter:image" content="https://example.com/image.jpg"> <meta name="twitter:site" content="@yourusername"> <meta name="twitter:image:alt" content="Alt text"> ``` ## Testing - **X (Twitter)**: [Card Validator](https://cards-dev.twitter.com/validator) ## Related Skills - **social-share-generator**: Share buttons use Twitter Cards for X previews when users share; Cards must be set for share buttons to show proper previews - **open-graph**: OG tags; Twitter falls back to OG if Twitter tags missing - **title-tag**: Title tag often mirrors twitter:title - **meta-description**: Meta description often mirrors twitter:description - **page-metadata**: Hreflang, other meta tags - **twitter-x-posts**: X post copy and engagement (different from link previews) - **twitter-card-image-generator**: Programmatic Twitter Card image generation — 1200×675px, 2:1 ratio, player card posters, dark mode adaptations for ~40% of X