← Back to blog

How to Generate OG Images Dynamically with an API

Published on January 22, 2026

Every time you share a link on Twitter, LinkedIn, Slack, or Facebook, the platform tries to display a preview image. That image is the Open Graph (OG) image, and it can make or break your click-through rate. In this guide, you'll learn how to generate OG images dynamically using an API — no design tools needed.

What Are OG Images and Why Do They Matter?

Open Graph images are the preview cards that appear when you share a URL on social media. They're defined by the <meta property="og:image"> tag in your HTML. Here's why they matter:

  • 2-3x higher click-through rates on posts with custom preview images vs. no image
  • Professional appearance — your links look polished and intentional
  • Brand consistency — every shared link reinforces your visual identity
  • SEO benefits — search engines increasingly use OG images in results

The Problem with Static OG Images

Most developers either skip OG images entirely or create them manually in Figma. Neither approach scales. If you have a blog with 200 posts, an e-commerce site with 10,000 products, or a SaaS app with user-generated content, you need dynamic OG image generation.

How Rendly's Template System Works

Rendly uses a template-based approach. You design your OG image once as an HTML/CSS template with variables, then generate unique images by passing different data to the same template.

Step 1: Create a Template

curl -X POST https://rendly.io/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; } .card { padding: 80px; } h1 { color: white; font-size: 48px; }",
    "variables_schema": {
      "title": { "type": "string", "required": true },
      "author": { "type": "string", "required": true }
    }
  }'

Step 2: Render with Variables

curl -X POST https://rendly.io/api/v1/templates/TEMPLATE_ID/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "variables": {
      "title": "How to Build a REST API",
      "author": "Jane Smith"
    },
    "format": "png"
  }' \
  --output og-image.png

Step 3: Add to Your HTML

<meta property="og:image" content="https://rendly.io/api/v1/templates/TEMPLATE_ID/render?title=How+to+Build+a+REST+API&author=Jane+Smith" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Built-in Templates to Get You Started

Rendly comes with beautiful built-in templates so you can start generating OG images immediately without any design work:

  • Blog Post — Title, author, date, and reading time on a gradient background
  • Product Card — Product image, name, price, and CTA
  • Tweet Card — Twitter-style quote card for testimonials
  • GitHub Card — Repository stats in GitHub's dark theme
  • Social Profile — User profile card with stats

You can use these as-is or fork them as starting points for custom designs.

Framework Integration Examples

Next.js

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  const ogImageUrl = `https://rendly.io/api/v1/templates/${TEMPLATE_ID}/render?title=${encodeURIComponent(post.title)}&author=${encodeURIComponent(post.author)}`;

  return { props: { post, ogImageUrl } };
}

export default function BlogPost({ post, ogImageUrl }) {
  return (
    <Head>
      <meta property="og:image" content={ogImageUrl} />
    </Head>
  );
}

Rails

# app/helpers/application_helper.rb
def og_image_url(title:, author:)
  params = { title: title, author: author }.to_query
  "https://rendly.io/api/v1/templates/#{TEMPLATE_ID}/render?#{params}"
end

# In your view
<%= tag.meta property: "og:image", content: og_image_url(title: @post.title, author: @post.author) %>

Best Practices for OG Images

  • Size: 1200×630px — This is the standard across all major platforms
  • Keep text large — Mobile previews are small; ensure readability
  • Include your logo — Brand every shared image
  • Test with validators — Use Facebook's Sharing Debugger and Twitter's Card Validator
  • Cache aggressively — OG images rarely change; cache them with long TTLs

Performance Considerations

Rendly caches rendered images based on a hash of the input parameters. The first render takes ~500-1500ms, but subsequent requests for the same parameters return instantly from cache. This means your OG images load fast even under heavy traffic.

Start Generating OG Images

Stop manually creating preview images. With Rendly, you can automate OG image generation for your entire site in minutes. Sign up for free and try the playground to design your first template interactively.

Ready to get started?

Try Rendly free — 100 renders/month, no credit card required.

Sign up for free →