Free Twitter Card Generator: Create X Card Meta Tags
Build X (Twitter) card tags for any page, with matching Open Graph tags, a live preview and image checks based on X's official specs.
- ✓ Free
- ✓ No sign-up
- ✓ All 4 card types
- ✓ Open Graph included
- ✓ Image size checks
- ✓ Runs in your browser
By Sheikh Shadi Shuvo, Founder of Backlink Express · Updated
Preview (approximate)
example.com
Your title
X's real layout changes over time. Share the link in a draft post to see the final card.
Meta tags
<meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website">Twitter cards in one sentence
Twitter (X) cards are meta tags in your page's <head> that turn a shared link into a rich preview with a title, description and image. If they're missing, X falls back to your Open Graph tags.
How to create a Twitter card
- Pick a card type. Most pages should use "Summary with large image".
- Fill in the title, description and image URL. The counters show X's character limits, and we check the image size and ratio.
- Copy the tags (with matching Open Graph tags if you need them) and paste them into your page's <head>.
- Test it by pasting your link into a draft post on X.
The 4 Twitter card types
| twitter:card value | What it shows | Best for |
|---|---|---|
| summary_large_image | Large 2:1 image above the title | Articles, products, landing pages |
| summary | Small square image next to the title | Pages with only a logo or icon |
| player | Embedded video or audio player | Video and podcast pages |
| app | App name, icon and store link | Mobile app promotion |
Source: X Developer Platform, Cards markup reference (checked October 2026).
Twitter card tags and limits
| Tag | Limit / note | Open Graph fallback |
|---|---|---|
| twitter:card | Card type (required to choose a layout) | og:type |
| twitter:site | @username of the website | — |
| twitter:creator | @username of the author | — |
| twitter:title | Max 70 characters | og:title |
| twitter:description | Max 200 characters | og:description |
| twitter:image | Under 5 MB; JPG, PNG, WEBP or GIF | og:image |
| twitter:image:alt | Max 420 characters | og:image:alt |
| twitter:player (+ width, height) | HTTPS iframe URL; width and height in pixels | — |
| twitter:app:id / name (iphone, ipad, googleplay) | Store IDs for app cards | — |
Source: X Developer Platform, Cards markup reference (checked October 2026).
Which tags are required? X's own pages disagree slightly: the markup reference lists twitter:site as required, while the large-image card page lists twitter:card and twitter:title. To be safe, always include card, site, title, description and image, which is what this generator outputs.
Twitter card image size and format
| Summary with large image | Summary | |
|---|---|---|
| Aspect ratio | 2:1 | 1:1 |
| Minimum size | 300 × 157 px | 144 × 144 px |
| Maximum size | 4096 × 4096 px | 4096 × 4096 px |
| Recommended | 1200 × 600 px | 400 × 400 px or larger |
| File size | Under 5 MB | Under 5 MB |
| Formats | JPG, PNG, WEBP, GIF (first frame only); no SVG | Same |
Source: X Developer Platform, summary and summary_large_image card docs. 'Recommended' sizes are ours, chosen to meet X's ratio.
1200×630 or 1200×600? Most generators recommend 1200×630, which is the Open Graph size. X's documented ratio for large image cards is 2:1, so a 1200×630 image can be trimmed slightly. Keep text and logos away from the edges and either size works. X also advises against generic images like your site logo or an author photo for large cards.
Twitter cards vs Open Graph
Open Graph (og:) tags are used by Facebook, LinkedIn, Slack and many other apps. X reads its own twitter: tags first and falls back to Open Graph when they're missing. The practical setup:
- Always set Open Graph tags for title, description, image and URL.
- Add twitter:card to choose the large image layout, plus twitter:site.
- Only add twitter:title, description and image if you want X to show something different from Open Graph.
How to add the tags to your site
- Any website: paste the tags inside the
<head>of each page, with values for that page. - WordPress: Rank Math and Yoast output Twitter and Open Graph tags from your SEO settings; set a default image and override it per post.
- Next.js: use the
twitterandopenGraphfields in the page's metadata.
While you're in the page head, add structured data too with our Schema Markup Generator.
Example: a complete tag set
This is what a blog post with a large-image card and Open Graph fallbacks looks like in the page head:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplebrand">
<meta name="twitter:creator" content="@janedoe">
<meta name="twitter:title" content="How to Vet a Guest Post Site in 10 Minutes">
<meta name="twitter:description" content="A quick checklist for traffic, DR, spam signals and editorial quality.">
<meta name="twitter:image" content="https://example.com/images/vetting-1200x600.jpg">
<meta name="twitter:image:alt" content="Checklist on a laptop screen">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/vet-guest-post-site">
<meta property="og:title" content="How to Vet a Guest Post Site in 10 Minutes">
<meta property="og:description" content="A quick checklist for traffic, DR, spam signals and editorial quality.">
<meta property="og:image" content="https://example.com/images/vetting-1200x600.jpg">Designing a card image people click
- Use 1200 × 600 px for large cards so the image stays sharp on high-resolution screens.
- Keep text short and central. Feeds crop and scale images differently; a few large words survive best.
- Show the benefit, not just a logo: a result, a number or the main idea of the page.
- Brand consistently with the same colours and logo position, so people recognise your posts.
- Write real alt text describing the image; it helps people using screen readers.
- Compress the file. A 100–300 KB JPG or WEBP loads fast and stays well under the 5 MB limit.
Other apps that read these tags
Open Graph tags are read by most apps that show link previews, including Facebook, LinkedIn, Slack, Discord and WhatsApp. That's why this generator includes them: one set of tags gives your page a good preview almost everywhere it's shared. Platforms cache previews, so after changing tags you may need to wait or use the platform's own refresh tool.
Why your Twitter card isn't working
| Problem | Fix |
|---|---|
| No card at all | Make sure robots.txt allows Twitterbot and the page is public |
| Old title or image still showing | X re-reads tags roughly every 7 days; add a version to the image URL (?v=2) to refresh the image |
| Image missing | Use an absolute https:// URL, under 5 MB, not SVG, publicly accessible |
| Small card instead of large | Set twitter:card to summary_large_image |
| Image badly cropped | Use a 2:1 image and keep important content in the centre |
| Player card not working | Use an HTTPS player URL and set width and height |
| App card ID errors | Remove the 'id' prefix from App Store IDs |
Based on X Developer Platform, 'Troubleshooting Cards' (checked October 2026).
Previewing cards: X removed the preview feature from its Card Validator in 2022, so the reliable way to check a card is to paste the URL into a new post without publishing it.
About this tool
- Privacy: everything runs in your browser; nothing you type is sent to our server.
- Image check: your browser loads the image to measure its size and ratio.
- Specs: based on X's developer documentation, checked October 2026.
Frequently asked questions
What is a Twitter card?
A Twitter (X) card is the rich preview, with title, description and image, that appears when someone shares your link on X. It's controlled by twitter: meta tags in your page's HTML.
Is this Twitter card generator free?
Yes. No sign-up, and the tags are built in your browser.
Which card type should I use?
Use 'summary_large_image' for articles, products and landing pages; it shows a big 2:1 image. Use 'summary' when you only have a square logo or icon. 'player' is for embeddable video or audio, and 'app' for mobile app downloads.
What size should my Twitter card image be?
For large image cards, X's spec is a 2:1 ratio, at least 300×157 and at most 4096×4096 pixels, under 5 MB. 1200×600 works well. Summary cards use a 1:1 image of at least 144×144.
Is 1200×630 the right size?
1200×630 is the common Open Graph size (about 1.91:1). X's documented ratio for large image cards is 2:1, so X may crop a little. If X matters most to you, use 1200×600.
Which image formats work?
JPG, PNG, WEBP and GIF. SVG isn't supported, and only the first frame of an animated GIF is used.
How long can the title and description be?
X's markup reference lists a maximum of 70 characters for twitter:title and 200 for twitter:description. Image alt text can be up to 420 characters.
Do I need Twitter card tags if I have Open Graph tags?
Not strictly. X falls back to og:title, og:description and og:image when twitter: tags are missing. You still need twitter:card to choose the large image layout.
Why isn't my card showing or updating?
Common causes: robots.txt blocks Twitterbot, the image is over 5 MB or not public, or X has cached the old version. X re-reads card tags roughly every seven days; changing the image URL (for example adding ?v=2) forces a fresh image.
Does the Card Validator still exist?
X removed the preview from its Card Validator in 2022. To preview a card now, paste the link into a new post (don't publish it) and check how it looks.
Where do I add the tags?
Paste them into the <head> of the page. In WordPress, SEO plugins like Rank Math and Yoast have Twitter/X and Open Graph settings that output these tags for you.
Do Twitter cards help SEO?
Not as a ranking factor. They make shared links more attractive and clickable on X, which can bring more visits.
More free SEO tools
DR Checker
Check the Ahrefs Domain Rating of up to 5 websites at once.
Spam Score Checker
See the spam score of up to 5 domains, with the signals behind it.
Google Index Checker
Check if up to 5 URLs are in Google, and why a page might not be.
Schema Checker
Find and validate the structured data on any page against Google's rules.
Need links from sites with real authority and real traffic?
Browse manually vetted publishers and order guest posts from one dashboard.
See the marketplaceSpecs follow X's developer documentation for Cards (checked October 2026). Backlink Express is not affiliated with X Corp.