og images in svelte component deployed to netlify
tjheffner
2023-03-12
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.