How to Generate OG Images Automatically

Open Graph (OG) images are the preview thumbnails that appear when someone shares your link on Twitter, LinkedIn, Facebook, or Slack. A great OG image increases click-through rates, but manually creating one for every blog post or product page doesn't scale.

What Is an OG Image?

An OG image is defined by the <meta property="og:image"> tag in your page's HTML head. Social platforms read this tag and display the image as a rich preview card. The recommended size is 1200×630 pixels.

Why Automate OG Image Generation?

Scale — If you publish 10+ pages per week, manual design becomes a bottleneck.
Consistency — Automated images follow the same brand template every time.
Speed — New pages get an OG image instantly, no design queue needed.
Dynamic content — Personalize titles, author names, or categories automatically.

Common Approaches

1. Server-Side Rendering (e.g., Puppeteer)

Render an HTML page with headless Chrome and screenshot it. This works but is slow, resource heavy, and difficult to deploy on serverless infrastructure.

2. Canvas-Based Libraries

Libraries like @vercel/og or satori convert JSX to SVG to PNG at the edge. They're fast but limited in design flexibility — you can't use custom fonts easily, layering is tricky, and complex designs need a lot of code.

3. Image Generation API (Recommended)

An image generation API like Duply lets you design a rich template visually, then generate variations by passing dynamic values via API or URL query parameters. No rendering infrastructure to manage. You get a direct image URL back.

How It Works with Duply

Create a template — Design your OG image in Duply's visual editor. Add text layers for title, subtitle, author, etc.
Get your API endpoint — Each template has a unique generation endpoint.
Pass dynamic values — Use the REST API or Dynamic URL to set element values per page.
Use the image URL — Drop the returned URL into your og:image meta tag.

Example: Dynamic URL Approach

https://api.duply.co/v1/render/YOUR_TEMPLATE_ID
  ?title=How+to+Generate+OG+Images
  &author=Jane+Doe
  &category=Engineering

This returns a ready-to-use image URL. No build step, no server, no extra infrastructure.

Best Practices

Keep text large and readable — OG images are often displayed small.
Use your brand colors and logo for instant recognition.
Limit text to a title and one subtitle — don't overcrowd.
Test with the Facebook Sharing Debugger and Twitter Card Validator.
Cache generated images to avoid re-rendering on every request.

Conclusion

Automating OG images saves hours of design work and ensures every page on your site has a polished social preview. With a template-based API like Duply, you design once and generate thousands of variations — no code, no servers, no bottleneck.

Need help? Contact us at hi@duply.co