March 29, 2026 · 11 min read

Social Media Preview Image API: Generate Open Graph Cards Programmatically

Every link shared on Twitter, LinkedIn, Facebook, Slack, and Discord gets exactly one chance to earn a click. That chance is the preview image—the social card that appears alongside your URL. If you're still designing these manually in Figma or skipping them entirely, you're leaving clicks on the table. A social media preview image API lets you generate polished Open Graph cards programmatically, at scale, with a single HTTP request.

Social media preview image API - OGPeek open graph card

What Are Social Media Preview Images?

When you paste a URL into Twitter, LinkedIn, Facebook, Slack, or Discord, the platform fetches the page and looks for Open Graph meta tags in the HTML <head>. The most important tag for visual impact is og:image—a 1200×630 pixel image that becomes the preview card for your link.

These preview images go by many names: OG images, social cards, Twitter cards, link previews, social media preview images. They all refer to the same thing: the visual thumbnail that accompanies your shared link in a social feed.

Here's what the meta tags look like in HTML:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Without an og:image tag, most platforms either show a blank grey box or a tiny favicon. Neither inspires anyone to click.

Why Preview Images Matter for Click-Through Rate

Social media preview images are not decoration. They are a direct lever on click-through rate (CTR). Multiple studies and A/B tests have shown the impact:

For content-heavy sites—blogs, documentation, SaaS landing pages, developer tools—having unique, professional preview images for every page is the difference between a link that gets clicked and one that gets ignored.

The problem is scale. If you have 50 blog posts, you need 50 unique OG images. If you have 500 documentation pages, you need 500. Designing these manually in Figma or Canva is not sustainable. This is where a social media preview image API changes the equation.

What a Social Card Image API Does

A social card image API (also called an open graph image generator API or programmatic social preview image service) takes parameters—title, subtitle, colors, template—and returns a ready-to-use 1200×630 PNG image. Instead of opening a design tool for every page, you construct a URL or make an HTTP request, and the API handles typography, layout, spacing, and rendering.

The workflow is simple:

  1. Pass your page title and optional parameters to the API
  2. The API renders a professional social card image
  3. Set the returned URL (or image data) as your og:image meta tag
  4. Every social platform that crawls your page now shows a polished preview

This approach scales to any number of pages. A blog with 10 posts and a documentation site with 10,000 pages use the same integration: one API call per page, dynamically generating unique images from page-specific data.

OGPeek: A Social Media Preview Image API Built for Developers

OGPeek is a REST API purpose-built for generating social media preview images. No SDK required. No build step. No framework dependency. You send parameters, you get back a PNG.

Key features of OGPeek's open graph image generator API:

Code Examples: Using OGPeek's Social Card Image API

Let's generate a social media preview image with the title "Ship Faster with AI" and a subtitle "The Developer's Playbook". We'll use the gradient template with a midnight theme and orange brand accent.

curl

# Generate an OG image and save it locally
curl -o preview.png "https://todd-agent-prod.web.app/api/v1/og?\
title=Ship+Faster+with+AI&\
subtitle=The+Developer%27s+Playbook&\
template=gradient&\
theme=midnight&\
brandColor=%23FF7A00"

# Or use it directly as a meta tag URL (no download needed)
# The API serves the image on-the-fly from the URL

Node.js

// Generate OG image URL for any page
function getOgImageUrl(title, subtitle) {
  const params = new URLSearchParams({
    title,
    subtitle,
    template: 'gradient',
    theme: 'midnight',
    brandColor: '#FF7A00'
  });
  return `https://todd-agent-prod.web.app/api/v1/og?${params}`;
}

// Use in an Express route
app.get('/blog/:slug', (req, res) => {
  const post = getPost(req.params.slug);
  const ogImage = getOgImageUrl(post.title, 'MyApp Blog');

  res.render('blog-post', {
    ...post,
    ogImage  // Pass to your template's og:image meta tag
  });
});

// Or fetch the actual image bytes (for saving, processing, etc.)
const response = await fetch(getOgImageUrl('My Title', 'My Subtitle'));
const imageBuffer = await response.arrayBuffer();
// imageBuffer is a 1200x630 PNG

