Building Dynamic Open Graph (OG) Images Using @vercel/og

In modern web development, social media sharing is a primary driver of traffic and user engagement. When users share links to your Next.js application across platforms like Twitter, LinkedIn, Facebook, or Discord, having visually appealing, context-aware Open Graph (OG) preview cards dramatically improves click-through rates and brand professionalism.

Historically, generating custom social preview images required complex server-side rendering pipelines, headless browsers like Puppeteer, or manually designing static images for every blog post and product page. These traditional approaches are resource-intensive, slow, and impossible to scale for dynamic content.

Next.js and Vercel solve this challenge through the `@vercel/og` library and Satori. By leveraging web standards like JSX, CSS Flexbox, and Edge Functions, you can dynamically generate blazing-fast, custom Open Graph images on the fly based on article titles, categories, author profiles, or dynamic database parameters.

This comprehensive guide explores how to configure `@vercel/og`, design layouts using HTML and CSS subset properties, handle custom fonts, and integrate dynamic OG images directly into Next.js Metadata API.

The Impact of Rich Previews on User Engagement

When a URL is posted on social media platforms, scrapers look for standard meta tags such as `og:image`, `og:title`, and `og:description`. If your application relies on a single generic static banner image for every page, visitors see no contextual visual cue regarding the specific content of the article or product.

Dynamic Open Graph images solve this by embedding article headlines, dates, tags, and branding directly onto an image rendered specifically for that URL at request time. This personalizes the shared preview and significantly increases audience engagement.

Building this at scale requires a rendering engine that is lightweight enough to run on serverless edge networks without timing out or consuming excessive CPU and memory resources.

How @vercel/og and Satori Work

At the core of `@vercel/og` is **Satori**, an open-source library developed by Vercel that converts HTML and CSS code into SVG vector graphics. Because SVG can be instantly rasterized into PNG images, Satori eliminates the need for heavy headless browser binaries like Chromium.

Combined with Next.js Edge Runtime, `@vercel/og` executes requests close to your users around the globe, caching generated images efficiently on Content Delivery Networks (CDNs).

However, because Satori converts HTML/CSS into SVG rather than running a full browser rendering engine, it supports a specific subset of CSS layout properties:

• Flexbox layout model is fully supported for aligning items, setting directions, and managing spacing.

• Absolute positioning, borders, background colors, and linear gradients are supported.

• Complex CSS features such as CSS grid, floats, multi-column layouts, and external stylesheets are not supported.

Installing Dependencies

To start generating dynamic OG images in your Next.js project, install the `@vercel/og` package via your preferred package manager.

              
            
BASH
Installing the @vercel/og package.
npm install @vercel/og

Once installed, you can create a dedicated API route or file-system-based metadata route inside your Next.js App Router structure to handle image generation.

Creating a Dynamic Image Route with JSX

In the Next.js App Router, you can create a `route.tsx` file inside an app directory segment (e.g., `app/blog/[slug]/opengraph-image.tsx`) to automatically serve dynamic Open Graph images.

              
            
TSX
Dynamic Open Graph image route using @vercel/og and JSX.
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url);
    const title = searchParams.get('title') || 'CodeCrown Tutorial';
    const category = searchParams.get('category') || 'Programming';

    return new ImageResponse(
      (
        <div
          style={{
            height: '100%',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            backgroundColor: '#0f172a',
            padding: '60px',
            fontFamily: 'sans-serif',
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 24, color: '#38bdf8', fontWeight: 'bold' }}>CodeCrown</span>
            <span style={{ fontSize: 20, color: '#94a3b8', textTransform: 'uppercase' }}>{category}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <h1 style={{ fontSize: 60, color: '#ffffff', lineHeight: 1.2, fontWeight: 800 }}>
              {title}
            </h1>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#64748b', fontSize: 18 }}>
            <span>https://codecrown.in</span>
            <span>Tutorial & Guides</span>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e: any) {
    return new Response(`Failed to generate the image`, { status: 500 });
  }
}

Linking OG Images in Page Metadata

Next.js simplifies attaching generated images to your page headers through the built-in Metadata API. By placing an `opengraph-image.tsx` file in your route folder, Next.js automatically detects it and injects the corresponding `og:image` and `twitter:image` tags into your HTML head.

You can also pass dynamic query parameters or generate image sizes (`1200x630` for standard social cards and `600x314` for compact displays) to ensure pixel-perfect rendering across all social media platforms.

Summary

Building dynamic Open Graph images using `@vercel/og` and Satori transforms how Next.js applications handle social media sharing. By writing familiar JSX and Flexbox styles that execute on the Edge, developers can generate lightning-fast, tailored preview cards for every article, product, or profile without managing heavy headless browsers.

Integrate dynamic OG images into your publishing workflows today to enhance brand visibility, improve click-through rates, and deliver a polished sharing experience across the web.