Skip to content

OG image generator

Pick one of 11 templates, type your text, apply your brand colors, font and logo, and download a 1200×630 Open Graph image or use its permanent URL as your og:image.

Template

Category, headline, author, date and reading time.

YYYY-MM-DD draws the calendar card
Brand kit: colors, font, logo, background
Background
Saves site, colors, font and logo in this browser.
1200 × 630 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=blog&amp;eyebrow=Blog&amp;title=How+we+ship+faster+with+fewer+meetings&amp;description=Five+habits+from+a+remote+team+of+twelve&amp;author=Sam+Lee&amp;date=Nov+10%2C+2026+%C2%B7+6+min+read&amp;site=yourcompany.com" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="How we ship faster with fewer meetings — Five habits from a remote team of twelve" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://render.cuelark.com/v1/og?template=blog&amp;eyebrow=Blog&amp;title=How+we+ship+faster+with+fewer+meetings&amp;description=Five+habits+from+a+remote+team+of+twelve&amp;author=Sam+Lee&amp;date=Nov+10%2C+2026+%C2%B7+6+min+read&amp;site=yourcompany.com" />

How to use it

  1. Pick a template from the gallery. The thumbnails already use your brand.
  2. Fill in its fields (each template asks only for what it shows) and choose a size.
  3. Open the brand kit to set colors, font, logo or a background photo, and remember it.
  4. Download PNG, JPG or WebP, or copy the meta tags with the permanent image URL.

Which template fits which page

Blog post suits articles: category, headline, author and reading time. Product launch has one big promise and a button. Docs / changelog shows a version tag and up to four changes. Quote turns a customer sentence into a testimonial card. Stat puts one number front and center for reports. Event draws a calendar card from a YYYY-MM-DD date. GitHub repo shows owner / repo with language and stars. Podcast episode has a cover with the episode number. Hiring lists the role with location, type and salary chips. Minimal brand is a logo or monogram with one line.

Meta tags to paste

html
<meta property="og:image" content="https://render.cuelark.com/v1/og?template=blog&title=Your+title&author=Sam+Lee&site=example.com" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

One image URL per page, made automatically

Blogs and docs sites can build the image URL from each page's title in their template, so every page gets its own preview without anyone opening a design tool. Add template= and the fields it uses (for example template=changelog&version=v2.4.0&items=Faster+builds|New+CLI). The URL renders on first request and is cached at the edge after that.

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=blog&amp;title=How+we+ship+faster+with+fewer+meetings&amp;description=Five+habits+from+a+remote+team+of+twelve&amp;eyebrow=Blog&amp;author=Sam+Lee&amp;date=Nov+10%2C+2026+%C2%B7+6+min+read&amp;site=yourcompany.com">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

MCP tool call: social_card

json
{
  "method": "tools/call",
  "params": {
    "name": "social_card",
    "arguments": {
      "template": "blog",
      "title": "How we ship faster with fewer meetings",
      "description": "Five habits from a remote team of twelve",
      "eyebrow": "Blog",
      "author": "Sam Lee",
      "date": "Nov 10, 2026 · 6 min read",
      "site": "yourcompany.com"
    }
  }
}

Frequently asked questions

What size should an OG image be?

1200 × 630 pixels (1.91:1) is the safe size for Facebook, LinkedIn, Slack, Discord and iMessage. Keep text inside the safe-area guide, because some apps crop the edges or show a square.

Can I use the image URL directly in og:image?

Yes. The URL returns a PNG and is cached at the edge, so it's fine to reference it from your pages. Cards with an uploaded logo or photo have no URL, because uploads are never stored; download those and host them yourself.

Can I use my logo, colors and font?

Yes. The brand kit takes a logo (PNG, JPEG, SVG or WebP, resized in your browser), accent and text colors, a solid, gradient or photo background, and Inter, Lora or JetBrains Mono. Save it once and every template uses it.

Are the templates just color swaps?

No. Each template has its own layout and fields: the event card draws a calendar date, the repo card shows owner / repo and stats, the changelog lists changes, the podcast card has an episode cover.

Can I make these from code or an AI assistant?

Yes. POST the same JSON to https://render.cuelark.com/v1/og, or call the social_card tool on the MCP server with template and fields. The page, the API and MCP use the same renderer, so the image is identical.

Related free tools from Cuelark

Updated November 10, 2026 by the Cuelark Team.