Python

from urllib.parse import urlencode
import requests

def get_og_image_url(title: str, subtitle: str = "My Site") -> str:
    """Generate an OGPeek social preview image URL."""
    params = urlencode({
        "title": title,
        "subtitle": subtitle,
        "template": "gradient",
        "theme": "midnight",
        "brandColor": "#FF7A00"
    })
    return f"https://todd-agent-prod.web.app/api/v1/og?{params}"

# Use as a URL in your HTML templates
og_url = get_og_image_url("Ship Faster with AI", "The Developer's Playbook")
print(og_url)

# Or download the image
response = requests.get(og_url)
with open("preview.png", "wb") as f:
    f.write(response.content)

# Django view example
def blog_post(request, slug):
    post = Post.objects.get(slug=slug)
    context = {
        "post": post,
        "og_image": get_og_image_url(post.title, "MyApp Blog")
    }
    return render(request, "blog/post.html", context)

Plain HTML (no code at all)

If you don't need dynamic generation—for static pages, landing pages, or one-off content—just put the API URL directly in your meta tag:

<meta property="og:image"
  content="https://todd-agent-prod.web.app/api/v1/og
    ?title=Ship+Faster+with+AI
    &subtitle=The+Developer%27s+Playbook
    &template=gradient
    &theme=midnight
    &brandColor=%23FF7A00" />

That's the entire integration. No JavaScript, no server-side rendering, no build step. The API returns the image when the social platform's crawler requests it.

Tip: Use URL-encoded values for special characters in your title and subtitle. Spaces become + or %20, the # in hex colors becomes %23, and apostrophes become %27.

Comparison: Manual Design vs. Cloudinary vs. OGPeek

There are three common approaches to generating social media preview images. Here's how they compare across the dimensions that matter for production use.

Factor Manual (Figma/Canva) Cloudinary OGPeek
Setup time None (open the tool) 30–60 min (account, upload base image, learn URL transforms) Under 1 minute
Time per image 5–15 min each ~1 min (construct URL) ~10 seconds (construct URL)
Scalability Does not scale—linear time per page Scales via URL transforms Scales via URL params
Design quality Depends on your skill Basic—text overlays on uploaded images Professional templates designed for social feeds
Dynamic text No—manual per image Yes, via URL text overlays Yes, via title and subtitle params
Auto text sizing Manual adjustment No—fixed font size, text may overflow Yes—automatic responsive sizing
Brand consistency Requires discipline and templates Possible with preset transforms Built-in via brandColor + themes
Pricing Free (your time is the cost) Free tier limited; paid starts ~$89/mo Free: 50/day; Pro: $9/mo for 5,000
URL complexity N/A (static files) Complex—nested transform chains Simple—readable query params
Framework dependency None None (URL-based) None (URL-based)
Best for 1–5 pages, custom art Image manipulation, photo overlays Blogs, SaaS, docs, dev tools—any text-based social cards

Why Not Just Use Cloudinary?

Cloudinary is a powerful image manipulation service, but it's designed for general-purpose image transforms, not social media preview images specifically. Generating an OG image with Cloudinary means uploading a base image, then stacking URL-based text overlays with precise x/y positioning, font sizes, and color values. The resulting URLs are long and fragile:

https://res.cloudinary.com/demo/image/upload/
  w_1200,h_630,c_fill,q_auto,f_auto/
  l_text:Arial_64_bold:Ship%20Faster%20with%20AI,
  co_rgb:FFFFFF,g_west,x_80,y_-40/
  l_text:Arial_28:The%20Developer's%20Playbook,
  co_rgb:9B9BA7,g_west,x_80,y_40/
  og-base-image.png

Compare that to OGPeek:

https://todd-agent-prod.web.app/api/v1/og?
  title=Ship+Faster+with+AI&
  subtitle=The+Developer's+Playbook&
  template=gradient&
  theme=midnight&
  brandColor=%23FF7A00

OGPeek's URL is human-readable. You don't need to upload a base image. You don't need to calculate pixel offsets. The API handles typography, spacing, and responsive text sizing automatically. And the output is designed specifically for social media feeds—not generic image manipulation.

