Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 50 commits ahead, 14 commits behind vercel:main.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Open Graph Image as a Service

Serverless service that generates dynamic Open Graph images that you can embed in your <meta> tags.

For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.

This fork has been significantly modified from vercel/og-image. The goal is to dynamically create the following og-image types for Checkly.

Blog Sample Site Sample
Docs Sample Learn Sample

πŸ— Usage

There are a few query parameters that we accept in order to dynamically generate the og:images, and those are:

  1. template - 'site' | 'learn' | 'docs' | 'blog'
  2. breadcrumbsText - string (docs and learn template only)
  3. titleText - string
  4. fontSize - string - default 96px
  5. image - string URL to image (blog template only)
  6. width - number Applys to custom image, i.e. 450 (blog template only)
  7. height - number Applys to custom image, i.e. 250 (blog template only)

The query parameter options must always be URI Encoded, i.e. spaces are %20, forward slashes are %2F, etc. If building a URL by hand, you can use the encodeURIComponent() function in the browser dev tools or the GCHQ's CyberChef tool.

  <title>Hello Checkly World</title>

There is a web playground available with which one can experiment with all available fields located at Clicking on the generated image will copy its URL to your clipboard.

Docs Example

πŸ‘· Contributing

To contribute, you'll want to first clone the repository and install its dependencies.

$ git clone
$ cd og-image && npm install

Next, you can start a normal development server with npm run dev:local, this will open the web playground at localhost:3005. If you visit an image URL directly (i.e. http://localhost:3005/docs.png?template=docs&title=Hello%20World), it will serve the png version of the image.

However, if you run the dev server via npm run dev:local:debug, it will start the development server with a flag to serve the raw HTML version of the images when requested directly (i.e. http://localhost:3005/docs.png?template=docs&title=Hello%20World). So instead of getting the png image, you will get the HTML and can more easily debug styling issues.

There exists a Figma page with all the templates easily modifiable. You can copy out the changes to any template as SVG and update the respective api/_images/_template-*.svg file.

πŸ‘₯ Authors


Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc



Code of conduct

Security policy





  • TypeScript 63.2%
  • CSS 22.1%
  • HTML 14.7%