Warning This repo is outdated and only works with Node.js 14. Please use @vercel/og for new projects.
Social share images are used to grab the attention of readers when sharing content on social media.
The Open Graph protocol is extra metadata about your site social media sites can use. One of the meta tags you can include is og:image which is a link to a 1200x630 pixels image that's going to be used as the preview image for your content.
<head>
<!-- ... -->
<meta property="og:image" content="og-image.png" />
<!-- ... -->
</head>If you have a blog creating a social share image for every post is tedious so I created this to automate it.
This is based on vercel/og-image.
- It uses an
apifolder that's going to be a serverless function on Vercel - Using Puppeteer and visiting the API endpoint at
http://localhost:3000/[any text including emojis].pngit uses the HTML template and takes a screenshot and caches it forever on Vercel's CDN (you can purge the cache by doing a redeploy) - The HTML template is inside
api/_lib/template.tsand it takes a text parameter that's parsed from the URL insideapi/_lib/parse.tswhile the screenshot logic is insideapi/_lib/screenshot.ts - Inside
vercel.jsonthere's a simple URL rewrite that treats the/path as/api
Because serverless functions are limited to 50 MB the Chromium binary has to be small enough to not exceed that limit that's why chrome-aws-lambda and puppeteer-core is used.
In development you have to uncomment process.env.AWS_LAMBDA_FUNCTION_NAME = true line so chrome-aws-lambda thinks it's in a serverless environment and uses the Chromium binary which is easier than the original example.
If you ever go over the 50 MB size limit because of the size of the Chromium binary you can use an older version of chrome-aws-lambda to reduce the size so be careful when updating packages.
The project uses 📦️ pnpm but you can use any package manager.
git clone https://github.com/mattcroat/social-share-images.gitpnpm i📜 You can use the Vercel development environment with vercel dev which requires you to connect GitHub to Vercel and links the project on Vercel
pnpx vercel dev