oganvil/frameworks/Next.js

OG Image Generator for Next.js

Skip the ImageResponse plumbing. One oganvil URL in generateMetadata gives every App Router page a 1200×630 social card, rendered on the edge in ~330 ms of CPU time — without adding render work to your Node server.

Start free — no card Try the free tool

App Router · Pages Router · static export friendly · PNG & SVG

snippet html 
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { openGraph: { images: [ogImage(post.title, post.tag)] } };
}

01 / How it works

Four steps,
one helper file.

  1. Install and configure the SDK

    oganvil is a plain HTTPS API — no npm package, no WASM, no font files in your bundle. Nothing to install; optionally set your customer id for paid-plan quota tracking.

    step 1 bash 
    # .env.local (optional, paid plans)
OGFORGE_CUST=your-customer-id
# free tier: nothing to configure

  2. Create a server helper

    Add a tiny server helper that builds an oganvil URL. Keep it out of client components — the URL is injected into HTML metadata server-side.

    step 2 ts 
    // lib/og.ts
export function ogImage(title: string, tag = "") {
  const qs = new URLSearchParams({ title, tag });
  return `https://oganvil.rowu.workers.dev/api/render?${qs}`;
}

  3. Generate page-specific metadata

    Wire it into generateMetadata (App Router) or getServerSideProps head tags (Pages Router). Each post gets a unique card; repeat views of the same card are free.

    step 3 tsx 
    // app/blog/[slug]/page.tsx
import { ogImage } from "@/lib/og";

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      title: post.title,
      images: [ogImage(post.title, post.tag)],
    },
  };
}

  4. Publish and validate

    Deploy as usual, then paste a live post URL into the free oganvil OG debugger and confirm the Facebook / X / LinkedIn cards look right before sharing.

    step 4 bash 
    # deploy, then validate:
# https://oganvil.rowu.workers.dev/tools/og-debugger
meta example HTML 
<meta
  property="og:image"
  content="https://oganvil.rowu.workers.dev/api/render?title=Your%20page%20title&tag=Your%20subtitle"
>

// One URL. A great preview on every share.

Terminal CURL 
curl "https://oganvil.rowu.workers.dev/api/render?title=My+post&tag=Subtitle&format=png"

No SDK to install. No build step. Just a URL in your page. Then validate the live card with the free OG debugger.

02 / FAQ

Common questions.

Is oganvil a replacement for next/og (ImageResponse)?

Yes — for the common case. next/og renders inside your Node/pod at request time; oganvil renders on the Cloudflare edge and serves from cache. You keep the same <meta> contract without shipping fonts, JSX layouts, or WASM in your app.

Does oganvil work with static export (SSG)?

Yes. Because oganvil is a plain URL, statically exported pages can reference it directly in generateStaticParams-generated metadata — no server render step needed at request time.

Should I call oganvil from client components?

No. Build the URL on the server (or in generateMetadata) and let Next inject it into the page <head>. Social platforms only read the served HTML.

Can each blog post have a unique image?

Yes. Pass the post title (and a tag/subtitle) as query params — every post gets its own 1200×630 card, and identical inputs are served from cache for free.

Ship branded previews for every URL.

One helper file, one meta tag, every route covered. Free to start — no card required.

Start free — no card Validate with the OG debugger