logoNext.js 日本語
ドキュメントブログ学習
はじめに/API リファレンス/ファイル規約/メタデータファイル/opengraph-image と twitter-image

opengraph-image と twitter-image

opengraph-image と twitter-image ファイル規約を使用すると、ルートセグメントの Open Graph 画像と Twitter 画像を設定できます。

これらの規約は、ユーザーがサイトへのリンクを共有した際に、ソーシャルネットワークやメッセージングアプリに表示される画像を設定するのに役立ちます。

Open Graph と Twitter 画像を設定する方法は2つあります:

画像ファイル (.jpg, .png, .gif)

ルートセグメントに opengraph-image または twitter-image 画像ファイルを配置することで、共有画像を設定できます。

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) 画像ファイルを追加します。

<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) 画像ファイルを追加します。

<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.(jpg|jpeg|png|gif) 画像と同じルートセグメントに、代替テキスト用の opengraph-image.alt.txt ファイルを追加します。

opengraph-image.alt.txt
About Acme
<head> 出力
<meta property="og:image:alt" content="About Acme" />

twitter-image.alt.txt

twitter-image.(jpg|jpeg|png|gif) 画像と同じルートセグメントに、代替テキスト用の twitter-image.alt.txt ファイルを追加します。

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

コードを使用して画像を生成 (.js, .ts, .tsx)

画像ファイルを使用するだけでなく、コードを使用して画像をプログラムで生成できます。

opengraph-image または twitter-image ルートを作成し、デフォルトで関数をエクスポートすることで、ルートセグメントの共有画像を生成します。

ファイル規約サポートされるファイルタイプ
opengraph-image.js, .ts, .tsx
twitter-image.js, .ts, .tsx

知っておくと良いこと

  • デフォルトでは、生成された画像は静的最適化されます（ビルド時に生成されキャッシュされます）。ただし、動的関数またはキャッシュされていないデータを使用する場合は除きます。
  • generateImageMetadata を使用して、同じファイル内で複数の画像を生成できます。

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

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() {
  // フォント
  const interSemiBold = fetch(
    new URL('./Inter-SemiBold.ttf', import.meta.url)
  ).then((res) => res.arrayBuffer())

  return new ImageResponse(
    (
      // ImageResponse JSX 要素
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        About Acme
      </div>
    ),
    // ImageResponse オプション
    {
      // 便利のために、エクスポートされた opengraph-image の
      // サイズ設定を再利用して ImageResponse の幅と高さも設定できます
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: await interSemiBold,
          style: 'normal',
          weight: 400,
        },
      ],
    }
  )
}
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() {
  // フォント
  const interSemiBold = fetch(
    new URL('./Inter-SemiBold.ttf', import.meta.url)
  ).then((res) => res.arrayBuffer())

  return new ImageResponse(
    (
      // ImageResponse JSX 要素
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        About Acme
      </div>
    ),
    // ImageResponse オプション
    {
      // 便利のために、エクスポートされた opengraph-image の
      // サイズ設定を再利用して 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

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

params (オプション)

opengraph-image または twitter-image が配置されているセグメントまでの動的ルートパラメータオブジェクトを含むオブジェクトです。

export default function Image({ params }: { params: { slug: string } }) {
  // ...
}
export default function Image({ params }) {
  // ...
}
ルートURLparams
app/shop/opengraph-image.js/shopundefined
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'] }

戻り値

デフォルトエクスポート関数は Blob | ArrayBuffer | TypedArray | DataView | ReadableStream | Response を返す必要があります。

知っておくと良いこと: ImageResponse はこの戻り値の型を満たします。

設定エクスポート

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

オプション型
altstring
size{ width: number; height: number }
contentTypestring - 画像 MIME タイプ

alt

export const alt = '画像の代替テキスト'

export default function Image() {}
export const alt = '画像の代替テキスト'

export default function Image() {}
<head> 出力
<meta property="og:image:alt" content="画像の代替テキスト" />

size

export const size = { width: 1200, height: 630 }

export default function Image() {}
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

export const contentType = 'image/png'

export default function Image() {}
export const contentType = 'image/png'

export default function Image() {}
<head> 出力
<meta property="og:image:type" content="image/png" />

ルートセグメント設定

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

オプション型デフォルト
dynamic'auto' | 'force-dynamic' | 'error' | 'force-static''auto'
revalidatefalse | 'force-cache' | 0 | numberfalse
runtime'nodejs' | 'edge''nodejs'
preferredRegion'auto' | 'global' | 'home' | string | string[]'auto'
export const runtime = 'edge'

export default function Image() {}
export const runtime = 'edge'

export default function Image() {}

例

外部データを使用

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

知っておくと良いこと: デフォルトでは、この生成された画像は静的最適化されます。個々の fetch オプション またはルートセグメントのオプションを設定してこの動作を変更できます。

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,
    }
  )
}
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 }) {
  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,
    }
  )
}

バージョン履歴

バージョン変更内容
v13.3.0opengraph-image と twitter-image が導入されました。

manifest.json

manifest.json ファイルのAPIリファレンス

robots.txt

robots.txt ファイルの API リファレンス。