How to generate OpenGraph images with Astro and Satori
12 hours ago
- OpenGraph (OG) images are link previews on social media that boost engagement by 2.3x more clicks than plain links.
- This tutorial shows how to automatically generate OG images for Astro sites using Satori, a library to create images from React/Preact components.
- Steps: install dependencies (Satori, Preact, sharp, optionally tw-to-css), create an OpenGraphImage component, set up an API endpoint (e.g., /blog/[id]/og.png) that generates SVG with Satori and converts to PNG with sharp.
- Use the image in your layout by adding a meta tag with the absolute URL to the endpoint and setting twitter:card to summary_large_image.
- Image size recommended is 1200x630px; specify fonts with fixed weights to avoid a Satori bug with variable fonts.