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.
|
|
|
|
🏗 Usage
There are a few query parameters that we accept in order to dynamically generate the og:images, and those are:
template-'site'|'learn'|'docs'|'blog'breadcrumbsText-string(docsandlearntemplate only)titleText-stringfontSize-string- default96pximage-stringURL to image (blogtemplate only)width-numberApplys to custom image, i.e.450(blogtemplate only)height-numberApplys to custom image, i.e.250(blogtemplate 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.
👷 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
- Steven (@styfle) - Vercel
- Evil Rabbit (@evilrabbit) - Vercel
- Maxi Gimenez (@maxigimenez) - Checkly
- Nico Domino (@ndom91) - Checkly