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 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.
- I added a
captionfield, 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 of course remade the final card template (primarily static HTML/CSS)
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!