# Fumadocs (Framework Mode, Astro): Takumi
URL: /ja/docs/astro/integrations/og/takumi
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/og/takumi.ja.mdx

Takumi を統合して、フレームワークに依存しない高速なメタデータ画像生成を実現します。

## インストール [#installation]

```npm
npm install takumi-js
```

## メタデータ画像 [#metadata-image]

ページの画像 URL を返す関数を追加し、ドキュメントページのメタデータからその画像を参照します。

```ts tab="src/lib/shared.ts"
import { createGetUrl } from 'fumadocs-core/source';

// [!code ++:7]
const getImageUrl = createGetUrl('/og/docs');

export function getPageImageUrl(page: { slugs: string[]; locale?: string }) {
  const segments = [...page.slugs, 'image.webp'];

  return { segments, url: getImageUrl(segments, page.locale) };
}
```

```astro tab="src/pages/docs/[...slug].astro"
---
import Layout from '@/layouts/Layout.astro';
// [!code ++]
import { getPageImageUrl } from '@/lib/shared';
---

<Layout
  title={page.data.title}
  description={page.data.description}
  image={getPageImageUrl(page).url}
>
  {/* ... */}
</Layout>
```

```astro tab="src/layouts/Layout.astro"
---
interface Props {
  title: string;
  description?: string;
  image?: string;
}

const { title, description, image } = Astro.props;
---

<html lang="en">
  <head>
    {/* [!code ++] */}
    {image && <meta property="og:image" content={image} />}
  </head>
  <body><slot /></body>
</html>
```

> `/docs/my-page` の画像は `/og/docs/my-page/image.webp` に配置されます。WebP 画像は PNG 画像よりもファイルサイズが小さいためです。PNG を生成したい場合は、代わりに `image.png` と `format: 'png'` を使用してください。

次に、画像を生成するルートを作成します。

```ts title="src/pages/og/docs/[...slug]/image.webp.ts"
import type { APIRoute, GetStaticPaths, InferGetStaticPropsType } from 'astro';
import { generateOGImage } from 'fumadocs-ui/og/takumi';
import { source } from '@/lib/source';
import { appName } from '@/lib/shared';

export const prerender = true;

export const getStaticPaths = (() => {
  return source.getPages().map((page) => ({
    params: { slug: decodeURI(page.slugs.join('/')) || undefined },
    props: { page },
  }));
}) satisfies GetStaticPaths;

export const GET: APIRoute<InferGetStaticPropsType<typeof getStaticPaths>> = ({
  props: { page },
}) => {
  return generateOGImage({
    title: page.data.title,
    description: page.data.description,
    site: appName,
    format: 'webp',
  });
};
```

> Takumi には全ウェイト (100-900) に対応した [`Geist`](https://vercel.com/font) フォントと `Geist Mono` フォントが同梱されているため、フォントの設定は不要です。

高度な使い方については、[Takumi のドキュメント](https://takumi.kane.tw/docs)を参照してください。

### その他のテンプレート [#other-templates]

利用できるテンプレートについては、[Takumi Templates](https://takumi.kane.tw/docs/templates) を参照してください。