Open MaggieAppleton opened 3 years ago
Sure that one could work. All the methods I'd looked at used serverless functions / puppeteer, but unsure how they exactly work. Skimmed through a few tutorials on it, but most were over my head.
I built a basic <OgImage />
React component on a new branch ma/og-image
https://github.com/MaggieAppleton/maggieappleton.com/blob/ma/og-images/src/components/OgImage.js
And then created a page that renders that component: https://github.com/MaggieAppleton/maggieappleton.com/blob/ma/og-images/src/pages/ogimage.js
I stubbed out the data for now, but each image takes three variables; title, growthStage, and lastEdit.
These are all available in the metadata of all the posts in /content
- notes, essays, and books. All other types of pages can show the default image
Preview of the image component at the moment:
Also made a default ogImage for pages that aren't garden notes:
Somehow need to setup a function that automatically generates these with the post metadata, takes a screenshot, saves the image somewhere (I use Cloudinary for images and could host them there?), and then inserts the URL into the of meta tags
I have React helmet configured but it doesn't currently include images
This ended up being surprisingly convoluted in Gatsby. In the end we arrived at 3 options ordered by complexity (all low difficulty and free):
https://www.ryanfiller.com/blog/automatic-social-share-images/?ref=sidebar