OGMagic vs @vercel/og

TL;DR

**@vercel/og** is Vercel's official Open Graph image generation library, built on Satori. It's powerful but requires you to write JSX components, deploy Edge Functions, and maintain the code yourself. OGMagic uses the same Satori engine under the hood — but you don't write any code. Just construct a URL.

What is @vercel/og?

@vercel/og is a library that runs inside Vercel Edge Functions. You write React/JSX components that define your OG image layout, and Satori converts them to SVG → PNG. It's essentially a build-your-own OG image API on Vercel's infrastructure.

@vercel/og Limitations for OG Images

• ✗Requires writing and maintaining JSX components for each design
• ✗Only works on Vercel (Edge Functions)
• ✗No visual editor — pure code
• ✗You manage fonts, caching, and error handling yourself
• ✗Limited CSS support (Satori subset, no grid, limited flexbox)
• ✗Each template change requires a code deploy
• ✗No template library — you start from scratch every time

Why Choose OGMagic Instead

• ✓Zero code — just a URL with query parameters
• ✓55+ professionally designed templates ready to use
• ✓Visual editor for non-technical users
• ✓Works with any framework, not just Next.js/Vercel
• ✓No deployment or maintenance needed
• ✓Free tier with no signup required
• ✓Caching and CDN built in

Feature Comparison

Code Comparison

// app/api/og/route.tsx — you write and maintain this
import { ImageResponse } from '@vercel/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Hello';

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

<meta property="og:image" content="https://ogmagic.dev/api/og?template=gradient-mesh&title=My+Post" />

How to Migrate from @vercel/og

1. 1Pick a template from ogmagic.dev/templates that matches your design
2. 2Replace your @vercel/og route with a simple meta tag URL
3. 3Delete your OG image route file and any font assets
4. 4Remove @vercel/og from your package.json dependencies

Frequently Asked Questions