# Fumadocs (Framework Mode, Next.js): OG画像の生成
URL: /ja/docs/next/integrations/og
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/og/index.ja.mdx

ドキュメントページ用の動的なプレビュー画像を生成します

[Open Graph](https://ogp.me) の画像メタデータを設定できます。これにより、Webサイトやソーシャルメディア上でのドキュメントページのプレビュー画像を指定できます。表示例は次のとおりです。

<div className="mx-auto w-full max-w-[400px]">
  ![preview](</_next/static/immutable/media/preview.43btz6h27tdhj.png>)
</div>

画像は [Takumi](/docs/next/integrations/og/takumi)、または [`next/og`](/docs/next/integrations/og/next) で生成できます。

- [next/og](/ja/docs/next/integrations/og/next): Next.js の Metadata API と組み合わせて使用する方法。
- [Takumi](/ja/docs/next/integrations/og/takumi): Takumi を統合して、フレームワークに依存しない高速なメタデータ画像生成を実現します。