og images in svelte component deployed to netlify

2025 update: Svelte 5 server functions have improved a bit, so there were some small updates needed to render OG images again. the way fonts load and the way html is rendered on the server is a bit simpler now. the updated code can be found here.

Recently added dynamic og:images to this website thanks to the very straightforward blog post from Geoff Rich. I won’t rehash everything here, I recommend you read that, it is a pretty nifty approach and works swimmingly!

Things to keep in mind:

• satori does not support all the background-image options, so a lot of fancy gradient magic is out of the question
• If deploying to netlify (like I am for this site), update your netlify.toml to include the resvg library as an external node module. Otherwise the build will fail when deployed, even if it works locally.

[functions] 
  external_node_modules = [..., "@resvg/resvg-js"]

• pulling images and fonts may require some extra handling for vite, satori, or svelte, depending on how your project is configured.
• you may need to sanitize or encode titles if you have special symbols in them (& doesn’t play nicely ootb, for instance)

All in all though, pretty simple to add and makes such a huge difference as a touchpoint into your website. Definitely worth the time to set up.