DEV Community

Custodia-Admin
Custodia-Admin

Posted on • Originally published at pagebolt.dev

Generate Open Graph Images Automatically with an API

#seo #api #opengraph

Generate Open Graph Images Automatically with an API

Every time someone shares your link on Twitter, LinkedIn, or Slack, an image appears. That image matters more than you think.

A good OG image:

  • Increases click-through rate by 30–50% (studies from Buffer, HubSpot)
  • Makes your content stand out in a sea of gray link previews
  • Drives traffic — people click visual content faster than text-only links

But generating them manually? Nightmare.

You either:

  1. Hire a designer to make images for every post ($100+ per image)
  2. Use a static template and look generic (everyone else does this)
  3. Generate them yourself with Figma + automation (2+ hours per image)
  4. Skip it entirely and get the default gray preview

There's a better way: generate OG images on-demand from templates.

When your blog post goes live, automatically generate a custom image with the title, author, and branding — no manual work, no designer needed. Every link gets a unique, professional image.

The Problem: Why Manual OG Images Don't Scale

Option 1: Hire a Designer 

Cost: $100 per image
Time: 3–5 days per image
Scalability: Zero (you need designers for every post)
Enter fullscreen mode Exit fullscreen mode

Result: You publish 10 posts per month. That's $1,000/month just for images. Only production blogs do this.

Option 2: Static Template (Everyone Else) 

Every link preview looks identical.
No personalization.
No advantage.
Enter fullscreen mode Exit fullscreen mode

Result: Your link blends in with every other blog post. Slack links all look the same.

Option 3: Figma + Automation 

Time to set up: 4+ hours
Time per image: 20 minutes (Figma → export → upload)
Scalability: Manual at scale (hire a VA)
Enter fullscreen mode Exit fullscreen mode

Result: You spend half your time making images instead of writing content.

The Solution: OG Image API

Generate custom OG images on-demand with one HTTPS request. Your flow:

  1. Blog post published → API triggers
  2. Template customization (title, author, date) → instant
  3. Image generated → served to social platforms
  4. Default preview shows → custom image appears within 1 hour

No manual work. No designer. Scales to 1000 posts per day.

Complete Example: Generate OG Images

1. Basic OG Image Generation 

const axios = require('axios');

async function generateOgImage(title, author, date) {
  try {
    const response = await axios.post(
      'https://pagebolt.dev/api/v1/og-image',
      {
        title: title,
        description: author,
        subtitle: `Published: ${date}`,
        template: 'default', // or 'minimal', 'gradient'
      },
      {
        headers: {
          'x-api-key': process.env.PAGEBOLT_API_KEY,
        },
        responseType: 'arraybuffer',
      }
    );

    return response.data; // PNG image buffer
  } catch (error) {
    console.error('OG image generation failed:', error.message);
    throw error;
  }
}

// Usage
generateOgImage(
  'How to Build a Faster API',
  'by Alice Chen',
  'March 26, 2026'
).then((imageBuffer) => {
  require('fs').writeFileSync('og-image.png', imageBuffer);
  console.log('OG image saved!');
});
Enter fullscreen mode Exit fullscreen mode

2. Auto-Generate on Blog Post Publish (Express) 

const express = require('express');
const fs = require('fs').promises;
const path = require('path');

const app = express();
app.use(express.json());

