OG Image API

Dynamic Open Graph images via API

Send a URL or HTML template. Get a 1200×630 PNG back. Generate social cards, blog post previews, and Open Graph images programmatically — no headless browser to manage.

Get API Key Free View Docs

Free tier: 100 images/month. No credit card required.

Two ways to generate

Capture a live URL, or render custom HTML directly.

From a URL

Screenshot any live page

Point the API at any URL and get back a pixel-perfect screenshot at exactly 1200×630. Perfect for auto-generating OG images from your existing pages.

{
  "url": "https://yoursite.com/post/slug",
  "options": {
    "width": 1200,
    "height": 630,
    "format": "png"
  }
}

From HTML

Render a custom template

Pass an HTML string with your title, description, and branding. Full CSS support including custom fonts, gradients, and images. The exact same card every time.

{
  "html": "<div style='width:1200px;
    height:630px;background:#0f172a'>
    <h1>{{title}}</h1>
  </div>",
  "options": { "width": 1200, "height": 630 }
}

Next.js integration

Drop-in Next.js OG image route

Replace @vercel/og or your custom Puppeteer setup with a single API route. No edge runtime restrictions, no font loading quirks, no 1MB response size limits.

Works in Node.js runtime (not edge-only)
Full CSS — gradients, shadows, custom fonts
Cache the response with Cache-Control headers
Dynamic titles, descriptions, and metadata from params
No font file bundling required

app/api/og/route.tsx

// app/api/og/route.tsx
import { NextRequest } from 'next/server'

export async function GET(req: NextRequest) {
  const title = req.nextUrl.searchParams.get('title') ?? 'My Page'

  const html = `
    <div style="width:1200px;height:630px;background:#0f172a;
                display:flex;align-items:center;padding:80px;
                font-family:system-ui,sans-serif">
      <div>
        <h1 style="color:white;font-size:64px;margin:0">${title}</h1>
        <p style="color:#94a3b8;font-size:24px;margin-top:16px">
          docapi.co
        </p>
      </div>
    </div>`

  const res = await fetch('https://api.docapi.co/v1/screenshot', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.DOCAPI_KEY!,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ html, options: { width: 1200, height: 630, format: 'png' } }),
  })

  return new Response(res.body, {
    headers: { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=86400' },
  })
}

Common use cases

Blog post previews

Auto-generate a unique OG image for every blog post using the title, author, and publication date. Triggered on publish.

Product social cards

Dynamic product images for sharing on X/Twitter and LinkedIn. Different image per product, generated on demand.

User profile cards

Shareable profile images with username, avatar, and stats. Generated server-side on each profile visit.

Dashboard screenshots

Weekly automated screenshots of dashboards or reports, sent via email or Slack. Zero browser management.

Event announcements

Branded announcement cards for webinars, launches, or releases. One template, different data per event.

AI-generated content

AI agents building web apps can add OG image support in one registration call. Autonomous, no human setup.

vs. @vercel/og and Puppeteer

Feature	DocAPI	@vercel/og	Puppeteer
Full CSS support	✓	Limited (Satori)	✓
Node.js runtime	✓	Edge only	✓
Custom fonts (URL)	✓	Must bundle files	✓
Screenshot from URL	✓	✗	✓
No binary deps	✓	✓	✗
Serverless friendly	✓	✓	Complex
Free tier	100/mo	Vercel plan	Self-hosted

Start generating OG images

Free tier includes 100 images per month — enough to ship and validate. Same API key works for both PDFs and screenshots.

Get Free API Key Screenshot API Docs