Cloudinary also starts at $89/month for paid plans. OGPeek Pro is $9/month for 5,000 images, and the free tier gives you 50 images per day with no signup required.

Integrating Social Preview Images Into Your Workflow

The best social media preview image API is one that disappears into your existing workflow. Here are common integration patterns:

Static Sites (Hugo, Jekyll, 11ty, Astro)

Add a single line to your base template's <head>. The page title becomes the image title automatically:

<!-- Hugo -->
<meta property="og:image" content="https://todd-agent-prod.web.app/api/v1/og?title={{ .Title | urlquery }}&subtitle={{ .Site.Title | urlquery }}&template=gradient&theme=midnight&brandColor=%23FF7A00" />

<!-- Jekyll -->
<meta property="og:image" content="https://todd-agent-prod.web.app/api/v1/og?title={{ page.title | url_encode }}&subtitle={{ site.title | url_encode }}&template=gradient&theme=midnight&brandColor=%23FF7A00" />

<!-- Astro -->
<meta property="og:image" content={`https://todd-agent-prod.web.app/api/v1/og?${new URLSearchParams({ title: Astro.props.title, subtitle: 'My Site', template: 'gradient', theme: 'midnight', brandColor: '#FF7A00' })}`} />

Every page on your site now has a unique, branded social preview image. Zero additional build steps.

Server-Rendered Apps (Express, Django, Rails, Laravel)

Create a helper function that generates the OG image URL, then call it in every template. See the Node.js, Python, and other examples above—or check our framework integration guide for step-by-step instructions.

CMS and No-Code Platforms

If your CMS allows custom meta tags (WordPress, Ghost, Webflow, Squarespace), you can paste the OGPeek URL directly into the OG image field. Use your page title as the title parameter and your site name as the subtitle.

API Parameters Reference

OGPeek's social card image API accepts the following query parameters:

Parameter Required Description
title Yes The main heading text (auto-sizes for long titles)
subtitle No Secondary text below the title
template No Design template: gradient, split, minimal, bold, outline, glass, stack
theme No Color theme: midnight, ocean, forest, sunset, minimal
brandColor No Hex color for accent elements (e.g., #FF7A00)

All parameters are passed as URL query strings. The API returns a 1200×630 PNG image with appropriate cache headers.

Common Mistakes to Avoid

When implementing programmatic social preview images, watch out for these pitfalls:

Pro tip: After updating your OG image tags, social platforms cache the old preview. Use each platform's debugging tool to force a re-crawl and clear the cached version.

Performance and Caching

OGPeek is built for the specific access pattern of social media preview images: many reads, few unique images. When Twitter, LinkedIn, Facebook, and Slack all crawl the same URL within minutes of a post going live, the image needs to be fast every time.

OGPeek's architecture handles this with multi-layer caching:

This means that when your blog post goes viral and gets shared hundreds of times, every social platform crawler gets a fast response. No cold starts, no queue delays, no timeouts.

Pricing: Start Free, Scale When Ready

OGPeek's social media preview image API has a straightforward pricing model:

For most blogs and documentation sites, the free tier is more than enough to get started. A site with 50 pages generates 50 unique images—and once cached, those images serve indefinitely without counting against your daily limit.

Try OGPeek free — 50 images per day

No signup, no credit card, no watermark. Generate professional social media preview images for your site in under a minute. Works with any framework, any language, any platform.

Try OGPeek free →

Conclusion

Social media preview images are one of the highest-leverage optimizations you can make for content distribution. Every link you share without a compelling preview card is a missed opportunity for clicks, traffic, and engagement.

A social media preview image API like OGPeek eliminates the manual work of designing these images. One integration—a single meta tag or helper function—gives every page on your site a unique, professional social card. No design tool, no build step, no framework dependency.

The math is simple: if a custom OG image increases your CTR by even 20% across hundreds of shared links, the compounding effect on traffic is significant. And with a free tier of 50 images per day, there's no reason not to start today.

Related reading: Dynamic OG images without Next.js, Cloudinary vs OGPeek for OG images, Complete OG image API guide.

More developer APIs from the Peek Suite