---
title: Open Graph
description: Open Graph with Next.js Metadata API
---

## Introduction

Next.js provides an useful set of utilities, allowing a flexible experience with Fumadocs.
Fumadocs uses the Next.js Metadata API for SEO.

Make sure to read their [Metadata section](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) for the fundamentals of Metadata API.

## Open Graph Image

For docs pages, Fumadocs has a built-in metadata image generator.

### Auto Setup

```bash
pnpm fumadocs init og-image
```

### Manual Setup

```json doc-gen:file
{
  "file": "../../examples/next-mdx/lib/metadata.ts",
  "codeblock": {
    "meta": "title=\"lib/metadata.ts\""
  }
}
```

You will need a route handler to get started.

```json doc-gen:file
{
  "file": "../../examples/next-mdx/app/docs-og/[...slug]/route.tsx",
  "codeblock": {
    "meta": "title=\"app/docs-og/[...slug]/route.tsx\""
  }
}
```

> We need to append `og.png` to the end of slugs so that we can access it via `/docs-og/my-page/og.png`.

In your docs page, add the image to metadata.

```json doc-gen:file
{
  "file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
  "codeblock": {
    "meta": "title=\"app/docs/[[...slug]]/page.tsx\""
  }
}
```

### Font

You can also customise the font, options for Satori are also available on the built-in generator.

```ts
import { generateOGImage } from 'fumadocs-ui/og';

generateOGImage({
  fonts: [
    {
      name: 'Roboto',
      // Use `fs` (Node.js only) or `fetch` to read the font as Buffer/ArrayBuffer and provide `data` here.
      data: robotoArrayBuffer,
      weight: 400,
      style: 'normal',
    },
  ],
});
```
