When you share a link on X (formerly Twitter), the platform tries to generate a preview, a so-called Twitter Card. Without the right meta tags, your link appears as a plain URL. With properly configured Twitter Cards, however, X pulls in a title, description, and image, turning your shared link into a visual teaser that people are far more likely to click on.
How Twitter Cards Generate Link Previews
A Twitter Card is not something you upload or design. It is generated automatically by X based on meta tags in the HTML of the linked page. When someone pastes your URL into a tweet, X's crawler visits the page, reads the meta tags, and assembles the preview. If the tags are missing or misconfigured, the preview is either incomplete or absent entirely.
Summary Card vs. Summary Card with Large Image
X supports multiple card types, but in practice you will only encounter two:
- Summary Card: A compact preview with a small thumbnail on the left and the title and description on the right. This is what most blog posts, articles, and documentation pages use. The thumbnail is square, typically at least 144×144 pixels.
- Summary Card with Large Image: The image takes up the full width above the text. This works well for landing pages, product pages, portfolio pieces, or any page where the visual is the main hook. The image should be at least 300×157 pixels, ideally 1200×628 for crisp display on high-resolution screens.
There used to be additional types (Player Card for audio/video, App Card for mobile apps), but most sites will never need those.
Required Twitter Card Meta Tags
Place these in the <head> section of your page:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description of your page." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:site" content="@YourHandle" />The twitter:card tag determines the layout. The twitter:site tag is optional but adds your handle as attribution below the card.
Twitter Cards and Open Graph: How the Fallback Works
Here is something many site owners don't realize: X will fall back to Open Graph tags (the ones used by Facebook, LinkedIn, and WhatsApp) if Twitter-specific tags are missing. So if you already have og:title, og:description, and og:image set, your link will still render a preview on X, just without the explicit control that Twitter Card tags give you.
In practice, this means a well-configured SEO plugin like Yoast or Rank Math often takes care of the basics automatically. But relying on the fallback has drawbacks: the image dimensions may not be ideal for X's layout, and the description might get truncated differently. For the cleanest result, configure both sets of tags.
Troubleshooting: Twitter Card Preview Not Showing
Even when tags are present, things can go wrong:
- Caching issues: X caches card previews aggressively. If you fix a broken image or update a title, the old preview may stick around for days. You can force a refresh using X's Card Validator tool.
- Image too small: If your image is below the minimum size, X may ignore it entirely and show no preview image at all.
- Relative URLs: The
twitter:imagevalue must be an absolute URL. Relative paths like/images/header.jpgwon't work. - Robots blocking the crawler: If your
robots.txtblocks Twitterbot, X cannot read your meta tags and will not generate a card.
Setting Up Twitter Cards in WordPress
WordPress itself does not output Twitter Card meta tags by default. You need either an SEO plugin (Yoast SEO, Rank Math, The SEO Framework) or a dedicated social media plugin to generate them. Most of these plugins let you set a default card type site-wide and override the image and description per post or page.
If you are running WooCommerce, check your product pages separately. They sometimes need additional configuration because the product image and description should be pulled from the product data, not the generic page fields.
Check Your Twitter Card Tags with InspectWP
InspectWP reads the meta tags on your WordPress site and shows you exactly which Twitter Card tags are present (or missing). The report displays the detected card type, title, description, image URL, and site handle, so you can verify that the preview will look the way you want before you share your content.