Add Twitter Card meta tags
Validates Twitter (X) Card meta tags for correct card type, image dimensions, and required fields.
- 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
Rule Details
Twitter Cards (now X Cards) control how your page appears when shared as a link on the X platform. Without them, shared links appear as plain text URLs.
Code Example
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Article Title">
<meta name="twitter:description" content="A brief description under 200 characters.">
</head>Why It Matters
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.
Card Types
| Type | Description | Best For |
|---|---|---|
summary | Square thumbnail (200×200 min), title, description | Profiles, products |
summary_large_image | Large landscape image (1200×630), title, description | Articles, blog posts |
app and player card types exist for mobile apps and video, but are less commonly needed.
Full Recommended Implementation
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourBrand">
<meta name="twitter:creator" content="@AuthorHandle">
<meta name="twitter:title" content="How to Improve Core Web Vitals">
<meta name="twitter:description" content="Practical steps to improve LCP, CLS, and INP for better search ranking.">
<meta name="twitter:image" content="https://example.com/images/article-cover.jpg">
<meta name="twitter:image:alt" content="Screenshot of a PageSpeed Insights score of 98">
</head>Open Graph Fallback
If Twitter-specific tags are absent, X reads Open Graph tags:
<!-- These are read by X if twitter: tags are missing -->
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">Best practice: provide both og: and twitter: tags for maximum compatibility.
Image Requirements
summary_large_image: minimum 300×157 px, recommended 1200×630 px, max 5 MBsummary: minimum 144×144 px, recommended 400×400 px, max 5 MB- Formats: JPG, PNG, WebP, GIF (static only for cards)
- Image URL must be absolute, using a full HTTPS URL rather than a relative path
❌ Common Mistakes
<!-- Wrong: missing twitter:card — no card will render -->
<meta name="twitter:title" content="My Page">
<!-- Wrong: relative image URL -->
<meta name="twitter:image" content="/images/cover.jpg">
<!-- Wrong: invalid card type -->
<meta name="twitter:card" content="large_image">Exceptions
- Utility or intentionally noindex pages may keep minimal metadata when richer search presentation is not a goal.
- Template-driven pages can look repetitive in isolation; confirm the fully rendered production output before flagging duplication or omission.
- If a page is intentionally redirected or excluded from indexation, resolve that crawlability decision before treating metadata polish as the primary issue.
Verification
Automated Checks
- Inspect rendered HTML and HTTP headers with a crawler, validator, or curl-based check against representative live URLs.
Manual Checks
- Review representative live pages manually and confirm there is no stronger conflicting signal that changes the intended SEO outcome.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
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
Auto-fix issues
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
Learn more
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.
Review
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.