DEV Community: Corbanware

How to Add OG Images to Next.js in 5 Minutes

Corbanware — Mon, 27 Apr 2026 01:01:38 +0000

How to Add OG Images to Next.js in 5 Minutes

If you have ever shared a link on Twitter or Slack and watched it render as a sad, plain-text URL with no preview image, you already understand why OG images matter. Those 1200x630 pixel cards are the difference between a link that gets clicked and one that gets scrolled past. Studies show that links with rich preview images get 2-3x more engagement than bare text links.

The good news: if you are building with Next.js and the App Router, adding OG images is remarkably straightforward. Let me walk you through three approaches, from the simplest to the most powerful.

The Foundation: Understanding OG Meta Tags

Before we touch any Next.js code, here is what the browser needs to see in your HTML <head>:

<meta property="og:image" content="https://yoursite.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description" />

That is it. Every social platform (Facebook, Twitter/X, LinkedIn, Slack, Discord, WhatsApp) reads these tags to build the preview card. The image URL must be absolute -- relative paths will not work.

Approach 1: Static Metadata (30 Seconds)

For pages where the OG image never changes (your homepage, about page, pricing page), use the metadata export in your layout or page file:

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Awesome App",
  description: "The best thing since sliced bread",
  openGraph: {
    title: "My Awesome App",
    description: "The best thing since sliced bread",
    images: [
      {
        url: "https://yoursite.com/og-homepage.png",
        width: 1200,
        height: 630,
        alt: "My Awesome App - homepage preview",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
  },
};

Next.js automatically renders the correct <meta> tags in the HTML head. No manual string concatenation, no dangerouslySetInnerHTML. It even handles the Twitter card fallback for you.

Pro tip: Always include the twitter.card: "summary_large_image" property. Without it, Twitter defaults to the small square card, which wastes most of your carefully designed image.

Approach 2: Dynamic generateMetadata (2 Minutes)

This is where things get interesting. For blogs, documentation, or any page with dynamic content, you want a unique OG image per page. The generateMetadata async function lets you compute metadata at request time:

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
import { getPostBySlug } from "@/lib/posts";

interface Props {
  params: Promise<{ slug: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  if (!post) return {};

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.publishedAt,
      images: [
        {
          url: `https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`,
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: { card: "summary_large_image" },
  };
}

Notice the OG image URL points to an API route. That brings us to the next question: how do you actually generate the image?

Approach 3: Generating Images on the Fly

You have two main options here.

Option A: @vercel/og (Self-Hosted)

Vercel's @vercel/og library lets you write JSX that renders as an image. It uses Satori under the hood -- a layout engine that converts React components to SVG, then rasterizes to PNG.

// app/api/og/route.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title") ?? "My Blog";

  return new ImageResponse(
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white', padding: 60 }}>
      <h1 style={{ fontSize: 64, fontWeight: 700, textAlign: 'center' }}>{title}</h1>
    </div>,
    { width: 1200, height: 630 }
  );
}

This works well if you want full control over the design and are comfortable with Satori's CSS limitations.

Option B: External API

If you would rather not maintain your own image generation endpoint, an external API simplifies things significantly. For example, with ogimg.xyz, your dynamic metadata becomes:

const ogUrl = new URL("https://ogimg.xyz/api/og"?utm_source=devto&utm_medium=article&utm_campaign=wf5);
ogUrl.searchParams.set("title", post.title);
ogUrl.searchParams.set("description", post.excerpt);
ogUrl.searchParams.set("template", "gradient");

No API route to maintain, no font files to bundle, no Satori quirks to debug. ogimg.xyz offers a free tier of 50 images/month, which is enough for most personal blogs and small projects.

Testing Your OG Images

After deploying, always verify your images actually work:

Facebook Sharing Debugger -- Paste your URL and hit Scrape Again to force a fresh fetch.
Twitter Card Validator -- Preview exactly what Twitter will render.
LinkedIn Post Inspector -- Check how LinkedIn will render your shared link.
Open your browser DevTools -- Search the HTML head for og:image and make sure the URL loads.

Quick Checklist

og:image URL is absolute (starts with https://)
Image dimensions are 1200x630
File size is under 1MB (5MB max for most platforms)
twitter:card is set to summary_large_image
Image renders correctly when you open the URL directly
You have tested with at least one social platform debugger

Wrapping Up

Adding proper OG images to a Next.js app is one of those 5-minute tasks that pays dividends every time someone shares your content. Whether you go with static metadata, dynamic generateMetadata, self-hosted @vercel/og, or an external service, the important thing is that you do it.

Your links deserve better than plain text.

Have questions about OG images in Next.js? Drop a comment below -- I read every one.

GEO vs SEO: Why Optimizing for AI Search Is the Next Frontier

Corbanware — Mon, 20 Apr 2026 01:00:50 +0000

Why Your Brand Is Invisible to ChatGPT (And How to Fix It)

Corbanware — Mon, 13 Apr 2026 01:00:49 +0000

I Built an AI Search Visibility Auditor - Here Is What I Learned

Corbanware — Mon, 06 Apr 2026 01:00:26 +0000

GEO vs SEO: Why Optimizing for AI Search Is the Next Frontier

Corbanware — Mon, 30 Mar 2026 01:00:36 +0000

Why Your Brand Is Invisible to ChatGPT (And How to Fix It)

Corbanware — Mon, 23 Mar 2026 01:00:31 +0000

I Built an AI Search Visibility Auditor - Here Is What I Learned

Corbanware — Mon, 16 Mar 2026 01:01:11 +0000

Building a Multi-LLM Fallback System with Vercel AI SDK

Corbanware — Mon, 09 Mar 2026 01:01:20 +0000

A practical guide to implementing LLM provider fallback chains for production applications. Covers the architecture of Geonapse's 3-tier fallback system (Gemini Flash-Lite ? Groq ? DeepSeek), error handling patterns, cost optimization strategies, response quality validation, and monitoring. Includes code examples using Vercel AI SDK's unified interface and lessons learned from running multi-provider LLM systems in production.

GEO vs SEO: Why Your Website Is Invisible to ChatGPT (And How to Fix It)

Corbanware — Mon, 02 Mar 2026 01:01:17 +0000

Generative Engine Optimization (GEO) is emerging as the next evolution of SEO. This article explores why traditional SEO techniques only partially work for AI search engines, what factors influence LLM brand recommendations, and a practical framework for auditing your AI search visibility. Covers knowledge graph presence, structured data importance, citation cascades, content structure optimization, and the growing importance of platform presence across Wikipedia, Crunchbase, G2, and other knowledge sources.

I Built an AI Search Visibility Auditor Here's the Architecture

Corbanware — Mon, 23 Feb 2026 01:01:07 +0000

A technical deep-dive into building Geonapse, an AI search visibility auditor. Covers the 3-tier LLM fallback architecture (Gemini Flash-Lite ? Groq ? DeepSeek), the 40+ check audit engine, ranking detection via AI search APIs, and platform presence scanning across 8 knowledge platforms. Built with Next.js 16, Vercel AI SDK, Neon PostgreSQL, and Drizzle ORM. Includes lessons learned about LLM reliability, cost optimization, and building evaluation frameworks for AI-generated content.

I Built an OG Image Generator API — Here's How (Next.js + Vercel Edge)

Corbanware — Sun, 15 Feb 2026 13:56:47 +0000

Every web page that gets shared on social media needs an Open Graph image. It's that 1200x630 preview card you see on Twitter, Facebook, LinkedIn, and Slack. Without one, your shared links look like plain text. With a good one, click-through rates go up significantly.

I've been building web projects for years, and creating OG images has always been my least favorite part of the process. Open Figma, create a canvas, add text, pick colors, export, upload. Repeat for every page. For a blog with 30 posts, that's 30 images. For a documentation site with 100 pages, it's simply not viable.

So I built ogimg.xyz — an API that generates OG images programmatically. Send a POST request, get back a PNG. Here's how it works under the hood.

The Architecture

The entire application is a Next.js 15 project deployed on Vercel. The image generation endpoint is a Vercel Edge Function, which means it runs on Cloudflare's network close to the user — no cold starts, no long-running server processes.

The core pipeline:

Request → Validate API Key → Resolve Template → Satori (JSX → SVG) → Resvg (SVG → PNG) → Response

Let me break down each step.

Step 1: Request Validation

Every API call requires an API key passed via the Authorization: Bearer header. The key is looked up in a Neon PostgreSQL database (via Drizzle ORM). I check:

Is the key valid and active?
What plan tier is this user on?
Have they exceeded their monthly quota?

Rate limiting uses a sliding window counter. Free users get 50 images/month, Hobby gets 1,000, and Pro gets 10,000.

curl -X POST https://ogimg.xyz/api/generate?utm_source=devto&utm_medium=article&utm_campaign=wf5 \
  -H "Authorization: Bearer og_live_abc123..." \
  -H "Content-Type: application/json" \
  -d '{
    "title": "My Awesome Blog Post",
    "description": "Learn how to build better software",
    "template": "gradient",
    "backgroundColor": "#0f172a",
    "textColor": "#f8fafc"
  }'

Step 2: The Template System

Each template is a React component. Yes, actual JSX — because the rendering engine (Satori) understands React components.

Here's a simplified version of what a template looks like:

function GradientTemplate({ title, description, backgroundColor, textColor, pattern }: TemplateProps) {
  return (
    <div style={{
      width: 1200,
      height: 630,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      padding: 80,
      background: `linear-gradient(135deg, ${backgroundColor}, ${adjustColor(backgroundColor, 30)})`,
      color: textColor,
    }}>
      {pattern && <PatternOverlay type={pattern} />}
      <h1 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.2 }}>
        {title}
      </h1>
      {description && (
        <p style={{ fontSize: 28, opacity: 0.8, marginTop: 24 }}>
          {description}
        </p>
      )}
    </div>
  );
}

