DEV Community

Mack
Mack

Posted on • Originally published at rendly-api.fly.dev

How to Generate OG Images Dynamically with an API

#webdev #tutorial #api #seo

Every time you share a link on Twitter, LinkedIn, Slack, or Facebook, the platform displays a preview image — the Open Graph (OG) image. Posts with custom OG images get 2-3x more engagement than posts without them.

But creating individual preview images for every blog post, product page, and landing page? That doesn't scale.

The Template Approach

The most effective way to automate OG images:

  1. Design a reusable template in HTML/CSS with dynamic variables
  2. Pass page-specific data (title, author, etc.) to the template
  3. Render to a 1200×630 PNG via API
  4. Serve the image URL in your <meta> tags

You design once, every page gets a unique, branded preview automatically.

Quick Example

Create a template:

curl -X POST https://rendly-api.fly.dev/api/v1/templates \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Blog OG Image",
    "html": "<div class=\"card\"><h1>{{ title }}</h1><p>{{ author }}</p></div>",
    "css": "body { width: 1200px; height: 630px; background: #1a1a2e; } h1 { color: white; font-size: 48px; }"
  }&{ "variables": { "title": "My Blog Post", "author": "Jane" } }' \
  --output og-image.png
Enter fullscreen mode Exit fullscreen mode

Next.js Integration 

export default function SEOHead({ title, author }) {
  const ogImage = `https://rendly-api.fly.dev/api/v1/templates/${TEMPLATE_ID}/render?title=${encodeURIComponent(title)}&author=${encodeURIComponent(author)}`;

  return (
    <Head>
      <meta property="og:image" content={ogImage} />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
    </Head>
  );
}
Enter fullscreen mode Exit fullscreen mode

Rails Integration 

def og_image_url(title:, author:)
  params = { title: title, author: author }.to_query
  "https://rendly-api.fly.dev/api/v1/templates/#{TEMPLATE_ID}/render?#{params}"
end
Enter fullscreen mode Exit fullscreen mode

Best Practices

  • Size: 1200×630px — standard across all platforms
  • Keep text large — mobile previews are small
  • Include your logo — brand every shared image
  • Cache aggressively — OG images rarely change
  • Test with validators — Facebook Sharing Debugger, Twitter Card Validator

Why Not Self-Host?

Running your own Puppeteer/Playwright instance works until you hit memory leaks, scaling headaches, security patches, and Docker containers to babysit. An API handles all of this — one HTTP request, one image back.

I'm building Rendly — a screenshot and OG image API. Free tier: 100 renders/month, no credit card. Built with Rails 8 + Playwright.

Top comments (0)