Twitter/X Cards: How to Improve Link Previews
Learn what Twitter Card tags are, how twitter:card, twitter:title, and twitter:image work, and how to implement them alongside Open Graph tags.
SEO Tools · UtilityHub Blog
When someone shares your page on X (formerly Twitter), the preview card that appears - the title, image, description - is controlled by Twitter Card tags. These tags are separate from Open Graph tags and give you precise control over how your content looks on X specifically.
This guide covers what Twitter Card tags are, the different card types, how to implement them, and how they relate to Open Graph.
What are Twitter Card tags?
Twitter Card tags are HTML meta properties that define how a shared link appears on X. They follow the same pattern as Open Graph tags but use the twitter: namespace.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Compress a PDF">
<meta name="twitter:description" content="Reduce PDF file size in your browser. Free, no sign-up.">
<meta name="twitter:image" content="https://example.com/blog/compress-pdf.png">
Without these tags, X still creates a preview using Open Graph tags or by extracting content from the page. But when you set Twitter Card tags explicitly, you control exactly what appears.
Card types
X supports several card types. The two most common for websites are:
| Card type | Layout | Best for |
|---|---|---|
summary | Small thumbnail, title, description | Blog posts, articles, pages with text focus |
summary_large_image | Large image above title and description | Visual content, product pages, pages where the image matters |
For most content websites, summary_large_image is the better choice because it gives more visual space to the image.
Other card types like player (for video) and app (for app downloads) exist but require specific integrations. For general website content, summary and summary_large_image cover nearly every use case.
The essential Twitter Card tags
Four tags are the foundation:
twitter:card
The card type. This is required - without it, X does not know how to render the card.
<meta name="twitter:card" content="summary_large_image">
twitter:title
The title shown in the card. If omitted, X falls back to og:title.
<meta name="twitter:title" content="How to Compress a PDF Without Losing Quality">
twitter:description
The description shown in the card. Falls back to og:description if missing.
<meta name="twitter:description" content="Reduce PDF file size for email and uploads in your browser.">
twitter:image
The preview image. Falls back to og:image if missing. Use an absolute URL.
<meta name="twitter:image" content="https://example.com/blog/compress-pdf.png">
X recommends an image size of at least 300x157 pixels for summary cards and 300x157 for summary_large_image. Larger images display better, with 1200x630 being a widely compatible choice.
How Twitter Cards and Open Graph interact
X reads both Twitter Card tags and Open Graph tags. When both are present, Twitter-specific tags take priority. When a Twitter tag is missing, X falls back to the corresponding Open Graph tag.
| Twitter tag | Open Graph fallback |
|---|---|
twitter:card | No fallback (required) |
twitter:title | og:title |
twitter:description | og:description |
twitter:image | og:image |
This means if you already have Open Graph tags, X will create a reasonable preview even without Twitter Card tags. But if you want full control - a different image for X than for Facebook, or a different title - set both.
<!-- Open Graph (Facebook, LinkedIn, WhatsApp) -->
<meta property="og:title" content="How to Compress a PDF Without Losing Quality">
<meta property="og:description" content="Reduce PDF file size in your browser.">
<meta property="og:image" content="https://example.com/blog/compress-pdf-og.png">
<!-- Twitter/X (overrides og:title, og:description, og:image) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Compress PDFs Online - Free Tool">
<meta name="twitter:description" content="Shrink PDF files in seconds. No uploads, no sign-up.">
<meta name="twitter:image" content="https://example.com/blog/compress-pdf-twitter.png">
This setup lets you use one image for Facebook and a different one for X, if you want to optimize for each platform.
How to add Twitter Card tags to your page
Adding them is straightforward - paste the meta tags into the <head> section of your HTML:
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description.">
<meta name="twitter:image" content="https://example.com/image.png">
</head>
Most platforms handle this for you:
- WordPress - SEO plugins like Yoast or Rank Math render Twitter Card tags automatically when you fill in the social preview fields. You do not need to edit HTML.
- Shopify, Wix, Squarespace - social sharing settings on individual pages or products handle Open Graph; Twitter Card tags are usually generated alongside them.
- Static site generators and frameworks - configure Twitter Card metadata in your site's head template or metadata config so every page inherits the tags.
If you are not sure whether your page already has Twitter Card tags, view the page source and search for twitter:card.
Validating and testing
Before sharing, verify that your Twitter Cards render correctly:
- Go to X's Card Validator (search for "Twitter Card Validator")
- Enter your page URL
- Check that the card shows the correct title, description, and image
- If the preview is wrong, check for missing or mistyped tags in your HTML
Common validation errors:
- Missing
twitter:cardtag (the most common issue) - Image URL is relative instead of absolute
- Image is not publicly accessible
- Image is too small
Generate Twitter Card tags for your page
Generate Twitter Card meta tags for rich previews when your pages are shared on X (Twitter).
The generator produces the complete set of Twitter Card meta tags, so you avoid syntax errors and missing properties.
Troubleshooting preview issues
When a Twitter Card looks wrong, work through these checks:
- No card at all - verify
twitter:cardexists in the page source - Wrong image - check
twitter:imageURL is absolute and publicly accessible; clear the cache using the Card Validator - Wrong title - verify
twitter:titleexists; if missing, checkog:title - Card not updating - X caches card data; use the Card Validator to force a re-fetch
- Image cropped wrong - check aspect ratio;
summary_large_imageworks best with 1.91:1 ratio
Open Graph and Twitter Cards together
Open Graph tags control how your link appears on Facebook, LinkedIn, and most social platforms. Twitter Card tags control how it appears on X. Including both ensures your link looks good everywhere it is shared.
For a complete guide to Open Graph, see our Open Graph tags guide. For the full picture of how page metadata works, see our complete guide to SEO meta tags.
SEO tools for social sharing
Generate Twitter Card meta tags for rich previews when your pages are shared on X (Twitter).
Generate Open Graph meta tags for rich social media previews on Facebook, LinkedIn, and other platforms.
Generate SEO meta tags for your website including title, description, keywords, Open Graph, and Twitter Card tags.
