What are Twitter Cards — richer previews on X and beyond

Twitter Cards are meta tags that control how your pages appear when shared on X (formerly Twitter) — enabling large image previews, article summaries, and app download cards.

Beyond the plain link

When you share a URL on X (formerly Twitter), the platform has two options: display a plain link with no decoration, or display a Twitter Card — a rich preview with an image, title, description, and sometimes interactive elements.

Twitter Cards are controlled by <meta> tags in your page's <head>, similar to OpenGraph tags. Where OpenGraph was created by Facebook and is used by most social platforms, Twitter Cards were created by Twitter specifically for its own platform. In practice, most pages implement both.

Card types

Twitter supports several card types, but two are most useful for content websites:

summary — A small thumbnail image alongside title and description. Good for pages without a strong visual focus (contact pages, about pages, documentation).

summary_large_image — A large banner image above the title and description. This is the format that performs best for articles, blog posts, landing pages, and any content with a strong visual component. The image dominates the preview card in the X feed.

app — A card for mobile app download links. Specific to app store marketing.

player — A card with an embedded video or audio player. Requires approval from X.

For most content sites, summary_large_image is the right choice for pages with featured images, and summary for pages without.

The essential tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="What is Schema.org" />
<meta name="twitter:description" content="Schema.org is the shared vocabulary..." />
<meta name="twitter:image" content="https://yoursite.com/images/schema-og.jpg" />
<meta name="twitter:site" content="@aiboostnow" />

twitter:card — declares the card type (required)
twitter:title — the title shown in the preview
twitter:description — up to 200 characters of description
twitter:image — the preview image (minimum 300×157 pixels; 1200×630 is ideal for summary_large_image)
twitter:site — your X handle (optional but recommended for attribution)

Fallback to OpenGraph

X's card system falls back to OpenGraph tags when Twitter Card tags are absent. If your page has og:title and og:image but no twitter:title or twitter:image, X will use the OG values.

This means implementing OpenGraph correctly gives you baseline Twitter Card support without duplication. Adding explicit Twitter Card tags lets you customise the X-specific presentation independently — for example, writing a shorter title optimised for X's character limits while keeping a longer title for Facebook.

Validating Twitter Cards

X provides a Card Validator at cards-dev.twitter.com/validator. Enter a URL and it shows how the card will appear, and any errors or missing tags.

Note: The validator requires your page to be publicly accessible. Local development environments or password-protected staging sites cannot be validated through it.

Image specifications

For summary_large_image:

Recommended size: 1200 × 630 pixels
Minimum size: 300 × 157 pixels
Maximum file size: 5 MB
Formats: JPG, PNG, WebP, GIF (static only)
Aspect ratio: 2:1

The image must be served over HTTPS. X will not display HTTP image URLs.

How AI Boost for Joomla handles Twitter Cards

AI Boost for Joomla generates both OpenGraph and Twitter Card meta tags from a single configuration. You set a default OG image, toggle OpenGraph on, and both sets of tags are injected on every page automatically.

The plugin sets twitter:card to summary_large_image by default — the format that performs best for most content types. Per-article image overrides (configured through Joomla Custom Fields) apply to both OG and Twitter Card tags simultaneously, so each article shows its own preview image across all social platforms with a single custom field configuration.