opengraph-image と twitter-image

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

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

Open Graph および Twitter 画像を設定する方法は2つあります。

画像ファイル (.jpg、.png、.gif) を使用する
コードを使用して画像を生成する (.js、.ts、.tsx)

画像ファイル (.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`

知っておくとよいこと:

twitter-image ファイルサイズは 5MB を超えてはならず、opengraph-image ファイルサイズは 8MB を超えてはなりません。画像ファイルのサイズがこれらの制限を超えると、ビルドは失敗します。

`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)画像のaltテキストとして、同じルートセグメントに付随する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)画像のaltテキストとして、同じルートセグメントに付随する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`

知っておくとよいこと:

デフォルトでは、生成された画像は、静的に最適化（ビルド時に生成およびキャッシュ）されます。ただし、動的APIまたはキャッシュされていないデータを使用している場合は除きます。

generateImageMetadataを使用して、同じファイル内に複数の画像を生成できます。

opengraph-image.jsとtwitter-image.jsは特別なルートハンドラーであり、動的APIまたは動的構成オプションを使用しない限り、デフォルトでキャッシュされます。

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

app/about/opengraph-image.tsx

import { ImageResponse } from 'next/og'
 
export const runtime = 'edge'
 
// Image metadata
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}
 
export const contentType = 'image/png'
 
// Image generation
export default async function Image() {
  // Font
  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
    {
      // For convenience, we can re-use the exported opengraph-image
      // size config to also set the ImageResponse's width and height.
      ...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" />

プロパティ

デフォルトのエクスポート関数は、次のプロパティを受け取ります

`params` (オプション)

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

app/shop/[slug]/opengraph-image.tsx

export default function Image({ params }: { params: { slug: string } }) {
  // ...
}

ルート	URL	`パラメーター`
`app/shop/opengraph-image.js`	`/shop`	`未定義`
`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'] }`

戻り値

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

構成のエクスポート

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

オプション	型
`alt`	`文字列`
`size`	`{ width: 数値; height: 数値 }`
`contentType`	`文字列` - 画像MIMEタイプ

`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" />

ルートセグメント構成

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

例

外部データの使用

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

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

app/posts/[slug]/opengraph-image.tsx

import { ImageResponse } from 'next/og'
 
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,
    }
  )
}

ローカルアセットを使用したEdgeランタイムの使用

この例では、Edgeランタイムを使用してファイルシステムのローカルイメージをフェッチし、それを<img>要素のsrc属性にArrayBufferとして渡します。ローカルアセットは、例のソースファイルの場所からの相対位置に配置する必要があります。

app/opengraph-image.tsx

import { ImageResponse } from 'next/og'
 
export const runtime = 'edge'
 
export default async function Image() {
  const logoSrc = await fetch(new URL('./logo.png', import.meta.url)).then(
    (res) => res.arrayBuffer()
  )
 
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img src={logoSrc} height="100" />
      </div>
    )
  )
}

ローカルアセットを使用したNode.jsランタイムの使用

この例では、Node.js ランタイムを使用してファイルシステム上のローカルイメージをフェッチし、それを ArrayBuffer として <img> 要素の src 属性に渡します。ローカルアセットは、例のソースファイルの場所ではなく、プロジェクトのルートからの相対パスで配置する必要があります。

app/opengraph-image.tsx

import { ImageResponse } from 'next/og'
import { join } from 'node:path'
import { readFile } from 'node:fs/promises'
 
export default async function Image() {
  const logoData = await readFile(join(process.cwd(), 'logo.png'))
  const logoSrc = Uint8Array.from(logoData).buffer
 
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img src={logoSrc} height="100" />
      </div>
    )
  )
}

バージョン履歴

バージョン	変更点
`v13.3.0`	`opengraph-image` および `twitter-image` を導入。