Automatic OG images with Bunny.net

If your site is behind Bunny.net, you can use an edge script to add a SnapOG og:image tag to every page — without touching your origin server.

How it works

1. A visitor (or social crawler) requests a page through your Bunny pull zone.
2. Bunny fetches the page from your origin as usual.
3. Before returning the response, the edge script checks the HTML and adds or replaces the og:image meta tag to point at snapog.com/s/<your-page-url>.
4. The modified response is returned to the visitor.

Setup

1. Create the edge script

In the Bunny dashboard, go to Edge Platform → Edge Scripting and create a new script. You'll get an editor with a default template.

Delete the starter code and paste one of the scripts below.

Every page gets a SnapOG card, even if the origin already sets one.

Pages that already have an og:image keep theirs. SnapOG only fills in the gaps.

import * as BunnySDK from "https://esm.sh/@bunny.net/[email protected]";

BunnySDK.net.http.servePullZone()
  .onOriginResponse((ctx) => {
    const contentType = ctx.response.headers.get("content-type") || "";
    if (!contentType.includes("text/html")) {
      return Promise.resolve(ctx.response);
    }

    return ctx.response.text().then((html) => {
      const pageUrl = encodeURIComponent(ctx.request.url);
      const ogImage = `<meta property="og:image" content="https://snapog.com/s/${pageUrl}" />`;

      if (html.match(/<meta[^>]*property=["']og:image["'][^>]*>/i)) {
        html = html.replace(/<meta[^>]*property=["']og:image["'][^>]*>/i, ogImage);
      } else {
        html = html.replace("</head>", ogImage + "</head>");
      }

      return new Response(html, {
        status: ctx.response.status,
        headers: ctx.response.headers,
      });
    });
  });

import * as BunnySDK from "https://esm.sh/@bunny.net/[email protected]";

BunnySDK.net.http.servePullZone()
  .onOriginResponse((ctx) => {
    const contentType = ctx.response.headers.get("content-type") || "";
    if (!contentType.includes("text/html")) {
      return Promise.resolve(ctx.response);
    }

    return ctx.response.text().then((html) => {
      if (!html.match(/<meta[^>]*property=["']og:image["'][^>]*>/i)) {
        const pageUrl = encodeURIComponent(ctx.request.url);
        const ogImage = `<meta property="og:image" content="https://snapog.com/s/${pageUrl}" />`;
        html = html.replace("</head>", ogImage + "</head>");
      }

      return new Response(html, {
        status: ctx.response.status,
        headers: ctx.response.headers,
      });
    });
  });

2. Publish the script

Click Publish in the editor.

3. Add an Edge Rule to activate the script

The script won't run until you create an Edge Rule that routes requests through it. Go to your pull zone's Edge Rules and add a new rule.

Action

Set the action to Run Edge Script and select the script you just created.

Conditions

Set the condition to match the URLs you want to cover:

• * — all pages on the pull zone
• https://yoursite.com/* — all pages on a specific hostname
• */blog* — only blog pages

What the script does

• Runs as middleware on your existing pull zone using servePullZone() — Bunny handles the origin fetch, so the script works with any origin.
• Non-HTML responses (images, CSS, JS, etc.) pass straight through with no modification.
• For HTML responses, it checks for an existing og:image meta tag and either replaces it or adds one, depending on the mode you chose above.

Verifying it works

After publishing and setting up the edge rule, check any page on your site:

curl -s https://yoursite.com/some-page | grep og:image

You should see something like:

<meta property="og:image" content="https://snapog.com/s/https%3A%2F%2Fyoursite.com%2Fsome-page" />

If you still see the old tag, purge the cache in your Bunny dashboard and try again.

You can also paste the URL into the Facebook Sharing Debugger or Twitter Card Validator to see the card that social platforms will display.

Caching

SnapOG caches rendered images for about a week. If you need to force a refresh after updating a page, see the cache refresh docs.