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)