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 demoIMA demo
Under the hood, a Node microservice (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.
captionfield, for displaying the course name and/or date
View the final source:Notebook sourceIMA source
If you’re looking to create your own, similar service for your own website/blog, I recommend forking
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 Shortcuts, 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!