app.post('/api/publish-blog', async (req, res) => {
  const { title, author, date, slug } = req.body;

  try {
    // Generate OG image
    const imageBuffer = await generateOgImage(title, author, date);

    // Save to public/og-images/
    const imagePath = path.join(
      __dirname,
      'public/og-images',
      `${slug}.png`
    );

    await fs.mkdir(path.dirname(imagePath), { recursive: true });
    await fs.writeFile(imagePath, imageBuffer);

    // Return the image URL (for frontmatter)
    const imageUrl = `https://yoursite.com/og-images/${slug}.png`;

    res.json({
      success: true,
      ogImage: imageUrl,
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000);
Enter fullscreen mode Exit fullscreen mode

3. Gatsby/Next.js Integration (On Build) 

// In your Gatsby or Next.js build script
const fs = require('fs').promises;
const path = require('path');
const axios = require('axios');

async function generateOgImagesForBlog() {
  // Read all blog posts (example: from markdown frontmatter)
  const posts = [
    {
      title: 'How to Build a Faster API',
      author: 'Alice Chen',
      date: 'March 26, 2026',
      slug: 'faster-api',
    },
    {
      title: 'Scaling Node.js to 100K Requests/Second',
      author: 'Bob Singh',
      date: 'March 25, 2026',
      slug: 'nodejs-scaling',
    },
  ];

  for (const post of posts) {
    // Generate image
    const imageBuffer = await generateOgImage(post.title, post.author, post.date);

    // Save to static folder
    const imagePath = path.join(
      __dirname,
      'static/og-images',
      `${post.slug}.png`
    );

    await fs.mkdir(path.dirname(imagePath), { recursive: true });
    await fs.writeFile(imagePath, imageBuffer);

    console.log(`✅ Generated OG image for: ${post.slug}`);
  }
}

// Call during build
generateOgImagesForBlog();
Enter fullscreen mode Exit fullscreen mode

4. Scheduled Regeneration (Cron Job)

If your blog titles change or you want to update the design across all posts:

const cron = require('node-cron');
const axios = require('axios');
const fs = require('fs').promises;

// Every night at 2 AM, regenerate all OG images
cron.schedule('0 2 * * *', async () => {
  console.log('Regenerating all OG images...');

  const posts = await getAllBlogPosts(); // Your function

  for (const post of posts) {
    try {
      const imageBuffer = await generateOgImage(
        post.title,
        post.author,
        post.date
      );

      const filePath = `public/og-images/${post.slug}.png`;
      await fs.writeFile(filePath, imageBuffer);

      console.log(`✅ Updated: ${post.slug}`);
    } catch (error) {
      console.error(`❌ Failed: ${post.slug} — ${error.message}`);
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

5. Dynamic OG Images (Per Page)

Generate a unique image per product, user profile, or page:

app.get('/api/og-image/:slug', async (req, res) => {
  const { slug } = req.params;

  try {
    // Fetch data for this page (post, product, user, etc.)
    const data = await getPageData(slug);

    // Generate image with page-specific data
    const response = await axios.post(
      'https://pagebolt.dev/api/v1/og-image',
      {
        title: data.title,
        description: data.subtitle,
        subtitle: data.author || data.price,
        template: 'default',
      },
      {
        headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY },
        responseType: 'arraybuffer',
      }
    );

    // Return PNG directly to browser
    res.setHeader('Content-Type', 'image/png');
    res.setHeader('Cache-Control', 'public, max-age=86400'); // Cache 24h
    res.send(response.data);
  } catch (error) {
    res.status(500).send('OG image generation failed');
  }
});
Enter fullscreen mode Exit fullscreen mode

6. Template Customization

Different templates for different content types:

const templates = {
  blog: 'default', // Title-focused
  product: 'product', // Image + price
  social: 'gradient', // Colorful, eye-catching
  news: 'minimal', // Clean, professional
};

async function generateOgImage(data, type = 'blog') {
  return axios.post(
    'https://pagebolt.dev/api/v1/og-image',
    {
      title: data.title,
      description: data.description,
      subtitle: data.meta,
      template: templates[type],
      accentColor: data.color || '#007bff', // Branding color
    },
    {
      headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY },
      responseType: 'arraybuffer',
    }
  );
}

// Usage
generateOgImage({
  title: 'Pro Plan: $99/month',
  description: 'Unlimited requests',
  meta: 'Limited time offer',
  color: '#28a745', // Green for pricing
}, 'product');
Enter fullscreen mode Exit fullscreen mode

Real-World: Blog OG Images at Scale

A blog publishing 100 posts per month:

Manual (Designer): $10,000/month
Figma + Automation: 50 hours/month = $2,000/month (if you outsource)
PageBolt API: $29/month (100 images = ~$0.30 each)

Why This Matters for SEO & Conversion

Studies show:

Factor Impact
Custom OG image +30–50% click-through on social
Branded image +25% brand recall
Consistent design +40% perceived professionalism
Fast load +15% share completion

Every share of your content is free marketing. A better OG image = more clicks = more traffic.

Templates Available

  • default — Title + subtitle, professional, works for everything
  • minimal — Clean white space, typography-focused
  • gradient — Colorful, modern, eye-catching
  • product — Large title, perfect for products/pricing
  • news — Headline-style, good for breaking news/announcements

Getting Started

  1. Sign up: pagebolt.dev — 100 free requests/month
  2. Get API key: Copy from dashboard
  3. Choose template: Pick from 5 pre-built designs
  4. Integrate: Use the Node.js example above
  5. Test: Generate an image, share the link on Twitter/Slack, verify preview

Your blog, product, or platform now has professional OG images for every page — automatically.

Common Questions

Q: Can I customize the template?
A: Yes — upload your own HTML/CSS template for fully custom designs (Pro plan).

Q: How long are images cached?
A: Social platforms cache OG images for 24–48 hours. Regenerate on publish or schedule nightly refreshes.

Q: Does this work with CMS platforms?
A: Yes — Contentful, Sanity, WordPress, Strapi all support webhooks that can trigger image generation.

Q: What about internationalization (non-English text)?
A: Full Unicode support — works with any language, emoji, special characters.

Try it free — 100 requests/month, no credit card. Start now.

Top comments (0)