How to Generate a Twitter Card Image with a Free Online Generator

Updated

Use ogimage.website to build a Twitter card image at 1200×630 px and export it as a PNG. That size matches the standard large-image card ratio, so the preview stays sharp on both desktop and mobile. The tool lets you pick a template, set fonts, and optionally add an app screenshot before exporting.

What a Twitter card image needs

A Twitter card is the preview block that appears when a link is shared. The image inside it is pulled from the page's meta tags, and the large-image format expects a 1200×630 px file — roughly a 1.91:1 ratio. If you upload something much taller or wider, Twitter crops it, usually from the center, which can cut off text or a logo.

Two practical rules:

  • Keep key content centered. Cropping happens at the edges, so titles and logos should sit in the middle band.
  • Export PNG for text and UI. PNG keeps sharp edges on type and screenshots; a JPEG can blur small text.

Step-by-step: build the image in ogimage.website

  1. Open the generator. Go to ogimage.website and start a new image in the studio.
  2. Choose a template. Pick a layout that leaves room for a headline. Templates are the fastest way to get a balanced composition.
  3. Enter your title and description. Type the headline you want people to read in the preview. Short titles (a few words) survive cropping better than long sentences.
  4. Add a background or screenshot. Upload a screenshot if you want to show the product, or use a solid/gradient background for a cleaner look. The studio supports optional app screenshots.
  5. Set fonts and colors. Match your brand by adjusting the typeface and palette. Keep contrast high so the text stays readable at small preview sizes.
  6. Export as 1200×630 PNG. Download the file. The export is a 1200×630 PNG, which is the size you want for the card.

Check the result before you publish

After exporting, preview how the image will look when cropped. A quick way is to view it inside a 1.91:1 frame — anything outside that frame is what gets trimmed.

  • Text near the edges? Move it toward the center.
  • Logo cut off? Scale it down or reposition.
  • Too much empty space? Tighten the layout so the headline fills the frame.

Common reasons a card image doesn't show

Symptom Likely cause Fix
No image at all Meta tag missing or wrong Confirm the page points to the exported image URL
Blurry or stretched Wrong dimensions Re-export at 1200×630 PNG
Old image still showing Cached preview Wait for the cache to refresh, or re-share the link
Cropped text Content near edges Recenter the headline and logo

If the image is correct but the preview looks stale, that's usually caching rather than a file problem — the card updates once the cache clears.

When to use this approach

This workflow fits anyone who needs a shareable preview image without design software: bloggers, product pages, and social posts. If you already have a branded template, reuse it and just swap the title and screenshot each time. If you need a one-off image with no branding, a plain template plus a short headline is enough.