When you paste a link into X (formerly Twitter), the big image, title, and description that show up are called a card. Get the markup right and your link looks like a polished, clickable preview. Get it wrong and X falls back to a bare URL that nobody taps. This guide walks through making a Twitter/X card image from scratch: the exact meta tags, the correct dimensions, how to test it, and the mistakes that quietly break previews.

Step 1: Add the Twitter card meta tags

X reads a small set of <meta> tags from the <head> of your page. The most important one is twitter:card. For a large, edge-to-edge image you want summary_large_image.

Drop these into your page's <head>:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to make a Twitter/X card image" />
<meta name="twitter:description" content="The exact meta tags, sizes, and tests for a clean X link preview." />
<meta name="twitter:image" content="https://example.com/og/twitter-card.png" />
<meta name="twitter:image:alt" content="Article title on a soft gradient background" />

A couple of notes:

twitter:card set to summary_large_image gives the full-width image. Use summary only if you want a small square thumbnail instead.
twitter:image must be an absolute URL (starts with https://). Relative paths like /og/card.png will not resolve.
twitter:image:alt is optional but good for accessibility and costs you nothing.

Step 2: Reuse your Open Graph tags (the smart shortcut)

X falls back to Open Graph tags when the twitter: equivalents are missing. So if you already have OG tags, you often only need to add twitter:card. This block covers both X and platforms like LinkedIn, Slack, and Discord at once:

<meta property="og:title" content="How to make a Twitter/X card image" />
<meta property="og:description" content="The exact meta tags, sizes, and tests for a clean X link preview." />
<meta property="og:image" content="https://example.com/og/twitter-card.png" />
<meta property="og:url" content="https://example.com/blog/twitter-card" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />

With this setup, X uses og:title, og:description, and og:image, and the lone twitter:card tag tells it to render the large layout. One image, every platform.

Step 3: Use the right size

This is where most cards go wrong. For summary_large_image, X supports an image up to 1600x900 (a clean 16:9 ratio). 1200x675 is also valid and is the common, lighter-weight choice.

If you are making a single image to share everywhere, the standard Open Graph size of 1200x630 (1.91:1) is a safe default. X will accept it and crop slightly, but a true 16:9 image fills the card edge to edge with no awkward cropping.

A few practical limits:

Keep the file under 5 MB. Smaller is better for fast preview rendering.
Use PNG or JPG. PNG is crisp for text and flat color; JPG is lighter for photographic backgrounds.
Keep important text away from the very edges. Cards can be cropped a few pixels on different surfaces, so leave a safe margin.

If you export from FreeOGImage, images render at 2x for sharpness, so text stays clean on high-density displays.

Step 4: Test with the X card validator

Always preview before you announce a link. Two reliable ways to check:

The X Cards Validator. Paste your full page URL and it shows exactly how the card will render, plus any errors it found reading your tags.
A real post composer. Open the X post box and paste your URL. If the image, title, and description appear, you are good. Delete the draft.

X aggressively caches cards. If you fixed your tags but still see an old (or missing) preview, that cache is usually the cause. Re-running the validator on the URL typically forces a fresh fetch.

Step 5: Common mistakes that break cards

These are the issues that come up again and again:

Relative image URL. twitter:image must be absolute. A relative path silently produces no image.
Image behind a login or blocked by robots. X's crawler must be able to fetch the image and page anonymously. If a firewall, auth wall, or robots.txt blocks it, the card stays empty.
No twitter:card tag at all. Without it, X may show a tiny preview or nothing. Add at least summary_large_image.
Wrong aspect ratio. A tall or square image gets center-cropped into the 16:9 frame, often slicing off your headline. Design at 16:9 (or 1.91:1) on purpose.
Stale cache. You shipped the fix but the old card persists. Re-validate the URL to refresh.
HTTP instead of HTTPS. Serve the image over https://. Insecure URLs are unreliable.

Step 6: Make one free in the editor

You do not need Photoshop or a paid tool to produce a sharp 16:9 card. FreeOGImage runs entirely in your browser: no signup, no watermark, and nothing is uploaded to a server.

Open the editor with the gradient mesh template loaded.
Type your headline and adjust colors, fonts, and the optional logo.
Choose the X / Twitter summary_large_image size (1600x900, or 1200x675).
Export the PNG, host it at a public HTTPS URL, and point twitter:image (or og:image) at it.

Want a different look first? Browse the full template gallery, or read more guides on the blog.

A clean card is a few meta tags plus one well-sized image. Set up the tags once, design the image in a couple of minutes, validate the URL, and every link you share on X will look like it belongs there.

Make your Twitter/X card now and ship a preview people actually click.

How to make a Twitter/X card image (step by step)