Boost your CTR by x10

Generate |
OG images in minutes

Zero-config dynamic Open Graph images for Next.js, Nuxt, Remix, and more. Just copy & paste the production-ready templates.

Get Started Templates

Zero-config

Production-ready

Flexible customization

Template previewLive

app/opengraph-image.ts

import { createRenderer } from '@ogify/core';
import template from '@ogify/templates/basic';

const renderer = createRenderer({
  templates: { basic: template },
  sharedParams: { brandName: 'OGify' },
});

return renderer.renderToImage('basic', {
  title: 'Hello World',
  subtitle: 'My first OG image',
  layout: 'centered',
});

See the difference

Transform your link previews from generic to gorgeous

No preview

Before OGify

Manual design work for every url

After OGify

Automatic, beautiful, consistent

Why OGify?

OGify provides a set of production-ready templates. Save up to 99% of the time and cost.

Zero-config

Works out of the box with Next.js, Remix, Nuxt, and more.

Hassle-free assets

Just specify a Google Font name, Emoji provider - no downloads, no font files, no hassle.

Flexible customization

Intuitive API & Tailwind-like syntax helps building eye-catching templates faster.

Production-ready templates

OGify provides a set of production-ready templates with zero configuration.

Smart caching

Automatically caches fonts, emojis, and generated images - no configuration required.

RTL Support

Built-in support for Right-to-Left languages like Arabic, Hebrew, and Persian.

Get started
in minutes

Four simple steps to generate beautiful OG images for your content

Install OGify

Add OGify to your project with your favorite package manager

terminal

pnpm add @ogify/core @ogify/templates

Create a Renderer

Import a production-ready template and create a renderer instance

lib/ogify.ts

import { createRenderer } from '@ogify/core';
import template from '@ogify/templates/basic';
import type { TemplateParams } from '@ogify/templates/basic';

export const renderer = createRenderer<{ basic: TemplateParams }>({
  templates: { basic: template },
  sharedParams: {
    brandLogo: 'https://ogify.dev/logo.svg',
    brandName: 'OGify',
  }
});

Generate images

Render beautiful OG images on-demand in your framework

app/opengraph-image.ts

import { renderer } from '@/lib/ogify';

export const size = { width: 1200, height: 630 };

export default async function OgImage() {
  const buffer = await renderer.renderToImage('basic', {
    title: 'My first OG image',
    subtitle: 'Generated with OGify',
    layout: 'centered',
    cta: 'Read more',
    primaryColor: '#000000',
  });

  return new Response(Buffer.from(buffer), {
    headers: {
      'Content-Type': 'image/png',
    },
  });
}