✨ Implement dynamic Open Graph images to SSW Rules

[tiagov8]

Cc: @adamcogan @Hona @wicksipedia @bradystroud @bettybondoc @duanxinhuan @SamBWagner @jaydenalchin

Based on the email thread: Re: Rules - Social embed image for GitHub links - OG #3

Hi team,

Pain

@adamcogan saw a cool example of an specific Open Graph for a page... and wants something similar for SSW Rules, instead of the generic Open Graph we have for any rule shared...

❌ Figure: Bad example - the current open graph image is generic - it is not about that specific rule

✅ Figure: Good example - Specific Thumbnail for https://github.com/ApacheTech/BlazOrchard

Suggested Solution

From @Hona :

You could use a serverless function to generate an image with code (combine image/text into a nice thumbnail).

You could also make this a build step and do it all upfront ($) instead of on demand ($$$).

If it adds to the quality of sharing the Rules links, then I think a little bit of dev time (a week?) to add this, could be nice.

Example blog showing how to do serverless open graph images Three ways to use Puppeteer and Node.js to screenshot web pages and generate dynamic Open Graph images for social sharing - DEV Community

Example repo showing build time open graph image generation (Recommended) CyberKoalaStudios/og-image-generator: Integration to generate static Open Graph images, at build time (github.com)

Here is another link @tiagov8 found: https://github.blog/2021-06-22-framework-building-open-graph-images/

Tasks

• [ ] 1. Get approval from Product Owner
• [ ] 2. Implement dynamic Open Graphs
  • It should include the image of the first author
  • It should include some specific text from that rule (probably a good idea to base it on the SEO description)

Thanks!

[bradystroud]

We should use https://vercel.com/docs/functions/og-image-generation or something similar for this. I dont think its worth building our own solution