🐦 Twitter Card Generator
By ToolNimba SEO Team · Updated 2026-06-19
Large image is the standard for articles and pages. Summary is the small square card.
The headline on the card. Aim for under 70 characters.
One or two sentences. Keep it under about 200 characters so it does not get cut off.
An absolute URL to the preview image. Use 1200x628 px for the large card.
The X handle of the site or publisher, including the @.
The handle of the content author, including the @.
A simplified approximation. X crops and styles cards slightly differently.
Paste these tags inside the <head> of your page.
A Twitter card controls how your link looks when it is posted on X (formerly Twitter): the title, the description and the preview image that turn a bare URL into a rich, tappable card. This generator builds the full set of twitter: meta tags from a simple form, shows a live preview of the card, and lets you copy the markup with one click. Everything runs in your browser, so your titles, URLs and image links never leave the page.
What is the Twitter Card Generator?
Twitter cards are a small set of meta tags placed in the head of your HTML. Unlike Open Graph tags, which use the property attribute, Twitter card tags use the name attribute, for example a twitter:card name tag set to summary_large_image. When someone posts your URL, X reads these tags and assembles a branded preview card instead of showing only the raw link.
There are two card types you will use day to day. The summary card shows a small square thumbnail next to the title and description, which suits text-heavy pages and profiles. The summary_large_image card shows a wide banner image above the title and description, which is the default choice for articles, products and landing pages where a strong visual matters. You pick one with the twitter:card tag, and the image expectations differ between the two.
X falls back to your Open Graph tags when a matching twitter: tag is missing, so if a page already has an og:title and og:image, X can build a card without any twitter: tags at all. Adding explicit twitter: tags still helps: it lets you set a different title or image specifically for X, and it lets you credit the publisher with a twitter:site handle and the author with a twitter:creator handle. Because every value ends up inside an HTML attribute, any quote, ampersand or angle bracket in your text must be escaped, which this tool does for you automatically.
When to use it
- Giving a blog post or landing page a proper title, description and image when it is posted on X.
- Choosing between the small summary card and the large summary_large_image banner for a specific page.
- Crediting the publisher with a twitter:site handle and the author with a twitter:creator handle.
- Fixing a page that shows the wrong image, or no image at all, when its link is shared on X.
- Generating a reusable twitter: meta tag template you can drop into many pages of a site.
How to use the Twitter Card Generator
- Choose the card type: summary for a small square thumbnail, or summary_large_image for a wide banner.
- Enter your twitter:title and a short twitter:description that summarise the page.
- Add an absolute twitter:image URL (starting with https://), ideally 1200x628 px for the large card.
- Optionally add your twitter:site and twitter:creator handles, including the @.
- Check the live preview card, then click Copy and paste the tags inside the head of your page.
Formula & method
Worked examples
A blog post titled "Coffee & Cream" at https://blog.example.com/coffee, with a wide cover image.
- twitter:card is set to summary_large_image because the post has a strong banner image.
- The ampersand in the title is escaped, so "Coffee & Cream" becomes content="Coffee & Cream".
- twitter:image is an absolute 1200x628 image URL so the large banner fills without cropping.
- twitter:site is set to @blogexample so the post credits the publisher account.
Result: <meta name="twitter:card" content="summary_large_image"> · <meta name="twitter:title" content="Coffee & Cream"> · <meta name="twitter:image" content="https://blog.example.com/cover.jpg"> · <meta name="twitter:site" content="@blogexample">
A profile page with a small square logo, posted on X with the author handle @acme.
- twitter:card is set to summary because a small square thumbnail suits a profile.
- twitter:image points to a square logo image (for example 600x600 px).
- twitter:creator is set to @acme to credit the author of the content.
- No twitter:site is supplied, so only the creator handle appears on the card.
Result: <meta name="twitter:card" content="summary"> · <meta name="twitter:image" content="https://acme.example.com/logo.png"> · <meta name="twitter:creator" content="@acme">
Twitter card tags and what each one does
| Tag | Required | Purpose |
|---|---|---|
| twitter:card | Yes | The card type: summary or summary_large_image. |
| twitter:title | Recommended | The headline shown on the card. |
| twitter:description | Recommended | The summary line under the title. |
| twitter:image | Recommended | Absolute URL of the preview image. |
| twitter:site | Optional | The @handle of the site or publisher. |
| twitter:creator | Optional | The @handle of the content author. |
Image guidance by card type
| Card type | Recommended size | Aspect ratio |
|---|---|---|
| summary_large_image | 1200 x 628 px | 1.91:1 |
| summary | 600 x 600 px (square) | 1:1 |
| Both (file limit) | Under about 5 MB | PNG, JPG, WEBP or GIF |
Common mistakes to avoid
- Using a relative image path. twitter:image must be an absolute URL beginning with https://. A relative path like /cover.jpg will not resolve when X fetches it from its own crawler, so the image silently disappears from the card.
- Mixing up the property and name attributes. Open Graph tags use property (og:title), but Twitter card tags use name (twitter:card). Writing a twitter: tag with property, or an og: tag with name, means the platform ignores it.
- Choosing the wrong card type for the image. summary_large_image expects a wide 1.91:1 banner, while summary expects a small square. A square image on a large card, or a wide image on a summary card, will be cropped awkwardly.
- Expecting the card to update instantly. X caches the card it first scraped. After you change your tags, validate the URL again in the X Card Validator (the Post Inspector) to clear the cache and pull your new values.
- Forgetting to escape special characters. An unescaped quote or angle bracket in your title or description can break the meta tag markup. Always escape an ampersand as &, a quote as ", and the angle brackets as < and >. This tool does it for you.
Glossary
- Twitter card
- A rich link preview on X, built from twitter: meta tags, that turns a bare URL into a card with a title, description and image.
- summary card
- A card type that shows a small square thumbnail next to the title and description, suited to text-heavy pages.
- summary_large_image
- A card type that shows a wide banner image above the title and description, the default for articles and landing pages.
- twitter:site
- The meta tag holding the @handle of the site or publisher account that the card should credit.
- twitter:creator
- The meta tag holding the @handle of the individual author of the content shown on the card.
Frequently asked questions
What is a Twitter card?
A Twitter card is a rich preview that X builds from twitter: meta tags in the head of your page. Instead of showing a plain URL, X displays a card with your title, description and image. There are two main types: the small summary card and the large summary_large_image card.
Where do I put the generated meta tags?
Paste them inside the head element of your HTML page, alongside your title and meta description tags. They must be in the head, not the body, or the X crawler will not read them when it builds the card.
What is the difference between summary and summary_large_image?
The summary card shows a small square thumbnail beside the title and description, which suits profiles and text-heavy pages. The summary_large_image card shows a wide banner image above the text, which is the usual choice for articles, products and landing pages with a strong visual.
Do I still need Twitter card tags if I already have Open Graph tags?
Not strictly. X falls back to your Open Graph tags (og:title, og:description, og:image) when the matching twitter: tag is missing. Adding twitter: tags lets you set a different title or image specifically for X and credit accounts with twitter:site and twitter:creator.
What size should my twitter:image be?
For summary_large_image use about 1200 by 628 pixels (a 1.91:1 ratio). For the small summary card use a square image such as 600 by 600 pixels. Keep the file under about 5 MB and make sure the URL is absolute, starting with https://, or the image will not load.
Is this Twitter card generator private?
Yes. Everything runs in your browser with plain JavaScript. Your titles, URLs and image links are never uploaded or sent anywhere, and there is no network request involved in building the tags.