How to Implement Opengraph Images

These are the resources I used to implement web.opengraph Images on this website. The most useful resource I used was an egghead collection by people.chris-biscardi:

Essentially this course/these resources allow you to create Netlify serverless functions that will dynamically generate opengraph images using a template. Here’s the template I built for the course in CodeSandbox:

This then is sent to cloudinary and cached there so that it doesn’t have to be regenerated every time the image is requested.

The end product means that I don’t need to do extra work to find images I like for every note or post that I do.

You can browse the code that generates my Opengraph Images on Github

Related Notes


Content is copyrighted 2019-2023 © D.S. Chapman. This site was built using GatsbyJS. Code for this website is open source and available on Github