← Back to Blog

Twitter Card Images: Complete Guide to Sizes, Types, and Setup

Get the definitive reference for Twitter Card image sizes, meta tag setup, and troubleshooting so your links always look great on X/Twitter.

What Are Twitter Cards?

Twitter Cards are rich media attachments that appear when someone shares a link on X (formerly Twitter). Instead of showing a bare URL, Twitter fetches special meta tags from your page and renders a visual preview with an image, title, and description. This preview is what determines whether someone scrolls past your link or stops to click it.

Twitter Cards rely on a combination of Open Graph tags and Twitter-specific meta tags. When both are present, Twitter prefers its own twitter: tags. When only OG tags exist, Twitter falls back to those. Understanding which tags to use and what image sizes each card type requires is essential for getting your previews right.

Twitter Card Types and Image Sizes

Twitter supports several card types, but the two you will use most often are summary and summary_large_image. Each has different image requirements.

Summary Card

The summary card shows a small square thumbnail to the left of the title and description. It works well for general content pages, homepages, and profile links where you want a compact preview.

  • Image size: 144x144 pixels (minimum 144x144, displayed as a square)
  • Aspect ratio: 1:1
  • Max file size: 5 MB
  • Supported formats: JPG, PNG, GIF, WEBP

Summary Large Image Card

The summary_large_image card shows a large, prominent image above the title and description. This is the most popular choice for blog posts, articles, product pages, and any content where you want maximum visual impact.

  • Image size: 1200x628 pixels (recommended)
  • Aspect ratio: Approximately 1.91:1
  • Minimum size: 300x157 pixels
  • Max file size: 5 MB
  • Supported formats: JPG, PNG, GIF, WEBP

For best results across both Twitter and other platforms like LinkedIn and Facebook, design your images at 1200x630 pixels. This is the universal OG image size and works perfectly as a summary_large_image card.

Required Meta Tags

Here is the complete set of meta tags for a summary_large_image card. Add these to the <head> of every page:

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description under 200 chars" />
<meta name="twitter:image" content="https://example.com/your-image.png" />
<meta name="twitter:image:alt" content="Description of the image" />

<!-- Open Graph fallbacks (also used by other platforms) -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description" />
<meta property="og:image" content="https://example.com/your-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

If you want the smaller summary card instead, change the twitter:card value to summary and provide a square image.

Setting Up Twitter Cards with OGPix

Manually creating unique images for every page is tedious. With OGPix, your twitter:image tag points to a dynamic URL that generates the image on the fly:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image"
  content="https://ogpix-pi.vercel.app/api/og
    ?title=Twitter+Card+Guide
    &description=Everything+about+Twitter+Cards
    &theme=dark
    &key=og_live_your_key_here" />

Every page gets a unique, professionally designed preview image without any manual design work. The image is generated at 1200x630 pixels — the perfect size for summary_large_image cards.

Validating Your Twitter Cards

Before publishing, always validate that your cards render correctly. Here are the tools to use:

  • Twitter Card Validator: Visit cards-dev.twitter.com/validator, paste your URL, and preview exactly what the card will look like.
  • Open Graph Debugger tools: Sites like opengraph.xyz let you preview how your link will appear across Twitter, Facebook, LinkedIn, and more.
  • View page source: Check that your meta tags are present in the rendered HTML, not just in client-side JavaScript that crawlers cannot execute.

Common Issues and How to Fix Them

  • Image not showing: The image URL must be an absolute URL starting with https://. Relative paths will not work.
  • Wrong card type displayed: Twitter caches card data aggressively. After changing your meta tags, use the Card Validator to force a re-crawl of your page.
  • Image gets cropped badly: Stick to 1200x628 for large cards and keep important content centered. Twitter may crop edges slightly depending on the viewport.
  • Image file too large: Keep images under 5 MB. Use PNG for text-heavy images and JPEG for photographic content.
  • Tags not being read: If your site is a single-page app (SPA), meta tags rendered via JavaScript may not be visible to Twitter's crawler. Use server-side rendering or a framework like Next.js that renders meta tags on the server.
  • Stale previews: Twitter can cache card data for up to 7 days. If your image changed but the preview hasn't updated, re-validate using the Card Validator to clear the cache.

Quick Reference: Twitter Card Sizes

Card Type              | Image Size     | Aspect Ratio
-----------------------|----------------|-------------
summary                | 144x144 px     | 1:1
summary_large_image    | 1200x628 px    | 1.91:1

Generate Twitter Card images instantly

Design your card image in the playground, grab your API key from the dashboard, and start generating perfect Twitter Card images for every page on your site.

Open Playground →