· Image Automation API Team · Tutorials

How to Automate OG Images with an API: A Next.js Tutorial

Step-by-step guide to generating dynamic OG images for your Next.js app using an image automation API. Includes code examples, deployment tips, and SEO best practices.

Open Graph (OG) images are the social previews that show up when someone shares a URL on Twitter, LinkedIn, Slack, Discord, or any other platform that respects the OG protocol. A blog post with a custom OG image gets clicked roughly 40 percent more often than one with a generic site preview.

The hard part is generating them at scale. Hand-designing one per article in Figma works for the first ten posts. By post thirty, the workflow falls apart. This tutorial walks through how to automate OG image generation for a Next.js application using Image Automation API.

What We Are Building

By the end of this tutorial you will have:

  • A template designed once in a visual editor that swaps title, subtitle, and author dynamically.

  • A Next.js API route that generates OG images on demand using the template.

  • Proper OG and Twitter Card meta tags wired into your page metadata.

  • A workflow that produces a unique social preview for every page without manual design work.

Why Not Use next/og or Satori?

Next.js ships with built-in OG image generation through the ImageResponse API powered by Satori. It works well for simple cases. The limitations show up as soon as your needs grow:

  • Limited typography control compared to dedicated design tools.

  • No reusable visual templates that designers can edit without touching code.

  • No image manipulation beyond basic layouts.

  • Edge runtime constraints make complex compositions difficult.

An external image automation API decouples the design from the code. Your designer edits a template visually. Your code calls the API with dynamic data. Each side moves independently.

Step 1: Design the Template

Sign in to your Image Automation API account and create a new template at 1200x630 pixels (the recommended OG image size).

Add the following layers:

  • A background image or solid color.

  • Your logo in a corner.

  • A title text layer. Set the font weight to bold and the layer name to title.

  • A subtitle or excerpt text layer. Set the layer name to subtitle.

  • An author text layer with the layer name author.

  • Optional: a category tag or publish date.

Save the template and copy its ID from the URL. You will use this ID in the API call.

Step 2: Set Up Environment Variables

Add your Image Automation API key and template ID to your Next.js environment file:

# .env.local IAA_API_KEY=your_api_key_here IAA_TEMPLATE_ID=your_template_id_here

Step 3: Create the OG Image API Route

In a Next.js App Router project, create a new file at app/api/og/route.ts. This route will accept query parameters and proxy the request to the image automation API.

import { NextRequest } from 'next/server'; export async function GET(request: NextRequest) { const { searchParams } = new URL(request.url); const title = searchParams.get('title') || 'Default Title'; const subtitle = searchParams.get('subtitle') || ''; const author = searchParams.get('author') || ''; const response = await fetch('https://api.templated.io/v1/render', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.IAA_API_KEY}`, }, body: JSON.stringify({ template: process.env.IAA_TEMPLATE_ID, layers: { title: { text: title }, subtitle: { text: subtitle }, author: { text: author }, }, }), }); const data = await response.json(); return Response.redirect(data.url, 302); }

This route accepts query params for title, subtitle, and author, calls the image automation API, and redirects the browser to the rendered image URL. The redirect approach lets us use this route directly in OG meta tags.

Step 4: Wire Up Page Metadata

In your page or layout component, generate the OG image URL using your data and inject it into the metadata:

import type { Metadata } from 'next'; export async function generateMetadata({ params }): Promise<Metadata> { const post = await getPost(params.slug); const ogImageUrl = new URL('/api/og', process.env.NEXT_PUBLIC_SITE_URL); ogImageUrl.searchParams.set('title', post.title); ogImageUrl.searchParams.set('subtitle', post.excerpt); ogImageUrl.searchParams.set('author', post.author); return { title: post.title, description: post.excerpt, openGraph: { title: post.title, description: post.excerpt, images: [{ url: ogImageUrl.toString(), width: 1200, height: 630 }], }, twitter: { card: 'summary_large_image', title: post.title, description: post.excerpt, images: [ogImageUrl.toString()], }, }; }

Each blog post now gets a unique OG image with its title, excerpt, and author. No manual design needed.

Step 5: Add Caching

OG images do not change often. Generating them on every request wastes API calls and slows down social crawlers. Add a cache header to the API route:

return new Response(null, { status: 302, headers: { 'Location': data.url, 'Cache-Control': 'public, max-age=86400, s-maxage=604800', }, });

This tells browsers to cache for a day and CDNs to cache for a week. You can tune the values based on how often your content changes.

Step 6: Test It

Deploy your app and test the social previews. The two best tools are:

  • Twitter Card Validator (cards-dev.twitter.com/validator) for X/Twitter previews.

  • LinkedIn Post Inspector for LinkedIn previews. LinkedIn aggressively caches OG data, so this tool is essential during development.

Slack, Discord, and Facebook will all read the same OG tags, so a successful Twitter and LinkedIn test usually means the rest work too.

Beyond the Basics

Once the basic flow works, common extensions include:

  • Adding dynamic author avatars by passing image URLs as layer overrides.

  • Generating different image sizes for different platforms in a single API call.

  • Storing rendered URLs in your database to avoid re-rendering identical previews.

  • A/B testing different OG templates to measure which design drives more clicks.

Wrapping Up

Automated OG images are one of the highest-ROI improvements you can make to a content-driven site. Click-through rates on shared links climb noticeably, and the workflow scales as your content does. The setup takes about 30 minutes once your template is designed.

If you want to try this without writing any setup code first, start a free Image Automation API account, design your template in the editor, and run a few renders directly from the dashboard before wiring up the Next.js integration.

Share:
Back to Blog