oganvil/frameworks/Cloudflare Workers

OG Image Generator for Cloudflare Workers

Drop one oganvil URL into any Cloudflare Worker and every route gets a perfect 1200×630 social card. Rendered on the Cloudflare edge in ~330 ms of CPU time — on the same runtime your app already runs on. No headless browser, no @vercel/og port, no canvas code.

Works with any Workers project · assets-only or full-stack · PNG & SVG

snippet html
<meta property="og:image"
      content="https://oganvil.rowu.workers.dev/
       api/render?title=Your%20page%20title
       &tag=Your%20subtitle">

Four steps,
one helper file.

  1. Install and configure the SDK

    oganvil needs no SDK and no install. Decide where the key lives (a Worker secret for paid plans, nothing at all for the free tier) and you are done.

    step 1 html
    # optional, for paid-plan quota tracking
    npx wrangler secret put OGFORGE_CUST
    # free tier: nothing to configure
  2. Create a server helper

    Add a tiny server-side helper that builds an oganvil render URL from any page title. Keep it in one module so every route reuses it.

    step 2 js
    // src/og.js — server-side helper
    export function ogImage(title, tag = "") {
      const qs = new URLSearchParams({ title, tag });
      return `https://oganvil.rowu.workers.dev/api/render?${qs}`;
    }
  3. Generate page-specific metadata

    Inject the meta tag per route. In a Worker, transform the response before it is returned — one fetch handler covers every path.

    step 3 js
    // src/index.js — inject og:image for every route
    import { ogImage } from "./og.js";
    
    export default {
      async fetch(request, env) {
        const page = await env.ASSETS.fetch(request);
        const path = new URL(request.url).pathname;
        const html = await page.text();
        const card = ogImage(`My Site — ${path}`);
        return new Response(
          html.replace("</head>",
            `<meta property="og:image" content="${card}"></head>`), page);
      },
    };
  4. Publish and validate

    Deploy with wrangler deploy, then paste any live URL into the free oganvil OG debugger and check the Facebook / X / LinkedIn cards render as intended.

    step 4 bash
    # deploy, then validate
    npx wrangler deploy
    # 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.

Common questions.

Does oganvil work with workers-og?

Yes — and you don’t have to run it yourself. oganvil is a managed API built on the same Workers-native render path (satori + resvg via workers-og). You get the edge rendering without maintaining fonts, layouts, or WASM init in your own deploy.

Do I need a Worker at all to use oganvil?

No. Any page — static site, Pages project, or docs site — can point og:image directly at an oganvil URL. The Worker helper above is only for auto-generating a unique card per route.

Should I call oganvil from client components?

No. Build the oganvil URL server-side (or in your build step) and inject it into the page <head>. Social platforms read the meta tag from HTML — they never run your client JS.

Can each blog post have a unique image?

Yes. Pass the post title (and a tag/subtitle) as query params and every page gets its own card. Identical inputs are cached and never billed twice.

Ship branded previews for every URL.

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