Implement Open Graph cards

[MaggieAppleton]

https://www.ryanfiller.com/blog/automatic-social-share-images/?ref=sidebar

[MaggieAppleton]

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

[texastoland]

This ended up being surprisingly convoluted in Gatsby. In the end we arrived at 3 options ordered by complexity (all low difficulty and free):

1. Jason wrote a superb post and accompanying Gatsby plugin to serve images from Cloudinary.
   • Pros:
     • Very little code
     • Works out of the box if you switch blogging engines
     • You already use it
   • Cons:
     • OG image logic is split between your blog and Cloudinary
     • Figuring out your image options isn't as straightforward as CSS
2. Vercel offers an open-graph-image-as-a-service you can fork. Unlike Cloudinary you have complete programmatic control of your template. It implements the popular solution of using Puppeteer to prerender a web template. Each image is cached after its first request.
   • Pros:
     • Minimal additional code
     • Works out of the box if you switch blogging engines
     • You own the code
   • Cons:
     • OG image logic is in a separate repo and hosted on a potentially separate service
     • Needs an extra few lines of code to filter requests (by root domain, domain list, token, or something)
3. Emma wrote a superb post and accompanying Gatsby plugin to generate images at build time. These components are a dime a dozen but hers was the only customizable and documented 1 I found. It implements the popular solution of using Puppeteer to prerender a web template. All images are saved to a static folder during the dev build.
   • Pros:
     • It's all in Gatsby
     • As configurable as React components and GraphQL
   • Cons:
     • It's all in Gatsby (if you switch later)
     • Generated in dev mode and you commit the generated asset (extra step)
     • Not as maintained as Cloudinary or Vercel official solutions