OGPeek vs Vercel OG: The Framework-Agnostic Alternative

Vercel's @vercel/og package generates OG images using Edge Functions and JSX. It works great—if your entire stack is Next.js on Vercel. OGPeek is a REST API that works with anything: Rails, Django, WordPress, Astro, Hugo, or a plain HTML file. Here's a no-nonsense comparison of both approaches.

The Short Version

If you use Next.js deployed on Vercel and want maximum design control over your OG images using JSX, @vercel/og is a solid choice. You write React-like components that render to images at the edge. It's free as part of Vercel's platform.

If you use anything other than Next.js—or you don't want to write JSX for social cards—OGPeek is faster to integrate. One API call. No build step. No framework dependency. Works from a curl command or a plain HTML <meta> tag.

The "free" part of Vercel OG deserves scrutiny. The package itself costs nothing, but it only runs on Vercel's infrastructure. Vercel's free tier is limited. Their Pro plan is $20/month per team member. OGPeek's Pro plan is $9/month flat for 5,000 images, and it works regardless of where your site is hosted.

What Each Tool Actually Does

Vercel OG (@vercel/og)

Vercel OG is an npm package that uses Satori (Vercel's SVG rendering engine) to convert JSX components into PNG images. It runs inside Vercel Edge Functions, meaning it executes on Vercel's edge network close to the user.

You write a React-like component that describes the layout of your OG image. At request time, the Edge Function renders that component to an image. This gives you full programmatic control: conditional layouts, dynamic data, custom fonts, and arbitrary styling.

The trade-off is that you need to know JSX, you need a Next.js project, and you need to deploy on Vercel. Your OG image generation is coupled to your deployment platform.

OGPeek

OGPeek is a hosted REST API. You construct a URL with query parameters—title, subtitle, template, theme, brand color—and you get back a 1200×630 PNG. There's no SDK to install, no build step, no framework requirement.

Under the hood, OGPeek also uses SVG-native rendering for speed. But instead of writing JSX, you pick from 7 professionally designed templates and customize with parameters. The API handles typography, spacing, and responsive text sizing automatically.

Framework Compatibility

This is where the two approaches diverge most sharply. Vercel OG is tied to the Vercel ecosystem. OGPeek is a URL—it works everywhere.

If you're building with Next.js on Vercel today but might migrate later—to Remix, Astro, or self-hosted infrastructure—choosing Vercel OG creates lock-in. Your OG image generation breaks the moment you leave Vercel. With OGPeek, your OG images keep working regardless of where your site lives.

Pricing: The Hidden Cost of "Free"

Vercel OG is free as a package. You don't pay per image generated. But it only runs on Vercel, and Vercel itself is not free for most production use cases.

For a solo developer on Vercel's free tier, @vercel/og genuinely costs nothing. But the free tier has limits: 100GB bandwidth, limited serverless function execution time, and no commercial support. The moment you need the Pro plan for other reasons (custom domains, team collaboration, higher limits), you're paying $20/month per seat—and that's before considering that your OG images are now inseparable from that hosting bill.

Developer Experience: Code Comparison

Let's generate the same OG image: dark background, title "Ship Faster with AI", subtitle "A developer guide", orange brand accent.

Vercel OG

// 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') ?? 'Default Title';
  const subtitle = searchParams.get('subtitle') ?? '';

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          padding: '80px',
          background: 'linear-gradient(135deg, #0F0F12, #1a1a2e)',
          fontFamily: 'sans-serif',
        }}
      >
        <div
          style={{
            fontSize: 64,
            fontWeight: 700,
            color: '#FFFFFF',
            lineHeight: 1.1,
            marginBottom: 20,
          }}
        >
          {title}
        </div>
        <div
          style={{
            fontSize: 28,
            color: '#9B9BA7',
          }}
        >
          {subtitle}
        </div>
        <div
          style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            height: 4,
            background: '#FF7A00',
          }}
        />
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

That's 45 lines of TypeScript. It requires a Next.js project with the App Router, the next/og package, Vercel deployment, and knowledge of JSX-in-image rendering (which has quirks—not all CSS properties work, flexbox behaves differently, and custom fonts require manual loading).

OGPeek

// Any framework, any language, any platform
const ogUrl = `https://todd-agent-prod.web.app/api/v1/og?` + new URLSearchParams({
  title: 'Ship Faster with AI',
  subtitle: 'A developer guide',
  template: 'gradient',
  theme: 'midnight',
  brandColor: '#FF7A00'
});

Six lines. Works in Node.js, Python, Ruby, PHP, Go, or any language that can construct a URL. No JSX. No build step. No deployment coupling.

Or use it directly in HTML with zero JavaScript:

<meta property="og:image"
  content="https://todd-agent-prod.web.app/api/v1/og
    ?title=Ship+Faster+with+AI
    &subtitle=A+developer+guide
    &template=gradient
    &theme=midnight
    &brandColor=%23FF7A00" />

For Django, Rails, WordPress, Hugo, or any server-rendered framework, this is the integration. One meta tag. No package installation, no API route, no edge function configuration.

The Build Step Problem

Vercel OG requires a build and deploy cycle every time you change your OG image layout. Want to adjust the font size? Rebuild and deploy. Want to add a logo? Rebuild and deploy. Want to test how your title looks at different lengths? You need a local dev server running with the Edge Runtime.

