twitter-cards

When the user wants to add, audit, implement, or optimize Twitter Card metadata for X link previews, including twitter:card, twitter:title, twitter:description, twitter:image, or X previews. For a full metadata lifecycle use page-metadata; for broader social previews use open-graph.

1,065
installs: 0 up / 0 down, score 0.00
votes: 1,058
repo stars
Updated: less than a month ago
In the catalog since: 6 Oct 2026
From: kostja94/marketing-skills

Get it through your agent npx skills add kostja94/marketing-skills@twitter-cards

Skill instructions

Rendered from the published SKILL.md, 101 lines.

SEO On-Page: Twitter Cards

Owns X/Twitter Card writing and implementation rules. page-metadata owns the full-page lifecycle and release verification. Platforms may use Open Graph fallbacks, so define X-specific copy only when it adds value.

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	Concise social title; same page identity as SEO/OG copy, not necessarily identical text
twitter:description	Accurate social summary without unsupported claims
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	Use a high-resolution image suited to the selected card and verify current platform behavior
Delivery	Absolute HTTPS URL with a successful image response
Format and size	Verify against current X documentation when implementation depends on exact limits

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)
Mechanically copying SEO copy when the share context needs different wording
Changing the product identity or promise between SEO, OG, and X metadata

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

Inspect the deployed initial HTML and test an actual share/preview workflow available to the current X product. Do not depend on the retired public Card Validator as a release gate. Allow for cached previews.

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, meta-description: Search copy; may differ while preserving page identity
page-metadata: Full lifecycle, source-of-truth implementation, and production validation
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.

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "twitter-cards"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository kostja94/marketing-skills
Listing on skills.sh

From kostja94/marketing-skills via skills.sh

Related skills

open-graph
When the user wants to add, audit, implement, or optimize Open Graph metadata for social sharing, including og:title, og:description, og:image, og:url, Facebook previews, LinkedIn previews, or social share previews. For a full metadata lifecycle use page-metadata; for X-specific previews use twitter-cards.
1,180 installs
page-metadata
When the user wants a full-page metadata audit or implementation across discovery, search intent, title, description, canonical, robots, hreflang, Open Graph, Twitter Cards, code or CMS changes, build validation, rendered HTML, production verification, localization, or post-release observation. Also use for "metadata audit," "sitewide meta optimization," "metadata implementation," "meta robots," "hreflang," "viewport," or "charset." For an isolated title, description, heading, Open Graph, or Twitter Card task, use its specialist skill directly.
1,108 installs
social-x-post-card
Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
2,554 installs
card-twitter
Twitter quote or data card designed to pair with a post.
2,569 installs
twitter-algorithm-optimizer
Analyze and optimize tweets for maximum reach using Twitter's open-source algorithm insights. Rewrite and edit user tweets to improve engagement and visibility based on how the recommendation system ranks content.
4,895 installs

More from kostja94/marketing-skills

copywriting
When the user wants to write or optimize short-form marketing copy—headlines, CTAs, ad copy, landing page copy, email copy. Also use when the user mentions "copywriting," "headline," "CTA copy," "ad copy," "landing page copy," "sales copy," "conversion copy," "PAS," "AIDA," "BAB," "copy formula," or "differentiation." For long-form article bodies (blog posts, guides), use article-content.
3,896 installs
linkedin-posts
When the user wants to create LinkedIn post copy or optimize for LinkedIn. Also use when the user mentions "LinkedIn post," "LinkedIn article," "professional post," "post to LinkedIn," "LinkedIn content," "LinkedIn copy," "B2B LinkedIn," "LinkedIn engagement," "LinkedIn feed," "share box," "document post," "poll," "Newsletter," "reshare," or "LinkedIn marketing." For LinkedIn ads, use linkedin-ads.
3,561 installs
youtube-seo
When the user wants to optimize YouTube videos for search, create video descriptions, or improve channel visibility. Also use when the user mentions "YouTube SEO," "YouTube description," "YouTube tags," "YouTube thumbnail," "YouTube title," "YouTube channel," or "video SEO." For YouTube ads, use youtube-ads.
3,374 installs
video-marketing
When the user wants to plan video marketing, create video scripts, or optimize for short-form or long-form video. Also use when the user mentions "video marketing," "video script," "short-form video," "long-form video," "TikTok script," "Reels script," "YouTube script," "video hook," or "video content strategy." For on-site video SEO, use video-optimization.
3,080 installs
tiktok-captions
When the user wants to create TikTok video captions, scripts, or optimize for TikTok. Also use when the user mentions "TikTok post," "TikTok caption," "TikTok video," "post to TikTok," "TikTok script," "TikTok content," "TikTok copy," "TikTok hashtags," or "TikTok marketing." For TikTok ads, use tiktok-ads.
2,776 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.