A link without card markup is posted as a bare URL with no image and no context. A link with it becomes a panel that occupies several times the vertical space in a timeline and carries your headline in readable type. The gap in click through is large enough that card tags are usually the highest leverage change you can make to a page you intend to promote.
Everything is built locally. The form state never leaves your browser, so you can paste draft headlines and unreleased URLs without publishing them anywhere.
Which card type to choose
X supports a small set of card types and only two of them matter for ordinary web pages. The summary card puts a small square thumbnail beside the title and description. The summary card with large image puts a wide image above them and takes up far more room in the timeline. The twitter card generator above offers both.
Pick the large image card whenever you have an image worth showing at full width, which for an article or a product page is almost always. Pick the plain summary card when the artwork is a logo that would look stretched at 1200 pixels wide.
- summary: small square thumbnail, good for logos and utility pages.
- summary_large_image: wide banner image, the right default for articles and products.
- Title is truncated at roughly 70 characters in most clients.
- Description is truncated at roughly 200 characters and is often hidden entirely on mobile.
- Alt text can run to 420 characters and is read by screen readers.
How twitter card meta tags fall back to Open Graph
The card parser reads the twitter: prefixed name meta tags first and then falls back to the equivalent Open Graph property tags for anything missing. So twitter:title falls back to og:title, and twitter:image falls back to og:image.
In practice you only need the twitter: tags that differ from your Open Graph values, plus twitter:card itself, which has no Open Graph equivalent and must always be present. This tool emits both sets so a single paste covers X, Facebook, LinkedIn and Slack at once, and you can delete the duplicates if your page already carries Open Graph markup.
One detail catches people out. The twitter tags use the name attribute while Open Graph uses property. Swapping them silently breaks the card.
Image requirements that actually get enforced
For the large image card the image should be at least 300 by 157 pixels and no more than 4096 by 4096. The rendered crop is close to 2:1, so a 1200 by 630 image works well and is the same asset you would use for Open Graph. Files must be under 5 megabytes and in JPG, PNG, WebP or static GIF format. Animated GIF is accepted but only the first frame is shown.
The image URL has to be absolute, publicly reachable and served over HTTPS. A relative path, a URL behind a login, or an image blocked by robots rules produces a card with an empty image area. Because the crawler caches aggressively, fixing a broken image often means changing the file name rather than replacing the file in place.
Writing a social share preview that survives truncation
Card text is not a place for suspense. Put the concrete part of the headline in the first forty characters, because that is what a reader sees while scrolling on a phone. The description then adds one fact the title did not have room for rather than restating it.
The counters here are live, so you can watch the length as you type and stop before the ellipsis appears. Avoid ending a title with a truncated word: a social share preview that cuts mid word reads as a broken page rather than a long headline. If the description merely repeats the title, delete it, since a card with no description still renders cleanly.
How this twitter card generator builds the markup
Every field you type is escaped for use in an HTML attribute, so a quote or an ampersand in a headline cannot break out and corrupt the tag. The tool then assembles the tag block in the conventional order and shows you a preview built from the same values the markup carries, which is why the preview and the output can never drift apart.
Nothing is fetched. The twitter card generator does not request your image URL or your page, because a browser cannot reliably read a cross origin image and because doing so would leak draft URLs to a third party. The preview therefore shows the layout, not the crawler result. Once the page is live, run it through the official validation flow to confirm the crawler can reach the image.
The output is plain text. Copy it into the head of your document, or into whichever component your framework uses to manage head tags.
| Property | summary | summary_large_image |
|---|---|---|
| Image shape | Square thumbnail | Wide banner, close to 2:1 |
| Suggested size | 600 by 600 pixels | 1200 by 630 pixels |
| Minimum size | 144 by 144 pixels | 300 by 157 pixels |
| Best for | Logos, docs, utility pages | Articles, products, landing pages |
| Timeline height | Compact | Roughly three times taller |
How to generate Twitter card tags
- 1
Pick the card type
Choose summary for a small square thumbnail or summary with large image for the wide banner layout.
- 2
Fill in the text fields
Add the title, description and optional site and creator handles. Watch the character counters as you type.
- 3
Add an absolute image URL
Paste a public HTTPS URL to an image of at least 1200 by 630 pixels, and write alt text describing it.
- 4
Generate and copy
Press generate, check the preview, then copy the tag block into the head element of your page.
Related tools worth bookmarking
Sources and further reading
- MDN: the meta elementReference for the name and property attributes that separate twitter tags from Open Graph tags.developer.mozilla.org
- The Open Graph protocolThe specification behind the og: tags the card parser falls back to when a twitter tag is missing.ogp.me
- Google Search Central: structured data basicsExplains how head level markup is discovered by crawlers, which is the same fetch path card parsers use.developers.google.com
Frequently asked questions
Common questions about the twitter card generator.
Yes. The platform was renamed but the markup was not. The meta tags are still named twitter:card, twitter:title and twitter:image, and they are still the tags the crawler reads when a link is posted. Nothing about the tag vocabulary changed with the rebrand.
The three usual causes are a relative rather than absolute image URL, an image the crawler cannot reach because it sits behind authentication or a robots rule, and a cached result from an earlier version of the page. Changing the image file name forces a fresh fetch.
You can, but there is no reason to. Open Graph covers Facebook, LinkedIn, Slack, Discord and most messaging apps, and the card parser falls back to it for any twitter tag you omit. Shipping both sets costs a few lines and covers every destination.
Use 1200 by 630 pixels. It satisfies the roughly 2:1 crop the summary large image card applies, it is comfortably above the 300 by 157 minimum, and it is the same asset Open Graph wants, so one file serves every platform you are likely to post to.
No, both are optional. twitter:site attributes the card to a publisher account and twitter:creator attributes it to an author. Cards render normally without either, so add them only when the accounts exist and the attribution is wanted.