OGPeek is a URL. Change the parameters, refresh the browser. There's no build. You can test every variation by editing the URL in your browser's address bar. This makes iteration dramatically faster, especially for non-developers (marketers, content teams) who need to preview social cards without touching code.

Templates vs. Custom JSX

This is an honest trade-off. Vercel OG gives you a blank canvas. If you have specific design requirements—a complex layout with multiple images, branded illustrations, or custom typography—the JSX approach is more flexible.

OGPeek gives you 7 templates with 5 themes each, designed by professionals for social media feeds. For most use cases—blog posts, SaaS pages, documentation, landing pages—a well-designed template with your brand color produces better results than hand-coded JSX, because the templates handle edge cases like long titles, text wrapping, and optimal spacing.

Performance

Both tools use Satori under the hood for SVG rendering, so raw image generation speed is comparable. The difference is in architecture:

• Vercel OG: Runs at the edge, close to users. Cold starts can add 200-500ms on the first invocation. After warmup, generation is fast (~100-300ms). But Edge Functions have memory limits and execution time limits.
• OGPeek: Centralized API with aggressive caching. First request: ~100-200ms. Subsequent requests for the same parameters are served from cache in under 50ms. No cold start penalty because the service is always warm.

For social platform crawlers (Twitter, Facebook, LinkedIn, Slack), what matters is that the image is available on the first request. A cold-start delay from Vercel OG can cause the crawler to time out and show no preview image. OGPeek's always-warm architecture avoids this.

Vendor Lock-in

This is the elephant in the room. Vercel OG ties your OG image generation to:

• Next.js as your framework
• Vercel as your deployment platform
• Edge Functions as your runtime
• JSX as your templating language

If you decide to migrate from Next.js to Remix, Astro, or SvelteKit, your OG image generation breaks. If you move from Vercel to AWS, Cloudflare, or self-hosted infrastructure, your OG image generation breaks. You have to rebuild it from scratch.

OGPeek is a URL. It works the same whether your site runs on Vercel, AWS, Firebase, Cloudflare, DigitalOcean, a Raspberry Pi, or Geocities. Migration cost is zero because there's nothing to migrate—it's an external API call.

When to Choose Vercel OG

Vercel OG is the right choice when:

• Your stack is Next.js on Vercel and you have no plans to change
• You need pixel-perfect custom layouts with images, logos, or complex compositions
• You want to co-locate OG image logic with your application code
• You're comfortable writing and maintaining JSX for image generation
• You're on Vercel's free tier and genuinely pay $0

When to Choose OGPeek

OGPeek is the right choice when:

• You use any framework other than Next.js—Rails, Django, WordPress, Astro, Hugo, Laravel, Express, anything
• You want OG images without writing code—just a URL with parameters
• You need to ship in minutes, not hours of JSX debugging
• You want no vendor lock-in—switch hosting providers without breaking social cards
• Your team includes non-developers (marketers, writers) who need to preview and customize OG images
• You want predictable pricing at $9/month instead of per-seat Vercel billing
• You value ready-made templates designed for social feeds over building from scratch

Integration Examples

Ruby on Rails

# app/helpers/meta_helper.rb
def og_image_url(title, subtitle = nil)
  params = {
    title: title,
    subtitle: subtitle || 'MyApp Blog',
    template: 'gradient',
    theme: 'midnight',
    brandColor: '#FF7A00'
  }.compact
  "https://todd-agent-prod.web.app/api/v1/og?#{params.to_query}"
end

Django

# views.py
from urllib.parse import urlencode

def og_image_url(title, subtitle='MyApp Blog'):
    params = urlencode({
        'title': title,
        'subtitle': subtitle,
        'template': 'gradient',
        'theme': 'midnight',
        'brandColor': '#FF7A00'
    })
    return f'https://todd-agent-prod.web.app/api/v1/og?{params}'

WordPress (PHP)

// functions.php
function ogpeek_image($title, $subtitle = 'My WordPress Site') {
  $params = http_build_query([
    'title'      => $title,
    'subtitle'   => $subtitle,
    'template'   => 'gradient',
    'theme'      => 'midnight',
    'brandColor' => '#FF7A00'
  ]);
  return "https://todd-agent-prod.web.app/api/v1/og?{$params}";
}

Hugo (Static Site)

<!-- layouts/partials/head.html -->
<meta property="og:image" content="https://todd-agent-prod.web.app/api/v1/og?title={{ .Title | urlquery }}&subtitle={{ .Site.Title | urlquery }}&template=gradient&theme=midnight&brandColor=%23FF7A00" />

Every one of these integrations takes under 5 minutes. With Vercel OG, none of these frameworks are supported at all.

Conclusion

Vercel OG is a well-engineered tool for a narrow use case: Next.js apps deployed on Vercel where you want full JSX control over image layout. If that describes your project, it's a reasonable choice.

For everyone else—which is most of the web—OGPeek is simpler, cheaper, and works everywhere. No framework lock-in, no build step, no JSX. Just a URL that returns an image.

The web is not all Next.js. Your OG image solution shouldn't assume it is.

Read more: How to generate dynamic OG images without Next.js, or see our integration guide for Next.js, Remix, and Astro. For a comparison with another popular tool, check out Cloudinary vs OGPeek.