OG Images

SetupCopy Anchor Link

takumiPlugin() generates an image for each docs page with Takumi, showing its title, description and the site title.

npm i takumi-js

import { defineConfig } from '@fumadocs/astro/config';
import { takumiPlugin } from '@fumadocs/astro/plugins/takumi'; 
import { source } from './lib/source';

export default defineConfig({
  source,
  title: 'My Docs',
  plugins: [takumiPlugin()], 
});

Or with Fumadocs CLI:

npx @fumadocs/cli feature og --engine takumi

Images are generated at build time, under /og/docs/<page>/image.webp. Change it with the prefix option, like takumiPlugin({ prefix: '/images/og' }).

Site URLCopy Anchor Link

Docs pages link their image with og:image, set site so it is an absolute URL, as social previews require:

export default defineConfig({
  site: 'https://example.com', 
  // ...
});

The page module receives the URL as page.image.