Add Twitter Card meta tags
SkillDev toolsTwitter Cards is a skill for AI agents that audits and fixes how pages look when shared on X (Twitter). It checks a page's head for the required meta tags, explains what is missing, and guides adding social meta tags so shared links show an image and description instead of a bare link.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load skills, and a page or site intended to be shared on X.
Then ask your AI: use the Add Twitter Card meta tags skill
What your AI can do with it
- Inspect a page's <head> for twitter:card, twitter:title, twitter:description, and twitter:
- Verify the card type is a valid value (summary or summary_large_image)
- Add required Twitter Card meta tags to a page's <head>
- Check twitter:image points to an absolute URL, at least 300×157 px (ideally 1200×630 px),
- Explain the difference between summary and summary_large_image and Open Graph fallback
- Review metadata generation, rendered HTML, structured data, and response headers, flagging
Getting started
- Have an agent that can load skills, and a page or site intended to be shared on X.
- Add the twitter-cards skill to the agent's available skills.
- Ask the agent to audit the page's social sharing preview or add social meta tags to a new site.
- Apply the agent's suggested meta tag changes to the page's <head> and test the URL in the X Card Validator.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/twitter-cards/SKILL.md and read by ahel’s review.
Pages shared on X without Twitter Cards show only a bare link; Cards add an image and description that significantly increase click-through rates from social traffic.
Quick Reference
- Add
<meta name="twitter:card" content="summary_large_image">to enable rich previews when shared on X (Twitter) - Minimum required tags:
twitter:card,twitter:title,twitter:description - X falls back to Open Graph tags (
og:title,og:image) if Twitter-specific tags are absent - Recommended image size for
summary_large_image: 1200×630 px, max 5 MB, JPG/PNG/WebP
Check
Inspect <head> for <meta name="twitter:card">, <meta name="twitter:title">, <meta name="twitter:description">, and <meta name="twitter:image">. Verify the card type is valid (summary or summary_large_image). Test the URL in the X Card Validator.
Fix
Add the required Twitter Card meta tags to the <head>. For article/blog pages use summary_large_image. Ensure twitter:image points to an absolute URL of an image at least 300×157 px (ideally 1200×630 px) under 5 MB.
Explain
Explain how Twitter Cards enhance shared links, the difference between summary and summary_large_image card types, and how X falls back to Open Graph tags.
Code Review
Review metadata generation, rendered HTML, structured data, and response headers related to Add Twitter Card meta tags. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/seo/twitter-cards
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What does the skill do when a page has no Twitter-specific tags?
- It notes that X falls back to Open Graph tags (og:title, og:image) if Twitter-specific tags are absent, and can guide adding the Twitter tags themselves.
- What image should be used for summary_large_image?
- An absolute URL pointing to an image at least 300×157 px, ideally 1200×630 px, under 5 MB, in JPG, PNG, or WebP format.
- How do I verify the final page output?
- Inspect the rendered <head> for the required meta tags, confirm the card type is summary or summary_large_image, and test the URL in the X Card Validator.
Advanced
- Item type
- skill
- Key
twitter-cards-thedaviddias- Source
- github.com/thedaviddias/front-end-checklist