Skip to content

X (Twitter) card generator

Make a 1200×600 (2:1) summary_large_image picture for links shared on X and copy the twitter:card meta tags that make it show up.

Template

Badge, big promise, one call to action.

Brand kit: colors, font, logo, background
Background
Saves site, colors, font and logo in this browser.
1200 × 600 px · the PNG is drawn on our server with the same fonts

Meta tags for your page

html
<meta property="og:image" content="https://render.cuelark.com/v1/og?template=launch&amp;eyebrow=New&amp;title=We+open-sourced+our+design+system&amp;description=60+accessible+React+components%2C+MIT+licensed&amp;cta=Star+it+on+GitHub&amp;site=%40yourhandle&amp;size=x" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:image:alt" content="We open-sourced our design system — 60 accessible React components, MIT licensed" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://render.cuelark.com/v1/og?template=launch&amp;eyebrow=New&amp;title=We+open-sourced+our+design+system&amp;description=60+accessible+React+components%2C+MIT+licensed&amp;cta=Star+it+on+GitHub&amp;site=%40yourhandle&amp;size=x" />

The tags X reads

html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="We open-sourced our design system" />
<meta name="twitter:description" content="60 accessible React components" />
<meta name="twitter:image" content="https://render.cuelark.com/v1/og?size=x&theme=dark&title=We+open-sourced+our+design+system" />

Why your card isn't showing

  • twitter:card is missing. Without summary_large_image, X shows a small thumbnail or nothing.
  • The image URL is relative. It must be an absolute https:// URL.
  • The page blocks X's crawler (Twitterbot) in robots.txt.
  • X caches previews. Changes can take a while to appear on links that were already shared.

Do it from code or an AI assistant

The same renderer is an HTTP API and an MCP tool, so this exact result can come from a script or from Claude, ChatGPT or Cursor. See the Render API reference and the MCP setup guide.

HTTP API

html
<!-- The URL is the image: use it as og:image -->
<meta property="og:image" content="https://render.cuelark.com/v1/og?template=launch&amp;title=We+open-sourced+our+design+system&amp;description=60+accessible+React+components%2C+MIT+licensed&amp;eyebrow=New&amp;cta=Star+it+on+GitHub&amp;site=%40yourhandle&amp;size=x">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta name="twitter:card" content="summary_large_image">

MCP tool call: social_card

json
{
  "method": "tools/call",
  "params": {
    "name": "social_card",
    "arguments": {
      "template": "launch",
      "title": "We open-sourced our design system",
      "description": "60 accessible React components, MIT licensed",
      "eyebrow": "New",
      "cta": "Star it on GitHub",
      "site": "@yourhandle",
      "size": "x"
    }
  }
}

Frequently asked questions

1200×630 or 1200×600 for X?

Both display. X documents a 2:1 aspect ratio for summary_large_image cards, so 1200×600 avoids any crop. A 1200×630 Open Graph image is cropped slightly at the top and bottom. Pick the X size in the maker for 1200×600.

Does X still use twitter: tags?

Yes. X falls back to og: tags, but twitter:card is what asks for the large image format.

Related free tools from Cuelark

Updated November 10, 2026 by the Cuelark Team.