Twitter Card Meta Tags: Complete Guide with Code Examples (2026) — share-preview.com

Everything about Twitter Card meta tags (X cards): all 4 types explained, copy-paste code examples, how they differ from OG tags, image size requirements, and how to validate them.

Twitter Card Guide Updated February 2026 · 10 min read

Twitter Card Meta Tags: Complete Guide with Code Examples (2026)

Twitter Card meta tags (now called X Card tags) control how your URLs appear when shared on X (Twitter). Without them, your links show a bland text-only preview. With the right tags, you get a rich card with a headline, description, and image that drives clicks. This guide covers all four card types, copy-paste code examples, how they relate to Open Graph tags, image requirements, and how to validate everything before going live.

Table of Contents
  1. What are Twitter Card meta tags?
  2. The 4 types of Twitter Cards
  3. Complete tag reference with code examples
  4. Twitter meta tags vs Open Graph tags
  5. Image size requirements
  6. Common mistakes and fixes
  7. How to validate your Twitter Card
  8. Implementation guides: WordPress, Next.js, plain HTML

1. What are Twitter Card meta tags?

When someone shares a URL on X (formerly Twitter), the platform's crawler fetches the page and looks for specific HTML meta tags to build a preview card. Those tags are Twitter Card meta tags — HTML snippets that live inside your page's <head> element.

Despite the platform rebranding to X in 2023, the tag names still use the twitter: prefix and haven't changed. twitter:card, twitter:title, twitter:image — these remain the correct attribute names. Don't update them to x: — that doesn't work.

Key insight: X falls back to Open Graph tags when Twitter-specific tags are absent — so if you already have OG tags, your cards already work at a basic level. But explicitly setting twitter:card gives you control over the card type, which is the most impactful single tag you can add.

Twitter Cards display differently depending on the card type you choose. A summary_large_image card fills the full tweet width with your image and is far more eye-catching than a small summary card. Getting the type right doubles your click-through rate.

2. The 4 types of Twitter Cards

X supports four card types. Only one is relevant for most websites — the other three have narrow use cases.

Card Type Value Best For Image Display
Summary summary Blog posts, articles, homepages Small square thumbnail (left-aligned)
Summary Large Image summary_large_image Articles, news, landing pages Large 2:1 image above text (full-width)
App app Mobile app download pages App icon + App Store/Play Store links
Player player Video and audio content Embedded media player in the tweet

Which type should you use? For 95% of websites, the answer is summary_large_image. It's the most visually impactful, it works for blogs, landing pages, product pages, and documentation. The large image format consistently outperforms the small thumbnail summary card in click-through tests.

Use summary if you don't have a strong hero image or if your content is predominantly text-based (e.g., a changelog or a short note). Use app only if your primary goal is app downloads. player requires approval from X and is only worth pursuing for dedicated video/podcast platforms.

3. Complete Tag Reference with Code Examples

Summary Large Image Card (recommended for most sites)

<!-- Twitter Card: Summary Large Image -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title Here">
<meta name="twitter:description" content="A 1–2 sentence description of your page. Keep it under 200 characters.">
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png">
<meta name="twitter:image:alt" content="Descriptive alt text for the image">
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:creator" content="@AuthorHandle">

Summary Card (small thumbnail)

<!-- Twitter Card: Summary -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Your Page Title Here">
<meta name="twitter:description" content="A 1–2 sentence description. Shown to the right of the thumbnail.">
<meta name="twitter:image" content="https://yourdomain.com/images/icon-400x400.png">
<meta name="twitter:image:alt" content="Company logo">
<meta name="twitter:site" content="@YourTwitterHandle">

App Card

<!-- Twitter Card: App -->
<meta name="twitter:card" content="app">
<meta name="twitter:title" content="Your App Name">
<meta name="twitter:description" content="Short app description. What it does and why people should download it.">
<meta name="twitter:site" content="@YourHandle">
<meta name="twitter:app:name:iphone" content="Your App">
<meta name="twitter:app:id:iphone" content="123456789">
<meta name="twitter:app:url:iphone" content="yourapp://content/path">
<meta name="twitter:app:name:googleplay" content="Your App">
<meta name="twitter:app:id:googleplay" content="com.yourcompany.app">
<meta name="twitter:app:url:googleplay" content="yourapp://content/path">

Player Card

<!-- Twitter Card: Player -->
<meta name="twitter:card" content="player">
<meta name="twitter:title" content="Video or Podcast Title">
<meta name="twitter:description" content="Description of the video or audio content.">
<meta name="twitter:image" content="https://yourdomain.com/images/video-thumbnail.png">
<meta name="twitter:site" content="@YourHandle">
<meta name="twitter:player" content="https://yourdomain.com/embed/video-id">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="270">

