MyOG.social vs @vercel/og

Quick Summary

New to OG images? Read our complete guide to Open Graph images first.

@vercel/og is a popular open-source library for generating OG images using React components and Satori. It gives you full control over image design but requires you to deploy and maintain your own infrastructure.

MyOG.social is a hosted service that generates OG images automatically from your page content. Add one meta tag and you're done — no code, no infrastructure, no design work.

Feature Comparison

When to Use MyOG.social

MyOG.social is the better choice when you want to:

• Get started quickly: Add one meta tag and OG images work immediately
• Avoid infrastructure: No servers to deploy, no edge functions to manage, no cold starts to worry about
• Use a non-JavaScript stack: Works with WordPress, Ghost, Rails, Django, PHP, static HTML — anything that serves HTML. No Node.js backend required.
• Skip the design work: Images are generated automatically based on your page content
• Reduce maintenance: No code to update when dependencies change or security patches are needed

When to Use @vercel/og

@vercel/og might be a better fit when you:

• Need pixel-perfect control: Custom fonts, exact layouts, brand-specific designs
• Already use Vercel + Next.js: Deep integration with your existing JavaScript project deployed on Vercel
• Have React expertise: Comfortable building and maintaining React components
• Want to avoid external dependencies: Keep everything within your own infrastructure

Note: @vercel/og requires a Node.js runtime, so it's not suitable for non-JS stacks like WordPress, Ghost, Rails, or Django without adding a separate JS backend.

Setup Comparison

MyOG.social Setup

Add this meta tag to your pages:

<meta property="og:image" content="https://api.myog.social/og?url={yourURL}" />

That's it. Images are generated on first request and cached automatically.

@vercel/og Setup

With @vercel/og, you need to:

1. Install the package and configure your build
2. Create an API route or edge function
3. Design your image template in React/JSX
4. Handle fonts, caching, and error states
5. Deploy to Vercel (or configure your own edge runtime)
6. Point your og:image meta tag to your endpoint

Here's a minimal example of the code required (from Vercel's docs):

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'edge',
};

export default function handler(request) {
  return new ImageResponse(
    (
      <div style={{
        fontSize: 128,
        background: 'white',
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        Hello world!
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

This is just the starting point — real-world implementations require dynamic content, custom fonts, error handling, and more.

Cost Comparison

@vercel/og: Free to use, but you pay for compute. On Vercel's Pro plan, edge function invocations are metered. Self-hosting means managing your own infrastructure.

MyOG.social: Starts with a free trial, then simple monthly pricing based on images generated. Caching means most requests don't count against your quota.

The Bottom Line

If you want full design control and already have React/Vercel expertise, @vercel/og is a solid choice. You'll invest time upfront but get complete flexibility.

If you want OG images working in minutes without code or infrastructure, MyOG.social gets you there faster. Add one meta tag, and every page on your site has a professional social preview.