When someone shares your link on X (formerly Twitter), the preview card is controlled by Twitter Card meta tags. Without them, your link shows as plain text. With them, you get a rich card with your image, title, and description — driving far more clicks. This guide covers every Twitter Card type and how to implement each one correctly.

What Are Twitter Cards?

Twitter Cards are meta tags in the <head> of your HTML that tell X how to render a link preview when someone tweets your URL. X reads these tags when the Twitter Card crawler fetches your page. The resulting card appears inline in the feed, below the tweet text.

Good news: if you already have Open Graph tags, you only need a few additional Twitter-specific tags. X falls back to og:title, og:description, and og:image when Twitter-specific equivalents are absent.

The Four Twitter Card Types

—summary — small square thumbnail, title, description. Default fallback.
—summary_large_image — large landscape image above title and description. Most common for articles and landing pages.
—app — promotes a mobile app with name, description, and App Store links.
—player — embeds audio or video directly in the card (requires Twitter approval).

For most websites, summary_large_image is the right choice. It gives your content maximum visual impact in the feed.

Minimal Required Tags

At minimum, every page should include these three tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise 1–2 sentence summary." />

If you already have og:title and og:description, X will use those as fallbacks even without twitter:title and twitter:description. But setting them explicitly gives you independent control over the Twitter presentation.

Full Tag Set for summary_large_image

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@authorhandle" />
<meta name="twitter:title" content="Your Page Title — Under 70 Characters" />
<meta name="twitter:description" content="A clear, compelling summary under 200 characters." />
<meta name="twitter:image" content="https://example.com/og-twitter.jpg" />
<meta name="twitter:image:alt" content="Descriptive alt text for the image" />

Image Specifications

—summary_large_image: minimum 300×157px, recommended 1200×628px, 2:1 aspect ratio, max 5MB
—summary: minimum 144×144px, recommended 400×400px, 1:1 aspect ratio, max 5MB
—Formats: JPG, PNG, WEBP, GIF (static only for GIF)
—Images must be publicly accessible — no auth-protected URLs
—Hotlinked images must allow the Twitter crawler user-agent

TipX caches images aggressively. If you update an image at the same URL, use the Card Validator (cards-dev.twitter.com/validator) to clear the cache, or change the image filename.

Twitter Cards in Next.js

In the Next.js App Router, set Twitter Card metadata in your layout.tsx or page.tsx using the built-in metadata API:

// app/layout.tsx or app/your-page/page.tsx
import type { Metadata } from 'next';

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

Twitter Cards in React (Helmet)

For React apps using react-helmet or react-helmet-async:

import { Helmet } from 'react-helmet-async';

function PageHead() {
  return (
    <Helmet>
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="@yourbrand" />
      <meta name="twitter:title" content="Your Page Title" />
      <meta name="twitter:description" content="Your page description." />
      <meta name="twitter:image" content="https://example.com/og-image.jpg" />
      <meta name="twitter:image:alt" content="Descriptive alt text" />
    </Helmet>
  );
}

Common Twitter Card Mistakes

—Wrong property attribute: Twitter uses name="twitter:card", not property="twitter:card". Using property instead of name is the most frequent mistake.
—Missing twitter:card tag: Without this tag, no card type is declared and X may not render any card at all.
—Image not crawlable: X must be able to fetch the image. Images behind login walls or with restrictive robots.txt rules will not appear.
—Title over 70 characters: X truncates longer titles in the card display.
—Description over 200 characters: X truncates longer descriptions.
—Wrong aspect ratio for summary_large_image: Images outside the 2:1 ratio get letterboxed or cropped unexpectedly.

Twitter Cards vs Open Graph Tags

Twitter Card tags and Open Graph tags serve overlapping purposes but are separate systems. The key rule: if a Twitter-specific tag (twitter:*) is present, X uses it. If it is absent, X falls back to the matching OG tag. This means:

—og:title → fallback for twitter:title
—og:description → fallback for twitter:description
—og:image → fallback for twitter:image
—og:url → fallback for twitter:url

In practice, many sites only set twitter:card and rely on OG tags for the rest. That works fine for most use cases. Set Twitter-specific tags when you need a different title, description, or image for the X audience.

How to Validate Twitter Cards

X provides a Card Validator at developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards. Paste any URL to see the rendered card and any validation errors. Note that the validator requires you to be logged into an X developer account.

A faster alternative is OGProof, which validates Twitter Card tags alongside Open Graph tags for all six major platforms — X, LinkedIn, Facebook, Discord, Slack, and Google — in a single check. No login required.

Summary: Twitter Card Checklist

—Set twitter:card to summary_large_image for articles and landing pages
—Add twitter:site with your @handle
—Use name="twitter:*" not property="twitter:*"
—Image: 1200×628px JPG or PNG, publicly accessible, under 5MB
—Title under 70 characters, description under 200
—Validate with OGProof or the X Card Validator before shipping
—If image changed but URL stayed the same, clear the X cache via the validator

Twitter Card Meta Tags: The Complete Setup Guide