Complete Tag Reference

Tag Status Description Max Length
twitter:card Required Card type. One of: summary, summary_large_image, app, player —
twitter:title Required Title of the content (falls back to og:title) 70 chars
twitter:description Recommended Description (falls back to og:description) 200 chars
twitter:image Recommended Absolute URL of image (falls back to og:image) 5MB file max
twitter:image:alt Optional Alt text for the image (accessibility) 420 chars
twitter:site Optional Your website's X/Twitter handle (e.g. @yourbrand) —
twitter:creator Optional Author's X/Twitter handle —
twitter:domain Optional Domain shown in card footer (e.g. yourdomain.com) —

4. Twitter Meta Tags vs Open Graph Tags

Both Open Graph tags and Twitter Card tags live in your <head> and control social preview cards — but for different platforms. Here's how they relate:

Twitter Tag OG Fallback Notes
twitter:title og:title X uses og:title if twitter:title is absent
twitter:description og:description X uses og:description if twitter:description is absent
twitter:image og:image X uses og:image if twitter:image is absent
twitter:card No OG equivalent Must be set explicitly — no fallback exists
twitter:site No OG equivalent Twitter-specific; no OG fallback

The practical upshot: If you already have proper OG tags, you only need to add twitter:card to get a great X preview. The rest of the Twitter tags are optional optimisations — useful when you want the X card to show different text than what you use for Facebook or LinkedIn.

When to use separate Twitter tags: Set separate twitter:title and twitter:description when you want to A/B test different copy for X versus other platforms, or when your OG title is too long for X's 70-character limit.

The recommended approach is to set both OG and Twitter tags, keeping them in sync unless you have a specific reason to differentiate. Here's the full combined template most developers use:

<!-- Open Graph (Facebook, LinkedIn, WhatsApp, Slack) -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description, under 200 characters.">
<meta property="og:image" content="https://yourdomain.com/og-image.png">
<meta property="og:url" content="https://yourdomain.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">

<!-- Twitter / X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description, under 200 characters.">
<meta name="twitter:image" content="https://yourdomain.com/og-image.png">
<meta name="twitter:image:alt" content="Image description for accessibility">
<meta name="twitter:site" content="@yourbrand">

5. Image Size Requirements

Getting the image right is the most common place developers go wrong. X is strict about image dimensions and file sizes.

Card Type Minimum Size Recommended Size Aspect Ratio Max File Size Formats
summary_large_image 300×157px 1200×628px 2:1 5MB JPG, PNG, WebP, GIF
summary 144×144px 400×400px 1:1 (square) 5MB JPG, PNG, WebP, GIF
player 68×68px 1200×628px Variable 5MB JPG, PNG, WebP

Critical image rules that trip people up:

  • Absolute URLs only. Your twitter:image must start with https://. Relative paths (/images/og.png) don't work — the X bot can't resolve them without your domain.
  • Image must be publicly accessible. Password-protected pages, localhost URLs, and corporate VPN-only servers all fail. The X crawler hits your server from Twitter's IP addresses.
  • X crops to 2:1 for summary_large_image. Keep important content (logos, faces, text) in the centre of the image, away from the edges that may be cropped on mobile.
  • GIFs are supported but play as static. X does not animate GIFs in Card previews. If you use a GIF, only the first frame shows.
  • SVGs are not supported. Convert to PNG or JPG for OG/Twitter images.
  • Image must be under 5MB. Compress your OG images — 1200×628 should be well under 300KB when properly compressed.

6. Common Mistakes and Fixes

These are the most frequent Twitter Card errors seen when validating thousands of URLs:

Mistake Symptom Fix
Missing twitter:card No card appears, just a text URL Add <meta name="twitter:card" content="summary_large_image">
Relative image URL Card shows no image or broken image icon Change /images/og.png to https://yourdomain.com/images/og.png
Image too small Card degrades to summary type automatically Use minimum 300×157px; recommend 1200×628px
Image cached from old URL Wrong image still showing after you updated the tag Run the URL through the X Card Validator to force cache clear
Using property= instead of name= Tag ignored; card falls back to OG or nothing Twitter tags use name="twitter:..." not property="twitter:..."
Title over 70 characters Title truncated mid-word with ellipsis Keep twitter:title under 70 characters
Image blocked by robots.txt or auth Broken image in card Ensure the image URL is publicly crawlable; check robots.txt isn't blocking it

Property vs name: This is the most common and sneakiest mistake. OG tags use property="og:...". Twitter tags use name="twitter:...". Mix them up and the tag is silently ignored.

7. How to Test and Validate Your Twitter Card

Always validate your Twitter Card tags before sharing a new page — catching errors early saves the embarrassment of sharing a broken card to thousands of followers.

