Skip to content
Last updated on March 3, 2023
6 min read

Open Graph (OG) Image Generation

Learn how to optimize social media image generation via the Open Graph Protocol and @vercel/og library.

To assist with generating dynamic Open Graph (OG) images, you can use the Vercel @vercel/og library to compute and generate social card images using Vercel Edge Functions.

Getting started

Review the requirements and generate a static hello world image.

Examples

Use code samples to explore using parameters and different content types.

Benefits

  • Performance: With a small amount of code needed to generate images, Edge Functions can be started almost instantly. This allows the image generation process to be fast and recognized by tools like the Open Graph Debugger
  • Ease of use: You can define your images using HTML and CSS and the library will dynamically generate images from the markup
  • Cost-effectiveness: @vercel/og automatically adds the correct headers to cache computed images at the edge, helping reduce cost and recomputation

Supported features

  • Basic CSS layouts including flexbox and absolute positioning
  • Custom fonts, text wrapping, centering, and nested images
  • Ability to download the subset characters of the font from Google Fonts
  • Compatible with any framework and application deployed on Vercel

Usage

Requirements

  • Install Node.js 16 or newer by visiting nodejs.org
  • Install @vercel/og by running the following command inside your project directory:
pnpm i @vercel/og
  • For Next.js implementations, make sure you are using Next.js v12.2.3 or newer
  • Create API endpoints that you can call from your front-end to generate the images. Since the HTML code for generating the image is included as one of the parameters of the ImageResponse function, the use of .jsx or .tsx files is recommended as they are designed to handle this kind of syntax
  • Use Edge Runtime by enabling the runtime: 'edge' config flag as the default Node.js runtime is not supported

Getting started

Get started with an example that generates an image from static text using Next.js by setting up a new app with the following command:

pnpm create next-app

Create an API endpoint by adding og.tsx under /pages/api.

Then paste the following code:

pages/api/og.tsx
import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'edge',
};
 
export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}

Run the following command:

pnpm dev

Then, browse to http://localhost:3000/api/og. You will see the following image:

Image generated from static text

Deploy your project to obtain a publicly accessible path to the OG image API endpoint. You can find an example deployment at https://og-examples.vercel.sh/api/static.

Then, based on the Open Graph Protocol, create the web content for your social media post as follows:

  • Create a <meta> tag inside the <head> of the webpage
  • Add the property attribute with value og:image to the <meta> tag
  • Add the content attribute with value as the absolute path of the /api/og endpoint to the <meta> tag

With the example deployment at https://og-examples.vercel.sh/api/static, use the following code:

index.js
<head>
  <title>Hello world</title>
  <meta
    property="og:image"
    content="https://og-examples.vercel.sh/api/static"
  />
</head>

Every time you create a new social media post, you need to update the API endpoint with the new content. However, if you identify which parts of your ImageResponse will change for each post, you can then pass those values as parameters of the endpoint so that you can use the same endpoint for all your posts.

In the examples below, we explore using parameters and including other types of content with ImageResponse.

Examples

Passing content as URL parameters to use in the image generation

Dynamic title

Passing the image title as a URL parameter.

Dynamic external image

Passing the username as a URL parameter to pull an external profile image

Dynamic external image

Passing the username as a URL parameter to pull an external profile image

Using different content types other than text and images for the image generation

Emoji

Using emojis to generate the image.

SVG

Using SVG embedded content to generate the image.

Dynamic external image

Passing the username as a URL parameter to pull an external profile image

Using custom CSS styling for the image generation

Custom font

Using a custom font available in the file system to style your image titl

SVG

Using a custom font available in the file system to style your image titl

Tailwind CSS (Experimental)

Using Tailwind CSS (Experimental) to style your image content.

Internationalization & Security

Internationalization

Using other languages in the text for generating your image.

Secure URL

Encrypting parameters so that only certain values can be passed to genera

Technical details

  • Recommended OG image size: 1200x630 pixels
  • @vercel/og uses Satori and Resvg to convert HTML and CSS into PNG
  • @vercel/og API reference

Limits

  • Only the Edge Runtime is supported. The default Node.js runtime will not work. To use Node.js or any other runtime, you can use Satori directly. However, you will get better performance with @vercel/og and the Edge Runtime
  • Only ttf, otf, and woff font formats are supported. To maximize the font parsing speed, ttf or otf are preferred over woff
  • Only flexbox (display: flex) and a subset of CSS properties are supported. Advanced layouts (display: grid) will not work. See Satori's documentation for more details on supported CSS properties
  • Maximum bundle size of 500KB. The bundle size includes your JSX, CSS, fonts, images, and any other assets. If you exceed the limit, consider reducing the size of any assets or fetching at runtime