︙

opengraph-image and twitter-image

opengraph-imageおよびtwitter-imageファイル規約により、route セグメントに対して Open Graph と Twitter の画像を設定することができます。

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

Open Graph と Twitter の画像を設定するには 2 つの方法があります：

image ファイルの使用 (.jpg, .png, .gif)
images 生成に code を用いる(.js,.ts,.tsx)

Image files (.jpg, .png, .gif)

opengraph-imageやtwitter-imageの image ファイルをセグメントの中に配置して、route セグメントの共有 image を設定するために、image ファイルを使用します。

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

File convention	Supported file types
`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) image ファイルを任意の route セクションに追加してください。

<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)image ファイルを任意の route セグメントに追加してください。

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

同じ route セグメントにopengraph-image.alt.txt ファイルを追加し、その opengraph-image.(jpg|jpeg|png|gif) image の alt テキストになります。

opengraph-image.alt.txt

About Acme

<head>

<meta property="og:image:alt" content="About Acme" />

`twitter-image.alt.txt`

同じ route セグメントに、twitter-image.alt.txt ファイルを追加してください。それは twitter-image.(jpg|jpeg|png|gif) image の alt テキストです。

twitter-image.alt.txt

About Acme

<head>

<meta property="twitter:image:alt" content="About Acme" />

Generate images using code (.js, .ts, .tsx)

literal image files を使用することに加えて、code を使用して画像をプログラムで生成することもできます。

opengraph-image または twitter-image の route を作成することにより、route セグメントの共有された image を生成し、それを default で export する関数にします。

File convention	Supported file types
`opengraph-image`	`.js`, `.ts`, `.tsx`
`twitter-image`	`.js`, `.ts`, `.tsx`

Good to know

default という設定では、生成された画像は、静静的に最適化されます(build 時に生成され、キャッシュされます)。ただし、dynamic な関数を使用するか、キャッシュされていないデータを使用する場合は除きます。

あなたはgenerateImageMetadata を使用して、同じファイル内に複数の画像を生成することができます。

next/ogからの ImageResponse API を使用することが、 image を生成する最も簡単な方法です。

app/about/opengraph-image.tsx

import { ImageResponse } from 'next/og'

// Route segment config
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,
        },
      ],
    }
  )
}

app/about/opengraph-image.js

import { ImageResponse } from 'next/og'

// Route segment config
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" />

Props

default のエクスポート関数は次のプロップを受け取ります:

`params` (optional)

opengraph-imageまたはtwitter-imageセグメントまでの root セグメントからの dynamic route パラメータ object を含む object が同位置に配置されています。

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

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

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

export default function Image({ params }) {
  // ...
}

Route	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 はこの返り値のタイプを満たします。

Config exports

画像の metadata を設定する選択はあります。それには、opengraph-imageまたはtwitter-imageの route からalt、size、およびcontentType変数を export します。

Option	Type
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string` - image MIME type

`alt`

opengraph-image.tsx

export const alt = 'My images alt text'

export default function Image() {}

opengraph-image.js

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

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

export default function Image() {}

opengraph-image.js

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

export const contentType = 'image/png'

export default function Image() {}

opengraph-image.js

export const contentType = 'image/png'

export default function Image() {}

<head>

<meta property="og:image:type" content="image/png" />

Route Segment Config

opengraph-imageとtwitter-imageは、Pages と Layouts と同じ Route segment configuration options を使用できる特別な route Handlers です。

Option	Type	Default
`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() {}

app/opengraph-image.js

export const runtime = 'edge'

export default function Image() {}

Examples

外部データの使用

この例では、params object と外部データを使用して、image を生成します。

Good to know: default では、この生成された image は静的に最適化されます。この動作を変更するには、個々のfetch options または route セグメント options を設定できます。

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

import { ImageResponse } from 'next/og'

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

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

import { ImageResponse } from 'next/og'

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

Version History

Version	Changes
`v13.3.0`	`opengraph-image`と`twitter-image`が導入されました。