og images in svelte component deployed to netlify
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:
satoridoes 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.tomlto include the resvg library as an external node module. Otherwise the build will fail when deployed, even if it works locally.
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.