Astro
Generate Open Graph images for every page at build time.
astro-takumi renders an Open Graph image for every page of an Astro site. During the build it reads each emitted page, renders a React component (or a built-in preset) through Takumi, and writes the image next to the HTML.
Add the integration
astro add wires the integration into your config. You also install React and a font: React describes the layout and never ships to the client, and you declare every font yourself since system fonts are unavailable.
npx astro add astro-takuminpm i -D react @fontsource/robotoConfigure the integration
Give it the fonts to render with and a render function. The presets cover common layouts; set site so Takumi can build absolute image URLs.
astro:build:done, so it only covers statically rendered pages.import { defineConfig } from "astro/config";
import * as fs from "node:fs";
import { fileURLToPath } from "node:url";
import astroTakumi, { presets } from "astro-takumi";
export default defineConfig({
site: "https://example.com",
integrations: [
astroTakumi({
options: {
fonts: [fs.readFileSync(fileURLToPath(import.meta.resolve("@fontsource/roboto/files/roboto-latin-400-normal.woff")))],
},
render: presets.blackAndWhite,
}),
],
});Reference the image from your layout
getImagePath returns the URL of the image Takumi generates for the current page. The build fails if the og:image value does not match that path.
---
import { getImagePath } from "astro-takumi";
const { title } = Astro.props;
const { url, site } = Astro;
const openGraphImageUrl = getImagePath({ url, site });
---
<head>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta property="og:url" content={url.href} />
<meta property="og:image" content={openGraphImageUrl} />
</head>Last updated on