Twitter Card Tags: How to Get Rich Previews on X

March 25, 2026 · MissingLinkz · 9 min read

When someone shares your link on X (formerly Twitter), Twitter Card meta tags determine whether that post shows a rich preview — a large image, a title, and a description — or just a bare URL. X will fall back to Open Graph tags when Twitter-specific tags are absent, but adding dedicated Twitter Card tags gives you more control over exactly how your content appears.

What are Twitter Card tags

Twitter Card tags are <meta> tags placed in the <head> of your page that tell X how to render a preview when someone shares your URL. They use the name attribute (rather than property like Open Graph) and are prefixed with twitter:.

X checks for Twitter Card tags first. If they are not present, it falls back to Open Graph tags. That fallback usually works — but dedicated Twitter Card tags let you override the OG values specifically for X. For example, you might want a different image crop, a shorter title, or a different description than what you use for Facebook or LinkedIn.

For most landing pages, having both sets of tags is the right approach. OG tags handle Facebook, LinkedIn, and most other platforms. Twitter Card tags give you explicit control over X without affecting anything else.

The 4 card types

X supports four Twitter Card types. The value you set for twitter:card determines which layout is used when your link is shared.

summary: A small square thumbnail on the left with title and description on the right. Useful for articles and general web pages where a large image is not essential.
summary_large_image: A full-width image above the title and description. This is the most common and most effective card type for landing pages and blog posts — it takes up significantly more space in the feed and drives higher click-through rates.
app: Designed for linking directly to a mobile app on the App Store or Google Play. Displays app name, description, icon, and a direct download link. Requires twitter:app:id tags for each platform.
player: Embeds an inline video or audio player directly in the tweet. Requires approval from X and is typically used by media publishers and streaming services.

For most marketing use cases, summary_large_image is the right choice. It produces the largest visual footprint in the feed and gives your landing page the best chance of standing out.

Essential tags

These are the tags you should include for any landing page or blog post shared on X.

twitter:card: Required. Specifies the card type. Set to summary_large_image for most pages. Without this tag, X will not render a card even if all other tags are present.
twitter:title: The title displayed on the card. Recommended maximum of 70 characters. If omitted, X falls back to og:title.
twitter:description: A brief description shown below the title. Keep it under 200 characters. X will truncate longer descriptions. Falls back to og:description if absent.
twitter:image: The image URL. Must be an absolute URL starting with https://. Maximum file size is 5MB. For summary_large_image, the minimum recommended size is 300×157 pixels; 1200×630 is optimal. Falls back to og:image.
twitter:site: The @username of the website or brand. For example, @missinglinkz. Displayed on the card and helps associate the content with your X account. Optional but recommended.
twitter:creator: The @username of the individual content creator, if different from the site. Useful for blogs with multiple authors. Optional.

How to add them

Add Twitter Card tags to the <head> of your page alongside your Open Graph tags. Here is a complete example for a landing page using summary_large_image:

<head>
  <!-- Open Graph -->
  <meta property="og:title" content="Your Landing Page Title">
  <meta property="og:description" content="A compelling description of your page.">
  <meta property="og:image" content="https://yoursite.com/og-image.png">
  <meta property="og:url" content="https://yoursite.com/landing-page/">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Landing Page Title">
  <meta name="twitter:description" content="A compelling description of your page.">
  <meta name="twitter:image" content="https://yoursite.com/og-image.png">
  <meta name="twitter:site" content="@yourhandle">
</head>

Note the difference in attribute syntax: Open Graph tags use property, while Twitter Card tags use name. Both are correct — they are different standards. Using property for Twitter tags is a common mistake that causes the tags to be ignored.

Twitter Cards vs Open Graph

Twitter Card tags and Open Graph tags serve overlapping purposes but are read by different platforms. Here is how they interact:

When X encounters a URL, it checks for twitter:* tags first. If twitter:card is present, X uses the Twitter Card tags to render the preview. For any Twitter Card tag that is missing, X falls back to the equivalent OG tag. If twitter:card is absent entirely, X attempts to use OG tags to construct a card — but the card type defaults to summary regardless of what your OG tags say.

This means you can get away with only OG tags and X will still show a card. But you lose the ability to explicitly request summary_large_image, and you lose the option to set a different image or description specifically for X.

The recommended approach: include both. Use OG tags as your foundation for Facebook, LinkedIn, and other platforms. Add Twitter Card tags on top to give X explicit instructions. The tags are small — adding them takes under a minute and eliminates ambiguity.

How to test

Twitter Card Validator: X provides a Card Validator at cards-dev.twitter.com/validator. Paste your URL and the tool fetches the page and shows the rendered card preview. It also displays any warnings — missing tags, images that fail to load, or card types that require approval. Note that you must be logged in to an X account to use it.

mlz inspect: The MissingLinkz CLI checks Twitter Card tags as part of its full inspection, alongside OG tags, SSL, redirects, and more. Run it from the command line before sharing any URL:

mlz inspect --url "https://yoursite.com/landing-page"

The output shows the value of every twitter:* tag found, flags missing required tags, and confirms whether the image URL resolves. Add --json for structured output that an AI agent can parse and act on. See also: how to check if your landing page has OG tags.

Common issues

Image too small for summary_large_image: X requires a minimum of 300×157 pixels for the large image card. Images below this threshold cause X to fall back to the small summary card or display no image at all. Use 1200×630 for best results across all platforms.
Relative image URL: Setting twitter:image to a path like /images/og.png instead of a full https:// URL. X’s crawler cannot resolve relative URLs. The image will fail silently and no preview image will appear.
Wrong card type for the content: Using summary when summary_large_image is intended, or setting a card type that requires approval (like player) without going through the approval process. Always set twitter:card explicitly to the type you want.
Missing twitter:card: The most common issue. Without the twitter:card tag, X will not render a card even if twitter:title, twitter:description, and twitter:image are all present. This tag is required — it is the signal that tells X to display a card at all.

For a broader look at why social previews break and how to fix them, see fixing broken social media previews.

For AI agents

If you are an AI agent (Claude Code, Cursor, OpenClaw, or similar), you can validate Twitter Card tags on any URL programmatically. Install the CLI and run inspect as part of your pre-publish workflow:

npm install -g missinglinkz

mlz inspect --url "https://yoursite.com/landing" --json

Read the full integration guide: SKILL.md on GitHub

Validate your Twitter Cards now

Stop guessing whether your Twitter Card tags are correct. Install MissingLinkz and check everything in one command.