Have you every shared a link to a friend and wondered where the image preview
That’s the Open Graph Protocol, a set of HTML
extensions that can enrich a link, originally invented at Facebook.
This blog post describes how you can generate these images on build time in
the Astro web framework.
Most of the guides out there (including Vercel’s official OG Image Generation) use a function to generate the OG image dynamically. While there’s nothing wrong with that, I really wanted mine to be statically generated on build-time; it’s faster, cheaper and cooler.
Build your image
Set the size to 1200×630px as that’s what Facebook recommends in their guidelines. Use Flexbox liberally and enable debug mode when figuring out the layout. A Complete Guide to Flexbox is a great resource to have at hand.
Create an Astro endpoint
Got a nice image built in the playground? Then let’s get started. Install Satori to generate the SVG and sharp to then convert it to PNG:
Then create an endpoint, e.g.
pages/og-image.png.ts with the following code:
; ; ; ;
One drawback that you can already see in the code above is that Astro does not support TSX endpoints, so we’ll need to use React-elements-like objects.
You’ll also always need to provide a font because it’ll be embedded. I used Roboto in the example above, Inter or Open Sans are other solid free sans fonts (choose WOFF or TTF/OTF, WOFF2 is not supported).
astro dev and navigate to the endpoint (in our example :3000/og-image.png)
to see the generated image.
Generate for each item in a collection
Once you have an image that you like in a function, you can create them in
batch, for whole collections.
Let’s assume you have a
blog collection and your blog posts live at
pages/blog/:slug/og-image.png.ts with your API route and the
getStaticPaths function exported:
If you now run
astro build, you’ll see that it statically generates an OG image for every blog post you have on your site.
Images (like fonts) need to be embedded into the SVG. The easiest way I found is using data urls by first reading the file to a Base64 string like this:
And then setting it as the
src property in Satori:
Be aware that Satori does not support
backgroundSize: cover, so if you have
that use case, you’ll need to build it yourself with image-size and some math.
Set OG tags in HTML
Now the only thing left to do is link to your OG images in your
There are two properties you’ll want to use for images:
Use dynamic paths on collections to automatically use the correct image. Check out the Open Graph protocol for more Open Graph meta extensions.
Further links & conclusion
If you want to see real, working code (I know I often do), check out the endpoint
that powers the OG images of my book reviews:
This is what it looks like: OG image of a book review.