DEV Community

Amna Anjum
Amna Anjum

Posted on

Automate Open Graph Image Generation for Your Blog Posts

#tutorial #productivity #api #automation

Most teams still design open graph images manually — opening a file, adjusting text, exporting, re-uploading. It works for a few posts… but breaks completely once you publish at any sort of scale.

This guide shows how to automate open graph image generation using the Contentdrips API.

You'll turn any blog title, description, or author name into a clean, branded open graph image — generated instantly with one API call. For example, this one:

You can grab ready-made templates here:

👉 Contentdrips Templates

And you can get a free API key (no credit card required) here:

👉 API Management

Why Manual Open Graph Images Don't Scale

Manually creating these preview images leads to:

  • Inconsistent designs
  • Outdated brand elements
  • Missing images when publishing fast
  • Time wasted building the same layout again
  • Zero automation possibilities

Automating open graph generation gives you:

  • Perfectly consistent branding
  • Readable layouts on every post
  • Instant generation
  • Fully automated publishing workflows

What You'll Build

By the end, you'll be able to:

  1. Take a blog title + subtitle
  2. Inject it into a template
  3. Generate a clean open graph image automatically
  4. Get a CDN URL you can embed anywhere

Everything starts with a template. You'll find open graph–ready layouts here:

👉 Contentdrips Templates

Pick any and make sure your textboxes use clear labels like:

  • post_title
  • post_subtitle

These labels will be used in your API call.

Prerequisites

You'll need:

  • Node.js (or any environment that can send HTTP requests)
  • A Contentdrips API key — free and no credit card required: 👉 Get API Key
  • A template ID from the templates gallery

Step 0: Prepare Your Template

Inside Contentdrips:

  • Open any open graph template
  • Or create your own design
  • Click Automate
  • Confirm your textboxes follow intuitive labels

You can explore template options here:

👉 Contentdrips Templates

Step 1: Send Your Blog Data to the API 

async function generateOG({ title, subtitle, templateId, apiKey }) {
  const response = await fetch("https://generate.contentdrips.com/render", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${apiKey}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      template_id: templateId,
      output: "png",
      content_update: [
        { type: "textbox", label: "post_title", value: title },
        { type: "textbox", label: "post_subtitle", value: subtitle }
      ]
    })
  });

  const json = await response.json();
  return json.job_id;
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Poll the Job 

async function checkStatus(jobId, apiKey) {
  const res = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/status`,
    { headers: { "Authorization": `Bearer ${apiKey}` } }
  );
  const json = await res.json();
  return json.status;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Retrieve the Final Open Graph Image 

async function getImage(jobId, apiKey) {
  const res = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/result`,
    { headers: { "Authorization": `Bearer ${apiKey}` } }
  );
  const json = await res.json();
  return json.export_url;
}
Enter fullscreen mode Exit fullscreen mode

Complete Function: Blog Data → Automated Open Graph Image 

async function createOpenGraphImage(title, subtitle, templateId, apiKey) {
  const jobId = await generateOG({ title, subtitle, templateId, apiKey });

  let status = "queued";
  while (status !== "completed") {
    await new Promise(r => setTimeout(r, 2000));
    status = await checkStatus(jobId, apiKey);
  }

  return await getImage(jobId, apiKey);
}
Enter fullscreen mode Exit fullscreen mode

How to Automate This in Your Publishing Workflow

1. Static Site Generators (Next.js, Astro, Hugo)

Generate the image whenever a new markdown file is created.

2. CMS-Driven Sites (Ghost, WordPress, Sanity)

Trigger an image render whenever a post is published.

3. Developer Docs

Auto-create new open graph images for every documentation page.

4. Weekly or Daily Content Pipelines

Use your CI pipeline to auto-generate open graph visuals for scheduled posts.

Throughout all these workflows, you'll be using the same simple API — and you can grab the required key here:
👉 API Key (Free)

Why This Approach Works

  • Eliminates manual design work
  • Guarantees consistent branding
  • Reduces publishing friction
  • Works at any scale
  • Fully scriptable and automatable

Your open graph images become something that "just happens" — no effort, no design bottleneck, no delays.

What You Can Build Next

  • Auto-generate open graph + social graphics together
  • Add author photos, categories, or publish dates
  • Pull templates dynamically from your workspace
  • Build a real-time "design-as-a-service" pipeline
  • Generate entire batches of open graph images with a single script

Template options are here:
👉 Contentdrips Templates

Get your free API key and start automating:
👉 API Management

Final Thoughts

Open graph images shouldn't require design work. With automated templates and a simple API call, you can turn every blog post into a polished, branded visual — instantly and programmatically.

Automation makes your publishing pipeline cleaner, faster, and far more consistent.

Top comments (0)