{"slug":"twitter-cards","title":"twitter-cards","summary":"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.","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-25T17:49:58.751534Z","repo":{"url":"https://github.com/kostja94/marketing-skills","stars":993,"forks":138,"license":"MIT","updatedAt":"2026-09-25T09:13:43Z"},"bodyHtml":"<hr>\n<h2>name: twitter-cards\ndescription: 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.\nmetadata:\nversion: 1.1.0</h2>\n<h1>SEO On-Page: Twitter Cards</h1>\n<p>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.</p>\n<p><strong>When invoking</strong>: On <strong>first use</strong>, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On <strong>subsequent use</strong> or when the user asks to skip, go directly to the main output.</p>\n<h2>Scope (Social Sharing)</h2>\n<ul>\n<li><strong>Twitter Cards</strong>: X-specific meta tags; control how links appear when shared on X/Twitter</li>\n</ul>\n<h2>Card Types</h2>\n<table>\n<thead>\n<tr>\n<th>Type</th>\n<th>Use case</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>summary</strong></td>\n<td>Small card with thumbnail</td>\n</tr>\n<tr>\n<td><strong>summary_large_image</strong></td>\n<td>Large prominent image (recommended; 1200×675px)</td>\n</tr>\n<tr>\n<td><strong>app</strong></td>\n<td>Mobile app promotion</td>\n</tr>\n<tr>\n<td><strong>player</strong></td>\n<td>Video/audio content</td>\n</tr>\n</tbody>\n</table>\n<h2>Recommended Tags (summary_large_image)</h2>\n<pre><code>&lt;meta name=\"twitter:card\" content=\"summary_large_image\"&gt;\n&lt;meta name=\"twitter:title\" content=\"Your Title\"&gt;\n&lt;meta name=\"twitter:description\" content=\"Your description\"&gt;\n&lt;meta name=\"twitter:image\" content=\"https://example.com/image.jpg\"&gt;\n&lt;meta name=\"twitter:site\" content=\"@yourusername\"&gt;\n&lt;meta name=\"twitter:creator\" content=\"@authorusername\"&gt;\n&lt;meta name=\"twitter:image:alt\" content=\"Alt text for image\"&gt;\n</code></pre>\n<table>\n<thead>\n<tr>\n<th>Tag</th>\n<th>Guideline</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>twitter:card</strong></td>\n<td>Required; <code>summary_large_image</code> for most pages</td>\n</tr>\n<tr>\n<td><strong>twitter:title</strong></td>\n<td>Max 70 chars; concise title</td>\n</tr>\n<tr>\n<td><strong>twitter:description</strong></td>\n<td>Max 200 chars; summary</td>\n</tr>\n<tr>\n<td><strong>twitter:image</strong></td>\n<td>Absolute URL; unique per page</td>\n</tr>\n<tr>\n<td><strong>twitter:site</strong></td>\n<td>@username of website</td>\n</tr>\n<tr>\n<td><strong>twitter:creator</strong></td>\n<td>@username of content creator</td>\n</tr>\n<tr>\n<td><strong>twitter:image:alt</strong></td>\n<td>Alt text; max 420 chars; accessibility</td>\n</tr>\n</tbody>\n</table>\n<h2>Image Requirements</h2>\n<table>\n<thead>\n<tr>\n<th>Item</th>\n<th>Guideline</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>Aspect ratio</strong></td>\n<td>2:1</td>\n</tr>\n<tr>\n<td><strong>Minimum</strong></td>\n<td>300×157 px</td>\n</tr>\n<tr>\n<td><strong>Recommended</strong></td>\n<td>1200×675 px</td>\n</tr>\n<tr>\n<td><strong>Max</strong></td>\n<td>4096×4096 px</td>\n</tr>\n<tr>\n<td><strong>File size</strong></td>\n<td>Under 5MB</td>\n</tr>\n<tr>\n<td><strong>Formats</strong></td>\n<td>JPG, PNG, WebP, GIF (first frame only); SVG not supported</td>\n</tr>\n</tbody>\n</table>\n<h2>Common Mistakes</h2>\n<ul>\n<li>Missing Twitter Card tags (Twitter won't display images properly without them)</li>\n<li>Using relative image URLs instead of absolute https://</li>\n<li>Images too small or wrong aspect ratio</li>\n<li>Title/description too long (gets truncated)</li>\n</ul>\n<h2>Implementation</h2>\n<h3>Next.js (App Router)</h3>\n<pre><code>export const metadata = {\n  twitter: {\n    card: 'summary_large_image',\n    title: '...',\n    description: '...',\n    images: ['https://example.com/twitter.jpg'],\n    site: '@yourusername',\n    creator: '@authorusername',\n  },\n};\n</code></pre>\n<h3>HTML (generic)</h3>\n<pre><code>&lt;meta name=\"twitter:card\" content=\"summary_large_image\"&gt;\n&lt;meta name=\"twitter:title\" content=\"Your Title\"&gt;\n&lt;meta name=\"twitter:description\" content=\"Your description\"&gt;\n&lt;meta name=\"twitter:image\" content=\"https://example.com/image.jpg\"&gt;\n&lt;meta name=\"twitter:site\" content=\"@yourusername\"&gt;\n&lt;meta name=\"twitter:image:alt\" content=\"Alt text\"&gt;\n</code></pre>\n<h2>Testing</h2>\n<ul>\n<li><strong>X (Twitter)</strong>: <a href=\"https://cards-dev.twitter.com/validator\">Card Validator</a></li>\n</ul>\n<h2>Related Skills</h2>\n<ul>\n<li><strong>social-share-generator</strong>: Share buttons use Twitter Cards for X previews when users share; Cards must be set for share buttons to show proper previews</li>\n<li><strong>open-graph</strong>: OG tags; Twitter falls back to OG if Twitter tags missing</li>\n<li><strong>title-tag</strong>: Title tag often mirrors twitter:title</li>\n<li><strong>meta-description</strong>: Meta description often mirrors twitter:description</li>\n<li><strong>page-metadata</strong>: Hreflang, other meta tags</li>\n<li><strong>twitter-x-posts</strong>: X post copy and engagement (different from link previews)</li>\n<li><strong>twitter-card-image-generator</strong>: 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.</li>\n</ul>\n","files":[{"path":"SKILL.md","sizeBytes":4221,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-25T17:53:15.4922Z","sha256":"532AAA038200BD74630B8445F24E9DE7BFCE65B050706E94E5F7A4F40EAC8E03","sizeBytes":1838},"review":null,"source":{"repositoryUrl":"https://github.com/kostja94/marketing-skills","path":"skills/seo/on-page/twitter-cards","license":"MIT","commit":"26cef3434274129040dcfc64e9c7be85ba1ada15","subtreeSha":"FC43562625EA31922BF49121CF273EBC2B3526414738561F4272CFBF9FDDD1D0","lastSyncedAt":"2026-09-25T17:49:34.679591Z"},"reviewedAt":"2026-09-25T17:59:44.037698Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/twitter-cards"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install kostja94-marketing-skills@llmmart"},{"target":"git","command":"git clone https://github.com/kostja94/marketing-skills.git"}]}