There are 10 templates total: gradient, minimal, bold, split, centered, documentation, dark, light, branded, and announcement. Each is designed for a different use case.

Step 3: Background Patterns

I built 10 SVG-based background patterns: dots, grid, diagonal lines, cross-hatch, waves, circles, hexagons, triangles, diamonds, and noise. They're rendered as inline SVG within the template and can be customized with color and opacity.

The pattern is layered behind the text content using Flexbox positioning (Satori doesn't support position: absolute, so everything is Flexbox-based).

Step 4: Satori — JSX to SVG

Satori is Vercel's library for converting React components (JSX) to SVG. It implements a subset of CSS Flexbox and renders text using actual font files (loaded as ArrayBuffers).

Key limitations I had to work around:

No position: absolute: All layout must use Flexbox. This makes some designs trickier but keeps the rendering engine simple and fast.
Limited CSS properties: No box-shadow, no backdrop-filter, no CSS gradients on text. You work within the constraints.
Font loading: You must provide font files explicitly. I bundle Inter and a few other Google Fonts as static assets.

Despite the limitations, Satori is fast. It converts a template to SVG in about 50-100ms.

Step 5: SVG to PNG

The SVG from Satori is converted to PNG using Resvg (via @vercel/og). This is a Rust-based SVG renderer compiled to WebAssembly, so it runs on the Edge without any native dependencies. The PNG conversion takes another 50-150ms.

The total pipeline from request to response is typically 200-500ms, depending on complexity and edge location.

Step 6: The Watermark

Free tier images get a small "Powered by ogimg.xyz" watermark in the bottom-right corner. It's rendered as part of the template — just an additional text element added conditionally based on the user's plan tier. Paid plans remove it entirely.

URL Auto-Fetch Mode

There's a convenience feature where you send a URL instead of content:

curl -X POST https://ogimg.xyz/api/generate?utm_source=devto&utm_medium=article&utm_campaign=wf5 \
  -H "Authorization: Bearer og_live_abc123..." \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/blog/my-post",
    "template": "minimal"
  }'

