opengraph-image と twitter-image

opengraph-imageとtwitter-imageファイル規約では、ルート Segment に Open Graph と Twitter の画像を設定できます。

ソーシャルネットワークやメッセージングアプリで、ユーザーがあなたのサイトへのリンクを共有したときに表示される画像を設定するのに便利です。

オープングラフとツイッターの画像を設定するには、2 つの方法があります：

画像ファイル（.jpg、.png、.gif）
アイコンを生成するコードを使用する（.js、.ts、.tsx）

画像ファイル（.jpg、.png、.gif）

opengraph-imageまたはtwitter-image画像ファイルを Segment 内に配置することで、ルート Segment の共有画像を設定するために画像ファイルを使用します。

Next.js はそのファイルを評価し、アプリの<head>要素に適切なタグを自動的に追加します。

ファイル規約	サポートするファイル形式
`opengraph-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`twitter-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`opengraph-image.alt`	`.txt`
`twitter-image.alt`	`.txt`

`opengraph-image`

opengraph-image.(jpg|jpeg|png|gif)という名前の画像ファイルをルート Segment に配置します。

<head>の出力
<meta property="og:image" content="<generated>" />
<meta property="og:image:type" content="<generated>" />
<meta property="og:image:width" content="<generated>" />
<meta property="og:image:height" content="<generated>" />

`twitter-image`

twitter-image.(jpg|jpeg|png|gif)という名前の画像ファイルをルート Segment に配置します。

<head>の出力
<meta name="twitter:image" content="<generated>" />
<meta name="twitter:image:type" content="<generated>" />
<meta name="twitter:image:width" content="<generated>" />
<meta name="twitter:image:height" content="<generated>" />

`opengraph-image.alt.txt`

opengraph-image.alt.txtファイルをopengraph-image.(jpg|jpeg|png|gif)イメージと同じルート Segment に配置し、alt テキストとして使用します。

opengraph-image.alt.txt

About Acme

<head>の出力
<meta property="og:image:alt" content="About Acme" />

`twitter-image.alt.txt`

twitter-image.alt.txtファイルをtwitter-image.(jpg|jpeg|png|gif)イメージと同じルート Segment に配置し、alt テキストとして使用します。

twitter-image.alt.txt

About Acme

<head>の出力
<meta property="twitter:image:alt" content="About Acme" />

アイコンを生成するコードを使用する（.js、.ts、.tsx）

リテラルの画像ファイルを使うだけでなく、コードを使ってプログラムで画像を生成できます。

デフォルト関数をエクスポートするopengraph-imageまたはtwitter-imageルートを作成して、ルート segment の共有画像を生成します。

ファイル規約	サポートするファイル形式
`opengraph-image`	`.js`, `.ts`, `.tsx`
`twitter-image`	`.js`, `.ts`, `.tsx`

Good to know

デフォルトでは、生成されたアイコンは、動的関数またはキャッシュされていないデータを使用しない限り、静的に最適化されます（ビルド時に生成され、キャッシュされます）

generateImageMetadataを使用して、同じファイルに複数のアイコンを生成できます

画像を生成するもっとも簡単な方法は、next/serverのImageResponse APIを使用することです。

app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server'

// ルートSegmentの設定
export const runtime = 'edge'

// 画像のmetadata
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

// 画像生成
export default async function Image() {
  // フォント
  const interSemiBold = fetch(
    new URL('./Inter-SemiBold.ttf', import.meta.url)
  ).then((res) => res.arrayBuffer())

  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        About Acme
      </div>
    ),
    // ImageResponse options
    {
      // 便宜上、エクスポートされたopengraph-imageを再利用することができます
      // size設定を再利用して、ImageResponseの幅と高さを設定することができます。
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: await interSemiBold,
          style: 'normal',
          weight: 400,
        },
      ],
    }
  )
}

<head>の出力
<meta property="og:image" content="<generated>" />
<meta property="og:image:alt" content="About Acme" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Props

デフォルトのエクスポート関数は以下の引数を受け取ります：

`params`（任意）

opengraph-imageまたはtwitter-imageがコロケートされているルート Segment から Segment の動的なルートパラメータオブジェクトを含むオブジェクトです。

app/shop/[slug]/opengraph-image.tsx
export default function Image({ params }: { params: { slug: string } }) {
  // ...
}

ルート	URL	`params`
`app/shop/opengraph-image.js`	`/shop`	`undefined`
`app/shop/[slug]/opengraph-image.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/opengraph-image.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/shop/[...slug]/opengraph-image.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

Returns

Good to know: ImageResponseは戻り値の型を満たします。

設定のエクスポート

opengraph-imageまたはtwitter-imageルートからalt、sizeとcontentType変数をエクスポートすることで、オプションでアイコンのメタデータを設定できます。

オプション	型
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string` - image MIME type

`alt`

opengraph-image.tsx / twitter-image.tsx
export const alt = 'My images alt text'

export default function Image() {}

<head>の出力
<meta property="og:image:alt" content="My images alt text" />

`size`

opengraph-image.tsx / twitter-image.tsx
export const size = { width: 1200, height: 630 }

export default function Image() {}

<head>の出力
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

`contentType`

opengraph-image.tsx / twitter-image.tsx
export const contentType = 'image/png'

export default function Image() {}

<head>の出力
<meta property="og:image:type" content="image/png" />

Route Segment の設定

opengraph-imageとtwitter-imageは、ページやレイアウトと同じルート Segment の設定オプションを使用できる、特殊なルートハンドラです。

オプション	型	デフォルト値
`dynamic`	`'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`	`'auto'`
`revalidate`	`false \| 'force-cache' \| 0 \| number`	`false`
`runtime`	`'nodejs' \| 'edge'`	`'nodejs'`
`preferredRegion`	`'auto' \| 'global' \| 'home' \| string \| string[]`	`'auto'`

app/opengraph-image.tsx
export const runtime = 'edge'

export default function Image() {}

例

外部データの使用

この例では、paramsオブジェクトと外部データを使って画像を生成します。

Good to know: デフォルトでは、生成された画像は静的に最適化されます。個々のfetchオプションやルートセグメントオプションを設定することで、この挙動を変更できます。

app/posts/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/server'

export const runtime = 'edge'

export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}
export const contentType = 'image/png'

export default async function Image({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
    res.json()
  )

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 48,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {post.title}
      </div>
    ),
    {
      ...size,
    }
  )
}

バージョン履歴

Version	Changes
`v13.3.0`	`opengraph-image` `twitter-image` 導入

画像ファイル（.jpg、.png、.gif）​

opengraph-image​

twitter-image​

opengraph-image.alt.txt​

twitter-image.alt.txt​

アイコンを生成するコードを使用する（.js、.ts、.tsx）​

Props​

params（任意）​

Returns​

設定のエクスポート​

alt​

size​

contentType​

Route Segment の設定​

例​

外部データの使用​

バージョン履歴​