New feature in AstroPaper v1.4.0, introducing dynamic OG image generation for blog posts.
Table of contents
Open Table of contents
Intro
OG images (aka Social Images) play an important role in social media engagements. In case you don’t know what OG image means, it is an image displayed whenever we share our website URL on social media such as Facebook, Discord etc.
The default OG image of AstroPaper includes the site title, the site description and the site URL. However this might not be suitable or enough for blog posts. In a blog, the author might want to have each blog post’s own social image.
Default/Static OG image (the old way)
AstroPaper already provided a way to add an OG image for each blog post. The author can specify the OG image in the frontmatter ogImage. Even though this approach works, the user has to create an OG image for every single blog post. It can be a tedious task for the blog author.
Dynamic OG image
Generating a dynamic OG image for each post allows the author to avoid specifying an OG image for every single blog post. Instead, the dynamic OG image will be generated automatically using the blog post title and description.
Dynamic OG image of every post will be generated at build time. This has several benefits such as
- generating dynamic OG images at build time is fast, and doesn’t slow down the website
- blog authors don’t have to create OG images for every post manually
- the generated OG images are consistent across all blog posts
How does AstroPaper generate OG images?
AstroPaper uses Satori to generate OG images dynamically. Satori is a library that converts HTML and CSS to SVG. AstroPaper uses Satori under the hood along with @resvg/resvg-js to convert the SVG to PNG.
Configuring dynamic OG image generation
Dynamic OG image generation is enabled by default in AstroPaper. You can disable this feature by setting SITE.dynamicOgImage to false.
// src/config.ts
export const SITE = {
// ...
dynamicOgImage: true, // set to false to disable dynamic og image generation
};Setting fonts for OG image
The font in the OG image can be configured in src/utils/loadGoogleFont.ts. By default, AstroPaper uses Google Sans Code (not the same font used in the web pages).
Custom OG templates
AstroPaper uses two OG image templates: one for the main site page and another for individual blog posts. Both templates are located in the src/utils/og-templates/ directory.
Site OG template
The site OG template (src/utils/og-templates/site.js) is used for the main page OG image.
Blog post OG template
The blog post OG template (src/utils/og-templates/post.js) is used for individual blog post OG images.
Conclusion
With dynamic OG image generation, AstroPaper provides an easy way to create social images for each blog post automatically. This feature enhances the social sharing experience while reducing manual work for the blog author.