Use Case Guide · Updated February 2026

Generate Social Media Cards & OG Images with API

When someone shares your blog post on Twitter, LinkedIn, or Slack, the Open Graph image determines whether they click. A generic fallback image gets ignored. A dynamic, well-designed social card with the post title, author, and branding gets engagement. The problem? Creating unique OG images for every page is tedious — unless you automate it.

SnapAPI lets you generate dynamic OG images by rendering HTML templates or markdown as screenshots. Design your card once, then generate unique images for every blog post, product page, or user profile with a single API call.

How Dynamic OG Image Generation Works

The approach is simple: create an HTML template for your social card, inject dynamic data (title, author, date), and use SnapAPI to screenshot it at 1200×630 pixels — the standard OG image size. The result is a unique, branded image for every piece of content.

Method 1: Markdown Rendering

SnapAPI can render markdown directly to images — perfect for text-heavy social cards without hosting an HTML template.

curl -X POST "https://api.snapapi.pics/v1/screenshot" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "markdown": "# My Blog Post Title\n\nBy **John Doe** · February 2026\n\n> A deep dive into building scalable APIs",
    "width": 1200,
    "height": 630,
    "format": "png"
  }' \
  -o og-image.png

Method 2: HTML Template Screenshot

Host an HTML template that accepts query parameters and screenshot it:

curl "https://api.snapapi.pics/v1/screenshot?url=https://yoursite.com/og-template?title=My+Post&author=John&width=1200&height=630&format=png" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -o og-image.png

Node.js — Generate OG Image on Publish

async function generateOGImage(post) {
  const templateUrl = `https://yoursite.com/og-template?` +
    `title=${encodeURIComponent(post.title)}` +
    `&author=${encodeURIComponent(post.author)}` +
    `&date=${encodeURIComponent(post.date)}`;

  const response = await fetch(
    `https://api.snapapi.pics/v1/screenshot?url=${encodeURIComponent(templateUrl)}&width=1200&height=630&format=png`,
    { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }
  );

  const buffer = Buffer.from(await response.arrayBuffer());
  // Upload to S3, CloudFlare R2, etc.
  await uploadToStorage(`og-images/${post.slug}.png`, buffer);
  return `https://cdn.yoursite.com/og-images/${post.slug}.png`;
}

Python — Batch Generate Cards

import requests

def generate_social_card(title, author, slug):
    template_url = f"https://yoursite.com/og-template?title={title}&author={author}"
    response = requests.get(
        'https://api.snapapi.pics/v1/screenshot',
        params={
            'url': template_url,
            'width': 1200,
            'height': 630,
            'format': 'png'
        },
        headers={'Authorization': 'Bearer YOUR_API_KEY'}
    )
    with open(f'og-images/{slug}.png', 'wb') as f:
        f.write(response.content)
    return f'og-images/{slug}.png'

# Generate for all posts
for post in posts:
    generate_social_card(post['title'], post['author'], post['slug'])

API vs DIY: OG Image Generation

Approach	DIY (Puppeteer / Satori / Canvas)	SnapAPI
Setup complexity	High — browser or canvas rendering	One API call
Font support	Manual font installation	Full web font support
CSS support	Limited (Satori) or heavy (Puppeteer)	Full CSS — it's a real browser
Server resources	500MB+ RAM for headless Chrome	Zero — API call
Build time impact	Seconds per image during build	Offloaded to API
Markdown support	Need custom renderer	Built-in

Common Social Card Use Cases

Best Practices for OG Images

• Use 1200×630 pixels — the standard that works across Twitter, Facebook, LinkedIn, and Slack
• Keep text large and readable — social cards are often displayed small; use 40px+ font sizes
• Cache aggressively — generate once on publish, serve from CDN
• Use PNG for text-heavy cards — sharper text than JPEG. Use WebP if size matters.
• Include branding — logo, consistent colors, and fonts build recognition
• Test with validators — use Twitter Card Validator and Facebook Sharing Debugger

FAQ

What image formats are supported for OG images?

SnapAPI supports PNG, JPEG, WebP, and AVIF. For social cards, PNG gives the best text quality. WebP offers a good balance of quality and file size.

Can I use custom fonts in my OG image templates?

Yes. SnapAPI renders pages in a real Chromium browser, so any web font (Google Fonts, Adobe Fonts, self-hosted) works perfectly.

How do I set the og:image meta tag dynamically?

Generate the image at build time or on first request, upload to your CDN, then set <meta property="og:image" content="https://cdn.yoursite.com/og/your-post.png"> in your page head.

What's the ideal file size for OG images?

Under 1MB is recommended. Most SnapAPI-generated PNGs at 1200×630 are 200-500KB. Use WebP format to reduce size by 30-50%.

Related: Link Preview API · Free Screenshot API · API Documentation