SKILL.md
$27
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)