Astro
Generate Open Graph images for static Astro pages at build time with astro-takumi.
astro-takumi renders an Open Graph image for every page of an Astro site. During the build, it reads each emitted page and renders a React component or a built-in preset with Takumi. It writes each image next to its HTML file.
Add the integration
astro add adds the integration to your config. Also install React and a font. React describes the layout and never ships to the client. System fonts are unavailable, so declare every font yourself.
npx astro add astro-takuminpm i -D react @fontsource/robotoConfigure the integration
Pass the fonts and a render function. The presets cover common layouts. Set site so the integration 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 current page's image. The build fails if og:title, og:type, or og:image is missing, or if og:image does not match that URL.
---
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