feat(SEO): Added dynamic OG image generation.

[Blankeos]

Hi! Saw your project on Reddit. This is a really awesome resource to be honest. I was playing around with @vercel/og and satori recently and thought you might want some auto-generated dynamic OG images for your website.

Summary

• Added dynamic OG image generation.
• Works on Twitter and Facebook.
• Made sample deployments here to test: https://sveltebyexample-com-git-feat-og-image-generation-blankeos.vercel.app/
• ⚠️ Breaking Change:
  • Had to change adapter-static to adapter-auto (Vercel), since the og image is actually fetched from an API.
  • I also put a public static environment variable for local and dev PUBLIC_BASE_URL=https://sveltebyexample.com so make sure to set this on Vercel as well.

Facebook

Twitter

---

• An alternative to not changing to adapter-auto: If it's possible to hook into Svelte's build process, maybe try generating the images with satori at build-time and saving it in public. I have not tried this but seems very promising. Then for the pages, just use the static endpoints (given that they have a common pattern).
• Another is running a separate API for serving the autogenerated og image (Another vercel project, etc)
• To keep the static content on the posts, maybe a page.js with 'prerender = true'

[sebastiandedeyne]

Hmm not sure what to do with this yet. Not planning to host anything on Vercel, going to give some though on how to build this.

I like Satori though! Going to keep this open and come back to it later.

[Blankeos]

@sebastiandedeyne I see! How are you hosting the site at the moment? This actually doesn't need to be hosted on Vercel.

The satori and @vercel/og packages can pretty much run on any server environment. It's just an API that serves images which is usually only visited by a crawler. I just thought of Vercel immediately since it's pretty easy to get a serverless function running on there for free.

I'll try and see if it's possible to generate the images at build-time.

[sebastiandedeyne]

It's hosted on a Digital Ocean droplet, so I can install/run anything. I prefer having this at build time.

It doesn't necessarily need to hook into SvelteKit's process. I think I even prefer if it's something separate, keeps it portable and if you want to set up the site locally to contribute you don't need to wait on image generation (which is generally slow compared to other build steps).