Twitter Card Generator
Fill in a few fields to get the twitter: meta tags (plus og: fallbacks) that control how your link looks when shared on X, with a live preview and checks for length and image size. Nothing leaves your browser.
Preview
Check out this page 👇
A generic approximation; X changes its design often and may crop images differently on each device.
How to use the Twitter Card Generator
- Pick a card type: Large image for articles and landing pages, Summary for a small square thumbnail, App or Player for apps and video.
- Fill in the fields: account usernames, title, description, page URL, image URL and alt text. Watch the counters.
- Check the preview and the messages below it. Load a local image to check its size and ratio.
- Keep Open Graph fallbacks on so the same title and image work on Facebook, LinkedIn, Slack and others.
- Copy the meta tags into the
<head>of your page, publish it, then share the link to check the result.
Twitter card tags reference
| Tag | Used for | Notes |
|---|---|---|
| twitter:card | All cards | summary, summary_large_image, app or player. Required. |
| twitter:site | All cards | @username of the website or brand. |
| twitter:creator | Large image | @username of the author. |
| twitter:title | Summary, large image, player | Up to 70 characters. Falls back to og:title. |
| twitter:description | Summary, large image, player | Up to 200 characters. Falls back to og:description. |
| twitter:image | Summary, large image, player | Absolute URL, under 5 MB, JPG/PNG/WEBP/GIF. Falls back to og:image. |
| twitter:image:alt | With an image | Up to 420 characters of alt text. |
| twitter:player, :width, :height | Player | HTTPS URL of an iframe player and its size in pixels. |
| twitter:app:id:iphone / :ipad / :googleplay | App | App Store numeric ID or Google Play package name. |
Image sizes at a glance
| Card | Aspect ratio | Recommended | Minimum |
|---|---|---|---|
| summary_large_image | 2:1 | 1200 × 600 px | 300 × 157 px |
| summary | 1:1 | 400 × 400 px or more | 144 × 144 px |
| Open Graph (Facebook, LinkedIn) | 1.91:1 | 1200 × 630 px | 600 × 315 px for a large preview |
A single 1200 × 630 image works acceptably on most networks; X crops it slightly to 2:1, so keep text and logos away from the top and bottom edges. Shrink large files with the image compressor before uploading.
Testing your card
Cards are generated by X's crawler, so tags must be present in the server-sent HTML, not injected later by JavaScript, and the page and image must be publicly reachable and not blocked in robots.txt. Paste the finished tags into the head of your page, publish, and then preview the shared link in a post draft. To check how a page's Open Graph tags will look on other networks, use the Open Graph preview; for the rest of the head, including the title and description used by search engines, see the meta tag generator.
Frequently asked questions
What are Twitter Cards?
Twitter Cards (now X cards) are meta tags in a page's HTML head that tell X which title, description and image to show when someone posts a link to the page. Without them, X falls back to Open Graph tags and, if those are missing too, shows a plain link.
What is the difference between summary and summary_large_image?
summary shows a small square thumbnail next to the title, while summary_large_image shows a wide image above or behind the title. Large image cards get much more attention in the timeline and are the usual choice for articles, products and landing pages.
What image size should I use?
For summary_large_image use a 2:1 image; 1200 × 600 px works well, with a minimum of 300 × 157 px. For summary use a square image of at least 144 × 144 px. Keep files under 5 MB and use JPG, PNG, WEBP or GIF (only the first frame of a GIF is shown); SVG is not supported.
Do I need both twitter: and og: tags?
X reads twitter: tags first and falls back to og:title, og:description and og:image when they are missing, but twitter:card itself has no Open Graph equivalent. A common, compact setup is twitter:card and twitter:site plus a full set of Open Graph tags; the Shortest output option produces exactly that.
Why does my card not update after I change the tags?
X caches card data for each URL for some time. Make sure the new tags are in the published HTML (not added later by JavaScript), that the image URL is public and not blocked by robots.txt, then post the link again. Adding a harmless query string such as ?v=2 forces a fresh fetch.
What is twitter:site vs twitter:creator?
twitter:site is the account of the website or brand, and twitter:creator is the account of the author of the content. Both are optional usernames such as @example.