How do I install the Twitter Cards skill?

Run npx skillmds@latest add bg-szy/twitter-cards in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Twitter Cards safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Twitter Cards?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Twitter Cards free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Twitter Cards?

bg-szy (@bg-szy) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Twitter Cards by bg-szy — Agent Skill

Name: Twitter Cards
Author: bg-szy

Twitter Cards

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.

bg-szy Updated Sep 17, 2026

File contents

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)

---name: twitter-cardsdescription: 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.---# SEO On-Page: Twitter CardsGuides 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)```tsxexport 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)

Frequently asked questions