Generating Dynamic OG Images For Your Blog With Vercel OG

Improve your Next.js-based blog with OG images generated with @vercel/og.

Photo by Shubham Dhage on Unsplash

Throughout the years, Open Graph images became more and more important. Most modern tools (like Slack, Facebook, or Twitter) automatically show a little preview image of your website whenever you share it. This is the Open Graph image (or OG image).

Especially on social media platforms, link preview images influence heavily whether or not the user decides to visit your site. A well-designed image shows your competence even before the first page view.

Too bad that generating those images dynamically has been quite a struggle… until now. Vercel has a new library, called Vercel OG, that helps you create preview images on the fly.

Let’s take a look how we can use it to improve our blog.

Installing @vercel/og

First, I set up a brand new Next.js site with the Blog Starter Kit. We will use this blog as an example throughout this article.

With the new site up and running, we can install the @vercel/og library:

npm install @vercel/og

That’s it for now! We do not need any further configuration.

How @vercel/og Works

Before we get into implementation details, let’s first have a look at how Vercel OG image works.

Behind the scenes, Vercel OG uses Satori, a new library to convert HTML and CSS to SVGs (and other image formats).

Satori was built for the edge. Hence, it is lightweight, very fast, and runs in a Node.js environment. Sounds like a perfect use-case for API routes in Next.js? It is!

In our blog, we can utilize @vercel/og to do the following:

1. Create an API route handler like /api/og. For dynamically generated images, this route may accept parameters via query params (e.g. /api/og?title=My First Blog Post)
2. In your API route handler, define a JSX-like syntax that represents your image. Think of a classic JSX component but instead of HTML markup, you get an image as the rendered output.