Twitter/X Card Generator & Preview

What is a Twitter card?

A Twitter card (now an X card) is a rich link preview that appears when someone shares a URL on X. Instead of a bare link, X reads a set of <code>twitter:</code> meta tags from your page and displays a formatted card with a title, description, and image. The result looks more like a news article preview than a plain URL, which drives significantly more clicks.

The system works by X's crawler fetching your page when a link is posted, reading the tags from the server-rendered <code>&lt;head&gt;</code>, and caching the result for future shares. This tool generates the correct tags and shows a live preview so you can confirm everything looks right before adding them to your site.

Twitter card types: summary vs summary_large_image

There are two card types in common use. <strong>summary</strong> shows a small square thumbnail to the left of the title and description. <strong>summary_large_image</strong> shows a large, edge-to-edge image above the title and description, taking up much more visual space in the feed.

For most content — blog posts, landing pages, product pages, and documentation — summary_large_image is the stronger choice. It commands more attention in a scrolling feed and gives you space to communicate your brand visually. Use summary for pages where you have a small logo or icon-sized image and the text carries the weight.

The complete Twitter card meta tags reference

All Twitter card tags use the <code>name</code> attribute, not <code>property</code> like Open Graph. They sit in the <code>&lt;head&gt;</code> of your page. Here are all the tags and what they control:

• <strong>twitter:card</strong> (required): the card layout. Set to <code>summary</code> or <code>summary_large_image</code>.
• <strong>twitter:title</strong>: the card headline. Falls back to <code>og:title</code> if omitted. Keep it under 70 characters.
• <strong>twitter:description</strong>: the card summary text. Falls back to <code>og:description</code> if omitted.
• <strong>twitter:image</strong>: the card image. Must be an absolute HTTPS URL. Falls back to <code>og:image</code> if omitted.
• <strong>twitter:image:alt</strong>: alternative text for the image, for accessibility and screen readers.
• <strong>twitter:site</strong>: the @handle of the website or brand, for example <code>@screenshotrender</code>. Optional but recommended.
• <strong>twitter:creator</strong>: the @handle of the individual author. Optional; mainly used for article bylines.

Twitter card image size and requirements

The image requirements differ by card type. For <strong>summary_large_image</strong>, the recommended size is <strong>1200x628 pixels</strong> (roughly a 1.91:1 ratio). The minimum is 280x150 and the maximum file size is 5 MB. For <strong>summary</strong>, the image is cropped to a square, so center your subject. Minimum size is 144x144 px.

All images must be served over HTTPS. Supported formats are PNG, JPG, WebP, and GIF (static only for cards). If the image URL redirects, X may not follow it correctly, so use a direct final URL.

If you need a correctly sized 1200x628 card image for every page, ScreenshotRender can render one from a URL or an HTML template on demand, returning a PNG you can serve directly as your <code>twitter:image</code>.

How to add Twitter cards to your website

Add the tags inside the <code>&lt;head&gt;</code> element of each page. A minimal setup for a blog post looks like this:

• <code>&lt;meta name="twitter:card" content="summary_large_image"&gt;</code>
• <code>&lt;meta name="twitter:title" content="Your post title"&gt;</code>
• <code>&lt;meta name="twitter:description" content="A short summary"&gt;</code>
• <code>&lt;meta name="twitter:image" content="https://yoursite.com/og.png"&gt;</code>
• <code>&lt;meta name="twitter:site" content="@yourhandle"&gt;</code>

How to preview and test your Twitter card

The official Twitter Card Validator was shut down in 2022. The current way to preview a card is to paste the URL into a draft post on X (you do not need to publish it) and see how it unfurls. X reads the live page each time, so changes you make to the tags are reflected immediately in a fresh draft.

Use the generator above to preview the card before your page is even live, so you can confirm title truncation, description, and image composition look right. Once the page is published with the tags, paste the live URL in an X draft to do a final check.

Twitter card validator: what to check

A twitter: tag audit covers more than just whether the tags are present. Here is a checklist of what to verify:

• <strong>twitter:card</strong> is present, spelled correctly, and set to a valid value.
• <strong>twitter:image</strong> (or <code>og:image</code> as fallback) is an absolute HTTPS URL that resolves to a real image.
• Image dimensions meet the minimums for the chosen card type (1200x628 is the safe target for summary_large_image).
• Image file size is under 5 MB.
• <strong>twitter:title</strong> (or <code>og:title</code>) is present and not truncating at an awkward point.
• The tags are in the server-rendered HTML source, not inserted by client-side JavaScript after page load.

Twitter cards vs Open Graph tags

Open Graph (<code>og:</code>) and Twitter cards (<code>twitter:</code>) are two overlapping standards. Open Graph is the broader one, read by Facebook, LinkedIn, Slack, Discord, WhatsApp, and many others. Twitter cards are X's own format layered on top.

The key relationship: X reads <code>og:title</code>, <code>og:description</code>, and <code>og:image</code> as fallbacks when the corresponding <code>twitter:</code> tags are missing. If you already have full Open Graph tags on your page, the only new tag you need is <code>twitter:card</code> to specify the layout.

You can audit the full set of tags on any live URL with the <a href="/tools/open-graph-preview" class="text-orange-600 hover:underline font-medium">Open Graph Preview &amp; Checker</a>, which shows how both OG and twitter: tags resolve and flags anything missing.

How to fix a broken Twitter card

If your card is not appearing or is showing incorrectly, work through these common causes in order:

• <strong>Missing twitter:card</strong>: X will not show any card without this tag. Add it even if you have full OG tags.
• <strong>Non-HTTPS image</strong>: X rejects images served over HTTP. Make sure the URL starts with <code>https://</code>.
• <strong>Image too large</strong>: files over 5 MB are silently ignored. Compress and re-test.
• <strong>Image URL redirects</strong>: use the direct final URL, not one that 301s to the real image.
• <strong>Tags added by JavaScript</strong>: X reads the raw server-rendered HTML. Tags injected by a client-side script after page load are not picked up.
• <strong>Stale cache</strong>: after fixing the tags, paste the URL in a fresh draft tweet. X re-fetches live pages for draft previews, so you should see the update right away.

How to generate a Twitter card image with ScreenshotRender

Your <code>twitter:image</code> should be a pixel-perfect 1200x628 image that represents the page content. One approach is to render a screenshot of the page itself at those dimensions. Another is to render a custom HTML template with the title, description, and brand colors baked in, giving every page a unique social image.

ScreenshotRender does both: point its API at a URL and it returns a PNG at whatever viewport size you specify, which you can serve directly as your <code>twitter:image</code>. The <a href="/tools/og-image-generator" class="text-orange-600 hover:underline font-medium">OG Image Generator</a> tool on this site also lets you design and download a 1200x630 card image for free, which you can then host and reference in your twitter:image tag.