Add Twitter / X Card tags - MetricSpot docs

What this check does

Scans the page <head> for <meta name="twitter:card" content="…"> and (where applicable) twitter:image, twitter:title, twitter:description, and twitter:site. The check fails when no twitter:card is present and X has to fall back to a smaller preview type — or to no preview at all.

Why it matters

X (formerly Twitter) renders posted URLs as one of three preview formats:

summary_large_image — a full-width image card with title and description below. The high-conversion format every brand wants.
summary — a small thumbnail card. The default if no twitter:card is set but Open Graph tags are present.
No card at all — a bare URL, no preview. What happens when no OG and no Twitter tags are present.

A summary_large_image card gets meaningful share-rate and click-through over a summary; both crush a bare URL. The difference is one meta tag.

How to fix it

Put four meta tags in <head>. Three of them can mirror your Open Graph tags — X falls back to OG values if Twitter equivalents are missing, but explicit Twitter tags let you set a different image for X if you want:

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@metricspot">
  <meta name="twitter:title" content="Free SEO audit in 60 seconds — MetricSpot">
  <meta name="twitter:description" content="See what AI agents and Google see on your site. 91 checks, no signup.">
  <meta name="twitter:image" content="https://metricspot.com/og/home.png">
</head>

The minimum you need is twitter:card. If your page already has Open Graph core tags, X reads those for title/description/image. The lone twitter:card tag is what tells X to render the big-image layout instead of a small thumbnail.

Image rules (same as the OG image rules):

1200×630 (2:1) or wider — minimum 300×157, maximum 5 MB.
PNG or JPG. WEBP works on most platforms but X’s renderer has been inconsistent — stick to PNG/JPG.
See the dedicated Open Graph image page for size and dynamic-generation details.

Astro / Next.js — generate from frontmatter alongside OG:

---
const { title, description, ogImage, twitterHandle = "@metricspot" } = Astro.props;
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(ogImage, Astro.site).href} />

WordPress — Yoast SEO, Rank Math, and SEOPress all emit Twitter Card tags automatically. In Yoast: SEO → Social → Twitter → “Add Twitter card meta data” → On.

Card types worth knowing.

summary_large_image — what you want 95% of the time.
summary — small thumb + text. Useful for very text-heavy posts where the image isn’t the point.
player — embedded video/audio player. Niche; requires whitelisting by X.
app — promote a mobile app install. Use the App Store ID fields.

The old Card Validator was deprecated in 2023. To verify, post the URL in a draft (don’t publish) and X will show the rendered card — or use a third-party tool like opengraph.xyz which renders Twitter and OG previews.

Frequently asked questions

Do I need both Open Graph and Twitter Card tags?

X falls back to Open Graph if no Twitter tags are present, so OG alone gives you a card — but only a small card. To force the large-image layout you need at least <meta name="twitter:card" content="summary_large_image">. Everything else can fall back to OG.

My card preview is broken — how do I refresh it?

X caches preview scrapes for up to 7 days. The cache busts when you change the canonical URL or when the cached entry expires. There’s no public “refresh” tool anymore — the workaround is to add a cache-busting query param (?v=2) to the URL once, post the busted URL once, then go back to the clean URL.

What about Mastodon, Bluesky, LinkedIn?

They all use Open Graph, not Twitter Cards. Get OG right and they’ll render correctly automatically. See Open Graph core tags and Open Graph image.