Custom social card image services

Open Graph images are the image you sometimes see when sharing a link on iMessage, Slack, Twitter, etc. Though they can be any normal image, I first saw the idea of dynamically generating Open Graph images from @levelsio/NomadList a few years ago.

Earlier this year, the indomitable ZEIT team built a web service for their own site’s social cards called og-image, which I forked for Hack Club’s Workshop Cards. Since then, they’ve rewritten the system to be simpler to run & deploy, so I used their latest version for my new projects.

I’ve now created custom cards for all pages on both Notebook & my IMA blog:

If you want to play with the systems, try them out here:

Notebook demo

IMA demo

Under the hood, a serverless Node.js function (hosted on ZEIT Now, of course) spins up a Puppeteer instance to render a webpage to an image file. The backend is written in TypeScript and the frontend uses .dom. If you want to read more, ZEIT has you covered.

My changes:

• I added a caption field, for displaying the course name and/or date
• I removed the default images (ZEIT logos)
• I edited the frontend, removing their image presets and custom width/height functionality and updating the style/typography
• I remade the final card template (primarily static HTML/CSS)

View the final source:

Notebook source

IMA source

If you’re looking to create your own, similar service for your own website/blog, I recommend forking notebook-cards. npm i, now dev, then jump into the api/_lib/template.ts file to edit the template with your own content/styling. When it’s done, just deploy via now & you’re ready to go!

You’ll then need to add the meta tags to links to your card service. This depends significantly on your site’s tech stack, but if you’re using React, I highly recommend making a component to wrap all the necessary tags. If you’re using Next.js, you’ll need their Head component, for Gatsby, react-helmet and its associated plugin.

(On Notebook, I use a completely-ridiculous method of storing post names in slugs, so the way I generate the metadata is confusing and not recommendable, but it works great for me.)

One nice touch is that the service supports a dark mode, which you can automatically use for special posts. On Notebook, that’s my non-dated pages like Tools, and on IMA, I made midterm & final projects use dark mode. If you never touch it, that works too.

Those are my systems, remixed from ZEIT’s & now open source for you to remix too. If you make your own version, let me know!