Logo

MonoCalc

/

Twitter Card Tag Generator

Social Media

Card type

Title and description under a large banner image. The form below swaps with this choice, and anything you typed for another card type stays in the form rather than being cleared.

TagSummarySummary with large image (selected)PlayerAppYour value
twitter:cardRequiredRequiredRequiredRequired

Set

twitter:siteOptionalOptionalRequiredRequired

Empty

twitter:site:idOptionalOptionalOptionalOptional

Empty

twitter:creatorOptionalOptionalOptionalNot used

Empty

twitter:creator:idOptionalOptionalOptionalNot used

Empty

twitter:titleRequiredRequiredRequiredNot used

Empty

twitter:descriptionOptionalOptionalOptionalOptional

Empty

twitter:imageOptionalRequiredRequiredNot used

Empty

twitter:image:altOptionalOptionalOptionalNot used

Empty

twitter:playerNot usedNot usedRequiredNot used

Not used

twitter:player:widthNot usedNot usedRequiredNot used

Not used

twitter:player:heightNot usedNot usedRequiredNot used

Not used

twitter:player:streamNot usedNot usedOptionalNot used

Not used

twitter:app:name:iphoneNot usedNot usedNot usedRequired

Not used

twitter:app:id:iphoneNot usedNot usedNot usedRequired

Not used

twitter:app:url:iphoneNot usedNot usedNot usedOptional

Not used

twitter:app:name:ipadNot usedNot usedNot usedRequired

Not used

twitter:app:id:ipadNot usedNot usedNot usedRequired

Not used

twitter:app:url:ipadNot usedNot usedNot usedOptional

Not used

twitter:app:name:googleplayNot usedNot usedNot usedRequired

Not used

twitter:app:id:googleplayNot usedNot usedNot usedRequired

Not used

twitter:app:url:googleplayNot usedNot usedNot usedOptional

Not used

twitter:app:countryNot usedNot usedNot usedOptional

Not used

Which tags a card type needs is X's rule rather than a standard, and X has retired card types before. Treat this table as a summary of X's developer documentation at the time this tool was written, not as a permanent specification.

Common tags

Required. The headline of the card. An app card takes its title from the store listing instead. 0 characters after trimming.
Optional. A short summary shown under the title. 0 characters after trimming.
Required. Absolute http or https image URL. A relative path has no base to resolve against on a crawler's servers.
Optional. What the image shows, for anyone whose reader announces the card instead of drawing it. 0 characters after trimming.
Optional. The @handle of the site the page belongs to.
Optional. The numeric account ID of the site — an alternative to the handle, which survives a rename.
Optional. The @handle of the person who wrote the page.
Optional. The numeric account ID of the author.

Handles are accepted with or without the @ and are written out with exactly one. The numeric IDs are an alternative to the handles and survive a rename, which a handle does not.

Preview — Summary with large image

No image — this card will render as text only.

@site

Your twitter:title goes here

Your twitter:description goes here.

Illustrative preview — actual rendering is controlled by X and changes over time. The image area is drawn at 2:1 and the text is clipped so the card has a fixed shape here; neither is a claim about how X lays out or truncates anything.

Validation

11 of 14 checks passed

Missing or malformed

Error

twitter:title

X lists this as required for a summary with large image card. Fill it in, or the card may not render as this type at all.

Error

twitter:image

X lists this as required for a summary with large image card. Fill it in, or the card may not render as this type at all.

Worth a look

Warning

twitter:site or twitter:site:id

Neither the site handle nor its numeric ID is set. The ID is the sturdier of the two, because it survives a rename.

Output — 1 tag

<meta name="twitter:card" content="summary_large_image" />

Emitted with name= rather than property=, which is the form X's own documentation uses. Every content value is entity-escaped, so a double quote in your title cannot close the attribute.

Read tags you already have

Paste a head section or a whole HTML page and the form fills itself from the twitter: tags in it, written either as name= or as property=. The markup is parsed into a detached document and never added to this page, so nothing in what you paste can run. Any og:title, og:description and og:image are read as well, but only for the fallback analysis below — they never fill these fields and are never re-emitted.

About This Tool

Twitter Card Tag Generator – The twitter: Meta Block Explained

A Twitter Card is what X renders when someone pastes your link: a title, a summary, usually a picture, sometimes a player or an app button. It is driven by a handful of <meta> tags in your page's <head>, each carrying a name that starts with twitter: and a content value. This generator builds that block for the card type you choose, shows what each type needs, and flags what is missing, malformed or simply not used.

The card type decides everything else

twitter:card is the primary control, and the rest of the block reacts to it. A summary card sets a small square thumbnail beside the text. A summary_large_image card puts a wide banner above it, which is why the image matters much more there. A player card embeds a video or audio player from an https iframe and needs the player's address and its box. An app card links straight into a store listing and takes its title from the store rather than from your page.

That is the whole reason the requirement matrix sits under the selector. Picking a card type and then writing the tags from memory is how pages end up declaring summary_large_image with no image, or a player with no dimensions. The matrix and the validation panel here are generated from one rule table, so they cannot disagree with each other.

Handles, IDs and the two store identifiers

