Open Graph Image API — Auto-Generate Social Cards From Title

ThumbAPI generates 1200x630 Open Graph images from any blog post or page title. One API call replaces stock photos, Canva templates, and manual design for every og:image your site needs.

Every link you share on Twitter, LinkedIn, Slack, Discord, or Facebook pulls an og:image. If that image is missing or generic, your link looks broken or boring. Most teams either skip it entirely or spend 10-15 minutes per page in a design tool. ThumbAPI generates a unique, title-matched OG image from a single POST request.

curl -X POST https://api.thumbapi.dev/v1/generate \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Understanding Vector Databases: A Practical Guide",
    "format": "blogpost",
    "imageStyle": "faceless"
  }'

Why OG Images Matter

When someone shares a link, the platform fetches the og:image meta tag and renders it as a visual preview. This preview is the first thing people see before deciding whether to click.

• Twitter/X — displays a large image card. Posts with images get significantly more engagement than text-only links.
• LinkedIn — the og:image is the dominant visual element in shared links. A missing image makes your post look unfinished.
• Slack and Discord — link previews with images are immediately more noticeable in busy channels.
• Facebook — large image previews take up more feed space, increasing visibility.
• Google Discover — articles with high-quality images are more likely to be surfaced in Discover feeds on mobile.

A missing og:image means a grey box or a tiny favicon. A generic stock photo means your link looks like every other link. A unique, title-matched image stands out.

The og:image Spec

The Open Graph protocol defines og:image as the image that represents your page when shared. Here is what each platform expects:

The universal safe size is 1200 x 630 pixels. ThumbAPI generates exactly this when you set format: "blogpost". Output format is WebP (default) or PNG — both are supported by all platforms.

Add the image to your HTML head:

<meta property="og:image" content="https://yoursite.com/og/your-post.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/webp" />

How ThumbAPI Generates OG Images

The process is the same as generating any thumbnail — one POST request:

1. Send your page title along with format: "blogpost" and your preferred imageStyle.
2. AI generates the design. It selects typography, colors, layout, and visual elements matched to the title content.
3. Get back a 1200x630 image as base64. Save it to your static assets folder or CDN and point your og:image meta tag to it.

The entire process takes under 30 seconds. Three image styles are available:

• Faceless (faceless) — graphic design with text, no people. Best for most blog posts and SaaS pages.
• Personalized (with-image) — includes a person's photo. Good for author pages, podcasts, and personal brands.
• Branded (with-logo) — your company logo overlaid on the design. Best for company blogs and product pages.

Integrations

OG image generation fits naturally into any publishing workflow. Here is how to integrate with common tools:

Next.js

Generate OG images at build time in generateMetadata or at publish time via an API route. Save the image to public/og/ and reference it in your metadata.

Astro

Use a build-time script that iterates through your content collection, calls ThumbAPI for each page, and saves images to public/og/. Reference them in your layout's <meta> tags.

Hugo / Jekyll

Run a pre-build script that reads your content frontmatter, generates OG images via the API, and writes them to your static assets directory.

WordPress

Hook into save_postto generate an OG image whenever a post is published or updated. Save the image to the media library and set it as the post's featured image.

Headless CMS (Ghost, Strapi, Sanity, Contentful)

Set up a webhook that fires on publish. Your webhook handler calls ThumbAPI, receives the image, and uploads it back to the CMS or your CDN.

No-Code Tools

Use Zapier, Make.com, or n8n to connect your CMS publish event to ThumbAPI and automatically save OG images to Google Drive, S3, or your CDN.

Pricing

All plans include all formats and styles. The blogpost format (1200x630) works for OG images across every platform. See full pricing details.

FAQ

What format should OG images be in?

WebP and PNG both work on all major platforms. ThumbAPI returns WebP by default (smaller file size, faster loading). You can also request PNG if your stack requires it.

Should I generate OG images at build time or on demand?

For static sites (Next.js, Astro, Hugo), generate at build time and serve from your static assets. For dynamic sites or CMS-driven content, generate on publish via a webhook and cache the result on your CDN. Either way, you only generate once per page — not per visitor.

How do I handle caching?

Generate the image once, save it to disk or a CDN, and point your og:imagemeta tag to the static URL. Social platforms cache OG images aggressively — if you update an image, use the platform's debugger tool (Twitter Card Validator, Facebook Sharing Debugger, LinkedIn Post Inspector) to force a refresh.

Can I use a different size for Twitter vs LinkedIn?

1200x630 works on both. If you want platform-specific sizes, you can make separate API calls with different parameters. But in practice, 1200x630 is the universal standard and looks good everywhere.

Does ThumbAPI host the images?

No. ThumbAPI returns the image as base64 in the API response. You save it to your own hosting — static files, S3, Cloudflare R2, or any CDN. This gives you full control over caching, URLs, and delivery.

Can I include my company logo on OG images?

Yes. Set imageStyle: "with-logo" and include your logo as base64 in the personImage field. The AI places your logo in a visually balanced position on the generated image.