Generate OG images on the edge with Netlify

In October 2022, Vercel open sourced their new library Satori which allows users to generate SVGs on the edge using React. This released a lot of potential for generating customizable images faster than ever before.

In this guide, we will be using the library og-edge which is a forked version of Satori ported to Deno written by Matt Kane to generate open graph images on the edge with Netlify in your Astro project.

Getting started

Create a new Astro project using the CLI.

npm create astro@latest

Install the Netlify CLI globally on your machine. This will allow you to run Netlify edge functions locally during development.

npm install -g netlify-cli

In the root of your project, create a new directory called netlify/edge_functions.

Inside the edge_functions folder, create a new file called og.tsx.

Finally, create a new file called netlify.toml in the root of your project and add the following:

[[edge_functions]]
  function = "og"
  path = "/og-image"

This configuration file will declare a new edge function with the name of og and replace the default Netlify edge function path from /.netlify/edge_functions/og-image to /og-image.

Creating an og image generator

To generate our open graph images, we will take advantage of the query parameters on the request object to populate the image with dynamic content.

In the next example, we will get the title and pubDate query parameters from the request.

export default async function handler(req: Request) {
  // Get the query parameters `title` and `pubDate` from the request
  const url = new URL(req.url);
  const params = new URLSearchParams(url.search);
  const title = params.get("title") ?? "Created with Netlify edge functions";
  const pubDate = params.get("pubDate") ?? new Date().toISOString();
}

Next, import the ImageResponse function from og-edge and React from react. If you are not familiar with imports in Deno, you can read more about them in their documentation.

import React from "https://esm.sh/react@18.2.0";
import { ImageResponse } from "https://deno.land/x/og_edge@0.0.2/mod.ts";

export default async function handler(req: Request) {
  // Get the query parameters from the request
  const url = new URL(req.url);
  const params = new URLSearchParams(url.search);
  const title = params.get("title") ?? "Created with Netlify edge functions";
  const pubDate = params.get("pubDate") ?? new Date().toISOString();
}

Finally, use the ImageResponse function to generate our open graph image and return it as a response.

import React from "https://esm.sh/react@18.2.0";
import { ImageResponse } from "https://deno.land/x/og_edge@0.0.2/mod.ts";

export default function handler(req: Request) {
  // Get the query parameters from the request
  const url = new URL(req.url);
  const params = new URLSearchParams(url.search);
  const title = params.get("title") ?? "Created with Netlify edge functions";
  const pubDate = params.get("pubDate") ?? new Date().toISOString();

  // Generate the open graph image
  return new ImageResponse((
    <div
    style={{
      height: '100%',
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#fff',
      fontSize: 32,
    }}
    >
      <div>{title}</div>
      <div>{pubDate}</div>
    </div>
  ));
}

Testing an edge function locally

To test your edge function locally, run the following command in the root of your project.

netlify dev

This will start a local development server on localhost:8888.

To test the edge function, navigate to localhost:8888/og-image?title=Hello%20World&pubDate=2022-11-05 in your browser. You should see the following image.

Creativity is the limit

From this point forward, you can customize the image to your liking. Feel free add additional query parameters, change the styling, add additional elements, anything you can think of.

If you are in need of inspiration, here is the open graph image I generated for this post.