/og-image

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

Primary LanguageTypeScriptMIT LicenseMIT

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.

<head>
  <title>Hello Checkly World</title>
  <meta
    property="og:image"
    content="https://og-image.checklyhq.com/docs.png?titleText=Scraping%2520%2526%2520asserting%2520on%2520a%2520page&breadcrumbsText=Checkly%2520Docs%2520%252F%2520Headless%2520Automation%2520%252F%2520Basics%2520Debugging&template=docs&fontSize=50px"
  />
</head>

There is a web playground available with which one can experiment with all available fields located at og-image.checklyhq.com. 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 https://github.com/checkly/og-image.git
$ 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