What Twitter Cards are and how X builds a link preview

A card or a bare link

Paste a URL into a post on X and X fetches the page and looks for Twitter Card tags. If it finds them, it draws a card with an image. If it finds nothing it can use, you get a bare link, and most people scroll straight past those.

The tags are <meta> tags in the page's <head>, much like OpenGraph. Twitter created them before it became X, and they kept the twitter: prefix. X reads OpenGraph as well, so most sites publish both sets and let X use what it needs.

Card types

X used to document four card types. It has since taken its Cards documentation down, and the old address now opens its general developer pages, so nothing below can be checked against a page from X. The composer preview, further down, is the test that still works. Two card types matter for an ordinary website.

• summary shows a small square thumbnail beside the text. It suits a contact page, or any page without a strong picture.
• summary_large_image shows a wide image across the top of the card. Use it for articles, events and anything with a real photograph.
• app promotes a mobile app and links to its store listing.
• player embeds video or audio, and X has to approve it before it plays.

My rule is simple. Use summary_large_image wherever the page has a picture worth looking at, and summary where it does not. A blurry logo stretched across a large card looks worse than a small, sharp thumbnail.

The tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Our spring menu is here" />
<meta name="twitter:description" content="Wild garlic, lamb and the first asparagus, from 1 April." />
<meta name="twitter:image" content="https://acme-bistro.com/images/spring-menu.jpg" />
<meta name="twitter:site" content="@yourbrand" />

• twitter:card sets the card type. OpenGraph has no tag that stands in for it.
• twitter:title is the headline.
• twitter:description is the text under it.
• twitter:image is the picture.
• twitter:site names the site's own X account, with the @ sign.

Falling back to OpenGraph

When twitter:title, twitter:description or twitter:image is missing, X has used og:title, og:description or og:image in its place. X no longer documents this, so check it in the composer preview. A page with good OpenGraph tags and one twitter:card line already gets a proper card. Separate Twitter values are only worth writing when you want X to show something different from Facebook and LinkedIn, such as a shorter headline.

X has changed more than once how much of the card's text it shows in the feed, and for a while it showed little beyond the image and the domain. Choose the image as if it were the only part people will see.

Checking a card

The Card Validator at cards-dev.twitter.com/validator no longer shows a preview, because X retired that part of it. To see the card, start a new post on X, paste the URL and look at the preview the composer draws. You do not have to publish the post.

X fetches the page from its own servers, so a copy on your laptop or a password-protected staging site cannot be previewed this way. X also keeps what it fetched for a while, so a changed image may take some time to show.

Choosing the image

X no longer publishes size limits for card images, so an exact figure you find elsewhere rests on documentation that is gone. What still holds is the shape. summary_large_image draws a wide picture and summary a square one. The 1200×630 image most sites make for OpenGraph suits the large card, and a square logo suits the small one.

Before you rely on a picture, paste the URL into the composer and look at how X crops it. Keep faces and text away from the edges.

How AI Boost for Joomla handles Twitter Cards

AI Boost for Joomla has a switch on its Social Sharing screen called "Enable Twitter Card meta tags", separate from the one for OpenGraph. Once you switch it on, it writes twitter:card, twitter:title, twitter:description and twitter:image on your pages, with the same title, description and picture it gives OpenGraph. Fill in the Twitter / X Site Handle field and it adds twitter:site as well.

The card type is summary_large_image by default, and drops to summary when a page has no image at all. An editor can choose between the two for one article with the article's Twitter Card custom field. The picture follows the same order as for OpenGraph. On an article, the article's own OG Image comes first, then its intro image, then the Default OG Image.

It writes no app or player cards.