Creating images to share to social media dynamically + og images for link sharing. Originally forked from vercel/og-image to be launched on Vercel. I rewrote to add more image templates and launch on AWS Lambda.
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.
See the image embedded in the tweet for a real use case.
Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup?
How did your social network know how to "unfurl" the URL and get an image?
The answer is in your <head>.
The Open Graph protocol says you can put a <meta> tag in the <head> of a webpage to define this image.
It looks like the following:
<head>
<title>Title</title>
<meta property="og:image" content="http://example.com/logo.jpg" />
</head>It takes forever to design an image for every single campaign page and social media share. And we don't want the exact same image for every user because that wouldn't make the image special to share. So... we automate it, nice!
You'll want to fork this repository and deploy your own image generator.
- Clone this repo with
git clone https://github.com/vercel/og-image - Change directory with
cd og-image - Run
yarnornpm installto install all dependencies - Run locally with
vercel devand visit localhost:3000 (if nothing happens, runnpm install -g vercel) - If necessary, edit the
exePathin options.ts to point to your local Chrome executable
Now you're ready to start local development!
You can set an environment variable to assist with debugging export OG_HTML_DEBUG=1. This will render the image as HTML so you can play around with your browser's dev tools before committing changes to the template.
- Jonathan Wong @wonathanjong