The API fetches the URL, parses the HTML for <title>, <meta name="description">, and <link rel="icon">, and uses those as the template input.

Important security note: I implemented SSRF protection here. The fetch is restricted to public IP ranges only (no 127.0.0.1, no 10.x.x.x, no 169.254.x.x). Schemes are limited to http and https. There's a 5-second timeout. If you're building something similar that accepts user-provided URLs, don't skip this step.

Billing Integration

I use LemonSqueezy as the merchant of record. This means LemonSqueezy handles:

Payment processing (Stripe under the hood)
Global tax calculation and remittance (VAT, GST, sales tax)
Invoicing
Subscription management

On my end, I listen for LemonSqueezy webhooks to update user plan tiers in my database. When a user upgrades, their quota and feature access update immediately.

Pricing tiers:

Plan	Price	Images/Month	Templates	Watermark
Free	$0	50	4	Yes
Hobby	$4.90/mo	1,000	10	No
Pro	$9.90/mo	10,000	10	No
Lifetime	$149 once	10,000	10	No

The Live Playground

I built an interactive playground at ogimg.xyz where you can:

Select a template from a visual grid
Enter your title and description
Pick background colors and patterns
See the preview update in real-time
Copy the equivalent API call (curl or JavaScript)

This serves two purposes: it lets non-technical users generate images without writing code, and it lets developers experiment before integrating the API.

Lessons Learned

Satori is great but limited. If you need pixel-perfect designs, you'll hit its CSS limitations. For structured templates with text and simple graphics, it's perfect.
Edge rendering is the right call for this use case. No cold starts, globally distributed, and fast enough for real-time generation.
Freemium works for developer tools. Developers need to test before they commit. A generous free tier with a clear upgrade path converts better than a free trial with a time limit.
SSRF protection is essential. If your API accepts user-provided URLs, protect against server-side request forgery from day one. Not later. Now.

Try It

Head over to ogimg.xyz and generate your first image. The free tier gives you 50 images/month with no credit card required. If you're integrating into a Next.js project, it's literally one fetch call:

const response = await fetch('https://ogimg.xyz/api/generate',?utm_source=devto&utm_medium=article&utm_campaign=wf5 {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.OGIMG_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'My Page Title',
    description: 'A brief description',
    template: 'gradient',
    backgroundColor: '#1e293b',
  }),
});

const imageBuffer = await response.arrayBuffer();
// Save or serve the image

I'd love feedback on the API design, the templates, and anything else. You can find me on Twitter at @corbanware.