Option 1: share-preview.com (recommended)

Paste your URL into share-preview.com to instantly see:

  • How your card looks on X/Twitter, Facebook, LinkedIn, and WhatsApp
  • Which tags are present, missing, or have warnings
  • Whether your image loads correctly and meets size requirements
  • Character count warnings for title and description

No login required. Works on any URL — including staging servers (if publicly accessible) and localhost via ngrok.

Option 2: X Card Validator

The official tool at cards-dev.twitter.com/validator shows a live preview and forces a cache refresh. Requires X login. Useful for forcing the X bot to re-crawl a URL when your cached card shows stale data.

Option 3: Browser Developer Tools

Open DevTools → Elements and search your <head> for twitter:card. Confirms the tags are in the HTML, but doesn't show you how the card renders.

Also validate with our Twitter Card validator guide for a full walkthrough of the testing process.

8. Implementation Guides

Plain HTML

Add the Twitter Card tags inside the <head> element, ideally after your <title> tag and OG tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Page Title</title>

  <!-- Open Graph -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Your description.">
  <meta property="og:image" content="https://yourdomain.com/og-image.png">
  <meta property="og:url" content="https://yourdomain.com/page">
  <meta property="og:type" content="article">

  <!-- Twitter / X -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Page Title">
  <meta name="twitter:description" content="Your description.">
  <meta name="twitter:image" content="https://yourdomain.com/og-image.png">
  <meta name="twitter:site" content="@yourbrand">
</head>

Next.js (App Router)

In Next.js 13+ App Router, use the metadata export in your layout.tsx or page.tsx:

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Your Page Title',
  description: 'Your page description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'Your page description.',
    url: 'https://yourdomain.com/page',
    images: [{ url: 'https://yourdomain.com/og-image.png', width: 1200, height: 628 }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'Your page description.',
    images: ['https://yourdomain.com/og-image.png'],
    site: '@yourbrand',
  },
}

export default function Page() {
  return <article>...</article>
}

WordPress (via Yoast SEO or RankMath)

Both Yoast SEO and RankMath automatically generate Twitter Card tags from your Open Graph settings. In Yoast:

  1. Go to SEO → Social → Twitter
  2. Enable "Add Twitter Card meta data"
  3. Set Default card type to "Summary with large image"
  4. Add your Twitter username in the site field

Individual posts can override the global settings via the Yoast sidebar panel in the post editor. Under "Social," set a Twitter-specific title, description, and image if needed.

If you're using a custom WordPress theme without a plugin, add to your functions.php:

function add_twitter_card_meta() {
    echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
    echo '<meta name="twitter:site" content="@yourbrand">' . "\n";
    if (is_singular()) {
        echo '<meta name="twitter:title" content="' . esc_attr(get_the_title()) . '">' . "\n";
        echo '<meta name="twitter:description" content="' . esc_attr(get_the_excerpt()) . '">' . "\n";
        if (has_post_thumbnail()) {
            $img = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
            echo '<meta name="twitter:image" content="' . esc_url($img[0]) . '">' . "\n";
        }
    }
}
add_action('wp_head', 'add_twitter_card_meta');

Related guides: Open Graph Tags: The Complete Guide · How to Use the Twitter Card Validator

Frequently Asked Questions

What are Twitter Card meta tags?

Twitter Card meta tags (now called X Card tags) are HTML meta tags in your page's <head> that control how your URL appears when shared on X (Twitter). They determine the card type, title, description, and image shown in the tweet preview.

Do I need Twitter meta tags if I already have Open Graph tags?

X falls back to Open Graph tags if Twitter-specific tags are missing. The minimum recommended addition is twitter:card — the rest can be inherited from OG tags. But explicitly setting at minimum twitter:card gives you control over the card type, which matters most.

What is the correct image size for Twitter Cards?

For summary_large_image: minimum 300×157px, recommended 1200×628px, maximum 5MB. For summary: minimum 144×144px, recommended 400×400px. X crops images to a 2:1 ratio for summary_large_image cards.

How do I validate my Twitter Card tags?

Paste your URL into share-preview.com — it shows exactly how your card looks on X and flags missing or incorrect tags. No login required.

Twitter vs X — do the meta tag names change?

No. Despite Twitter being rebranded as X, the HTML meta tag attributes remain twitter:card, twitter:title, twitter:description, and twitter:image. Do not change them to x: — that doesn't work.

Test Your Twitter Cards for Free

Paste any URL into SharePreview and instantly see how it looks on X, Facebook, LinkedIn, and WhatsApp. Catch broken cards before they go live.

Check my Twitter Card →

See How Your Page Looks When Shared

Test your OG tags across Twitter, LinkedIn, Facebook, Slack, and WhatsApp instantly.

Test Share Preview Free →