Twitter Card Preview: Check X Card Tags and Images

How to use the Twitter Card Preview: Check X Card Tags and Images

1. Paste the page or its headPaste the HTML of the page, or only what is between the head tags. The page reads the meta tags wherever they are in the text, and ignores scripts and comments.
2. Read where each part comes fromX uses its own twitter: tag first. If there is none, it uses the matching Open Graph tag. The page names the tag that it took the title, the description, and the image from, so you can see what X will use.
3. Choose the image, if you have itPick the image file that the card points to. Its type is read from the first bytes of the file, and it is checked for size, ratio, weight, and type against the card type that your tags name. The file is not uploaded.
4. Fix what is reportedPress the line button of a message to jump to the tag. When the tags are right, post the link, and if the card does not show, remember that X also keeps what it has read.

How X builds a card

X, which used to be called Twitter, reads the meta tags of a page when its link is posted. The tags that it looks for start with twitter:, such as <meta name="twitter:card" content="summary_large_image">. The card tag says which kind of card to make, and the rest give the title, the description, the image, and the accounts that the card belongs to. If a title, a description, or an image tag is missing, X falls back to og:title, og:description, and og:image. The card type has no fallback, so it is the one tag that you have to write yourself.

That is why many pages have only a few twitter: tags and a full set of Open Graph tags. The page follows the same order, and every message says which tag a value came from. If you want the X card to differ from the Facebook card, write the twitter: tag, and it takes the place of the Open Graph one on X only.

The card types

summary is a small card: a square image at the side, with a title and a description. summary_large_image is a large card: a wide image across the width, with the title. app is for a mobile app and takes tags for the app store identifiers. player is for audio and video, and it needs an https address, a width, and a height for the player. Older documentation also names photo, gallery, product, and lead generation cards. They are not in the current list, and the page tells you to use summary_large_image instead.

If a card type is misspelled, such as large or summary-large-image, X does not guess. The page names a value that is not a card type as an error, and lists the four that are. It also reports a missing card tag as a warning, because the page will still be shown as a link, but not as the card you meant.

The limits

X's documentation sets a maximum of 70 characters for a title, 200 characters for a description, and 420 characters for the text that describes an image. A longer text is cut. The page counts the characters of the title and the description that X will use, which may come from the Open Graph tags, and warns when a count is over the maximum. It also shows each count as a figure, so you can see how near you are.

For images, the documentation says that a summary card takes a 1 to 1 image of at least 144 by 144 pixels, and a summary_large_image card takes a 2 to 1 image of at least 300 by 157 pixels. Both allow images up to 4096 by 4096 pixels, with a file of less than 5 MB, in JPG, PNG, WEBP, or GIF, and only the first frame of an animated GIF is used. SVG is not supported. The page checks a file that you choose against these numbers. The ratio is a warning and not an error, because X crops an image of another shape.

The accounts and the image text

twitter:site names the account of the website, and twitter:creator names the account of the author. Each is an X username, written with an @ in front, with no more than 15 characters and no spaces, or the number that identifies the account. The page warns about a value of another shape, and gives a note when the @ is left out, which X reads but the documentation does not show.

twitter:image:alt is the text that describes the image for people who cannot see it. It takes the place of og:image:alt if both are there. The page gives a note when neither is there, and a warning when the text is longer than 420 characters.

What the card on this page shows

The card shows the place of each part for the type of card that your tags name: a wide image with the title over it for summary_large_image, and a square image with the domain, the title, and the text for summary. If the tags name no card, the large card is shown, because it is the one that most pages mean. It is an approximation. X changes how its cards look from time to time, and what it shows in a timeline is not always what it shows in a post.

The image that the tag points to is not loaded, because that would be a network request and it would tell the host of the image that you looked at it. If you choose the image file, it is shown from your device, and checked.

How it was tested

The part that reads the tags was compared with a mature parser. A set of 349 heads was generated with the kinds of thing that real pages have: tags in single and double quotes, without quotes, with entities, over several lines, with comments around them, with a script that holds a string that looks like a tag, and with tags after the start of the body. The same text was read by the HTML parser in lxml, and the page found the same 2,259 meta, link, and title tags, with the same attributes, in every one.

The image reader was tested on real files made by Pillow, which gave a still and an animated PNG, GIF, and WebP, a JPEG, two SVG files, and a text file. The type and the animation were found for all of them. The rules for the cards were written from X's own documentation and tested on written examples. The cards were not compared with the real ones on X, and X was not asked to read any page.

Limits and accuracy

• The page reads the text that you paste. It does not fetch a URL, so it cannot see tags that a script adds after the page loads, and it cannot tell whether X can reach your image.
• X's documentation of the cards has been moved and shortened, and the limits on this page are from the copies that were saved in 2019 to 2021 and are still the numbers that other sources give. X can change them without notice, and it is not possible to check them from here.
• The page does not ask X to read a page again, and it cannot tell you what X has kept. The official validator was removed, and X does not offer a replacement.
• The card is an approximation of where things go. X changes the look of its cards, and shows them in other ways in a timeline and in a post.
• App cards and player cards are checked for their required tags only. Player cards also have to be approved by X, which the page cannot check.
• The text you paste is not saved, so copy the report before you close the page.

Frequently asked questions