twitter:site is the account the site belongs to; twitter:creator is the person who wrote the page. Both take an @handle, and both have a numeric :id companion that keeps working after a rename. This tool accepts a handle with or without the @ and writes exactly one, because a bare username in twitter:site is one of the most common mistakes in a hand-written block.

App cards carry a sharper trap. The App Store identifies an app by a number, so twitter:app:id:iphone and twitter:app:id:ipad are digits only. Google Play identifies it by a package name such as com.example.app. They are not interchangeable, and each field here rejects the other's format on the spot.

Two outputs, two different escaping rules

The HTML block escapes every value for an attribute: & first, then <, > and the quotes, so a quotation mark in your title cannot close the content attribute early. The Next.js metadata export is a JavaScript literal instead, quoted with JSON.stringify — writing &amp; into a JS string would be a bug, not a safety measure. One rule applies to both: control characters are stripped and line breaks are folded to a single space, since a raw newline is malformed inside an attribute and a syntax error inside a string literal.

Why URLs are checked before they become tags

Every address you type is untrusted text. twitter:image is accepted only as an absolute http or https URL; twitter:player and twitter:player:stream are https only, and an http player is rejected rather than warned about. App deep links may use a custom scheme like myapp://, but never a scripting one. Anything refused is reported on the field and left out of the output instead of emitted, and no URL anywhere in this tool is rendered as a clickable link.

Nothing here touches the network
Your page is described, never fetched, and X is never contacted. The only request your browser makes is loading the image you named into the preview — and a player URL is drawn as a placeholder rather than loaded into an iframe.

Keep your Open Graph tags

X's documentation describes falling back to Open Graph for properties where the twitter: equivalent is missing, and every other unfurler — chat apps, forums, messengers — reads only Open Graph. So the two blocks are complementary: write Open Graph for everyone, and twitter: tags where you want control over the card style on X. This tool deliberately emits no og: tag at all; paste your existing markup above and it will tell you which properties would fall back and which would not.

Card rules are X's, and they change
The card types and their requirements are defined by X rather than by a standard — a photo card and a gallery card both existed once and were retired. Treat the matrix as a summary of the documentation at the time of writing, and check X's developer documentation before relying on it. Note too that unfurlers cache what they scraped: a corrected tag will not change a post that has already been published, and no generator can clear anyone's cache.

Frequently Asked Questions

Is the Twitter Card Tag Generator free?

Yes, Twitter Card Tag Generator is totally free :)

Can I use the Twitter Card Tag Generator offline?

Yes, you can install the webapp as PWA.

Is it safe to use Twitter Card Tag Generator?

Yes, any data related to Twitter Card Tag Generator only stored in your browser (if storage required). You can simply clear browser cache to clear all the stored data. We do not store any data on server.

How does the Twitter Card tag generator work?

You pick a card type and fill in the page details, and the tool assembles the matching block of twitter: meta tags in your browser. The card type drives everything: the form swaps its lower half, the requirement matrix highlights that column, and only the tags that card type uses are emitted. The same values are also written as a Next.js metadata export, escaped for that context with JSON.stringify rather than with HTML entities. Nothing is uploaded, your page is never fetched and X is never contacted.

What is the difference between summary and summary_large_image?

Both show a title, a description and an image, but they lay them out differently: summary puts a small square thumbnail beside the text, while summary_large_image puts a wide banner image above it. The tag list is nearly the same — the practical difference is that the large-image card is built around the picture, so X lists the image as required for it and optional for the plain summary. Pick summary_large_image when the image is worth the space, and summary when it is a logo or an avatar.

Do I still need Open Graph tags if I have twitter: tags?

Yes. X's documentation describes falling back to Open Graph for properties where the twitter: equivalent is missing, so the two are complementary rather than alternatives — and every other unfurler, from Slack to LinkedIn to your group chat, reads only Open Graph and ignores the twitter: namespace entirely. Write both: Open Graph as the base layer for everyone, and twitter: tags where you want to control the card style on X specifically. This tool deliberately emits no og: tags; the Open Graph Tag Generator builds that block.

What is the difference between twitter:site and twitter:creator?

twitter:site names the account the website belongs to — the publication, the product, the company. twitter:creator names the person who wrote the particular page, which is why it usually varies per article while twitter:site stays the same across the whole domain. Both take an @handle, and both have a numeric :id companion. The ID is the sturdier of the two because it survives a rename, while a handle stops resolving the moment the account changes it.

Why can I not use the same ID for the App Store and Google Play?

They identify apps in completely different ways. The App Store uses a numeric ID, so twitter:app:id:iphone and twitter:app:id:ipad are digits and nothing else. Google Play uses the package name, so twitter:app:id:googleplay looks like com.example.app. Putting a number in the Google Play field or a package name in an App Store field is the single most common app-card mistake, and this tool flags each one on the field rather than emitting a value that cannot resolve.

I fixed my tags but an old post still shows the old card. Why?

Unfurlers cache what they scraped and decide for themselves when to look again, and a post that has already been published keeps the card it was given. Nothing you put on your page clears someone else's cache, and no tag generator can do it either — this tool builds markup and never contacts X. Deploy the corrected tags first, then use X's own card validation tooling to ask for a re-scrape, and expect posts made before the fix to keep the old card.