How to install twitter-cards
npx skills add https://github.com/kostja94/marketing-skills --skill twitter-cardsFull instructions (SKILL.md)
Source of truth, from kostja94/marketing-skills.
name: twitter-cards description: When the user wants to add or optimize Twitter Card metadata for X (Twitter) link previews. Also use when the user mentions "Twitter Card," "twitter:card," "twitter:image," "twitter:title," "X preview," or "tweet preview." For Facebook/LinkedIn previews, use open-graph. metadata: version: 1.1.0
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)
<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)
export const metadata = {
twitter: {
card: 'summary_large_image',
title: '...',
description: '...',
images: ['https://example.com/twitter.jpg'],
site: '@yourusername',
creator: '@authorusername',
},
};
HTML (generic)
<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
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 users, timeline-safe zone design for mobile 1:1 crop, all 6 visual styles from og-image-generator. This skill covers how to SET the twitter:image tag; twitter-card-image-generator covers how to CREATE the image.
Related skills
More from kostja94/marketing-skills and the wider catalog.
twitter-x-posts
Generate publish-ready X (Twitter) posts, threads, and optimized copy for maximum engagement.
url-slug-generator
When the user wants to create, optimize, or validate URL slugs for content pages. Also use when the user mentions "URL slug," "URL path," "blog URL," "article URL," "short URL," "clean slug," "permalink," "slug optimization," "URL structure," "SEO-friendly URL," "create URL slug," or "SEO slug." For site-wide URL policy, use url-structure.
url-structure
When the user wants to optimize URL structure, fix URL issues, or plan URL hierarchy. Also use when the user mentions "URL structure," "URL optimization," "slug," "clean URLs," "URL hierarchy," "URL path," "permalink structure," "URL best practices," "dynamic URLs," or "URL parameters." For per-page slug wording, use url-slug-generator. For canonical consolidation, use canonical-tag.
use-cases-page-generator
When the user wants to create, optimize, or audit use case pages. Also use when the user mentions "use cases," "use case page," "for [role]," "by persona," "by scenario," "by business goal," "ICP pages," or "audience-specific pages." For sitewide page planning, use website-structure.
video-marketing
Plan video marketing strategy, write scripts for short-form and long-form content, and optimize hooks for platform engagement.
video-optimization
When the user wants to optimize videos for Google Search, video sitemap, VideoObject schema, or video SEO on websites. Also use when the user mentions "video SEO," "video sitemap," "VideoObject," "video thumbnail," "video indexing," "video preview," "key moments," "Clip schema," or "embedded video optimization." For page template, use article-page-generator.