Vercel OG Image Generation

New library for generating dynamic social card images.

Vercel OG converts HTML and CSS into images.

The core engine, Satori, can be used in modern browsers, Node.js, and Web Workers. Building on top of the core engine, Vercel OG is able to be used inside Edge environments through WebAssembly to easily create social card images.

By leveraging the React component abstraction, social cards can be co-located with the rest of your frontend codebase. For example, inside a Next.js application:

// pages/api/og.jsx

import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'experimental-edge',
}

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    )
  )
}

Vercel OG automatically adds the correct Cache-Control headers to ensure the image is cached at the Edge after it’s been generated.

'content-type': 'image/png'
'cache-control': 'public, immutable, no-transform, max-age=31536000'
 Caching headers from a generated Vercel OG image.

reference