How to Generate OG Images Programmatically in 2026

Open Graph images are the visual previews that appear when you share a link on Twitter, LinkedIn, Facebook, Slack, Discord, and other platforms. They are one of the most overlooked yet impactful SEO and social media optimization techniques. A well-designed OG image can increase click-through rates by 40% or more compared to a generic or missing preview.

In this tutorial, you will learn how to generate OG images programmatically using a REST API, so every page on your site gets a unique, branded social preview without manual design work.

Why Programmatic OG Images Matter

Static OG images work fine when you have 10 pages. But what happens when you have 100 pages? Or 1,000? Or a dynamic site where pages are created by users? Manual design does not scale.

Programmatic OG image generation solves this by creating images on-the-fly or at build time, using templates and data from your content. The benefits are significant:

• **Consistency**: Every page gets a professional, branded preview that matches your design system.
• **Scalability**: New pages automatically get an OG image without designer involvement.
• **Personalization**: Dynamic data (titles, authors, dates, stats) is rendered directly into the image.
• **SEO impact**: Google and social platforms favor pages with proper Open Graph metadata, boosting visibility.

The HTML Meta Tags You Need

Before generating images, you need the right HTML meta tags in your page head. These tell social platforms where to find your OG image:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of the page." />
<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og/your-page.png" />

The standard OG image size is 1200x630 pixels. This works well across all major platforms.

Method 1: Using CaptureAPI OG Image Endpoint

The fastest way to generate OG images is with a dedicated API. CaptureAPI provides an [OG image endpoint](/docs/og-image) that accepts parameters and returns a rendered PNG:

curl "https://captureapi.dev/api/v1/og?title=My+Blog+Post&description=Learn+how+to...&theme=dark&template=blog" \
  -H "X-API-Key: cap_your_key_here" \
  -o og-image.png

You can use this URL directly in your meta tags for on-the-fly generation:

<meta property="og:image"
  content="https://captureapi.dev/api/v1/og?title=My+Blog+Post&theme=dark" />

Available Parameters

• `title` — The main heading text (required)
• `description` — Subtitle or description text
• `theme` — Color theme: dark, light, gradient
• `template` — Layout template: default, blog, product, minimal
• `author` — Author name (for blog template)
• `logo` — URL to your logo image
• `bgColor` — Custom background color (hex code)

Method 2: Screenshot a Styled HTML Page

If you need more design control, create an HTML page specifically for OG image rendering and capture it as a screenshot:

// Generate OG image by screenshotting a styled page
async function generateOgImage(title, description) {
  const ogPageUrl = \`https://mysite.com/og-template?title=\${encodeURIComponent(title)}&desc=\${encodeURIComponent(description)}\`;

  const response = await fetch(
    \`https://captureapi.dev/api/v1/screenshot?url=\${encodeURIComponent(ogPageUrl)}&width=1200&height=630&format=png\`,
    { headers: { 'X-API-Key': process.env.CAPTURE_API_KEY } }
  );

  return Buffer.from(await response.arrayBuffer());
}

This approach gives you full CSS control over the design. Create a beautiful HTML template, pass dynamic data via query parameters, and capture it as a pixel-perfect PNG.

Method 3: Build-Time Generation with Next.js

For static sites or SSG frameworks, generate OG images at build time and serve them as static files:

// scripts/generate-og-images.js
const fs = require('fs');
const posts = require('./data/posts.json');

async function generateAll() {
  for (const post of posts) {
    const params = new URLSearchParams({
      title: post.title,
      description: post.excerpt,
      theme: 'dark',
      template: 'blog',
      author: post.author,
    });

    const res = await fetch(
      \`https://captureapi.dev/api/v1/og?\${params}\`,
      { headers: { 'X-API-Key': process.env.CAPTURE_API_KEY } }
    );

    const buffer = Buffer.from(await res.arrayBuffer());
    fs.writeFileSync(\`public/og/\${post.slug}.png\`, buffer);
    console.log(\`Generated: \${post.slug}.png\`);
  }
}

generateAll();

Run this script as part of your CI/CD pipeline (e.g., in a [GitHub Actions workflow](/integrations)) to ensure OG images are always up to date.

Testing Your OG Images

After implementation, test your OG images with these tools:

• **Twitter Card Validator**: cards-dev.twitter.com/validator
• **LinkedIn Post Inspector**: linkedin.com/post-inspector
• **Facebook Sharing Debugger**: developers.facebook.com/tools/debug
• **OpenGraph.xyz**: A visual preview tool for OG tags

Each platform caches OG images aggressively, so use the debugging tools to clear the cache when testing changes.

Best Practices

• **Always use 1200x630 dimensions** — this is the universal standard across platforms.
• **Keep text readable** — use large fonts (40px+) and high contrast. Social previews are often displayed at small sizes.
• **Include your brand** — add your logo and brand colors for instant recognition.
• **Avoid text-heavy images** — platforms may crop or resize. Keep the key message in the center safe zone.
• **Test across platforms** — each platform renders previews slightly differently.
• **Use caching wisely** — generate images at build time for static content, or use CDN caching for dynamic generation.

Conclusion

Programmatic OG image generation is a high-ROI investment for any website with more than a handful of pages. By automating the process with an API like [CaptureAPI](/docs/og-image), you ensure every page has a professional, branded social preview without manual design work. Start with the API endpoint approach for the fastest implementation, and graduate to custom HTML templates as your design requirements grow.

Try the [API Playground](/playground) to experiment with OG image generation, or read the [full OG Image API documentation](/docs/og-image) for advanced options.