メインコンテンツまでスキップ

opengraph-imageとtwitter-image

opengraph-imagetwitter-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

Good to know:

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

opengraph-image

ルートセグメントにopengraph-image.(jpg|jpeg|png|gif)画像ファイルを追加します。

<head> output
<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> output
<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> output
<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> output
<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

Good to know:

  • デフォルトでは、生成された画像は静的に最適化され(ビルド時に生成されキャッシュされる)、Dynamic APIsやキャッシュされないデータを使用しない限り、その状態になります。
  • generateImageMetadataを使用して、同じファイル内で複数の画像を生成することができます。
  • opengraph-image.jstwitter-image.jsは、Dynamic APIdynamic configオプションを使用しない限り、デフォルトでキャッシュされる特別なRoute Handlersです。

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

app/about/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() {
// フォント
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> output
<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が配置されているsegmentからrootセグメントに至るまでのdynamic route parametersオブジェクトを含むオブジェクトです。

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

Returns

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

Good to know: ImageResponseはこの戻り値の型に適合します。

Config exports

必要に応じて、opengraph-imagetwitter-imageルートからaltsizecontentType変数をエクスポートして画像のメタデータを設定できます。

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

alt

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

export default function Image() {}
<head> output
<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> output
<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> output
<meta property="og:image:type" content="image/png" />

Route Segment Config

opengraph-imagetwitter-imageは、PagesやLayoutsと同じroute segment configurationオプションを使用できる特別なRoute Handlersです。

外部データを使用する

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

Good to know: デフォルトでは、この生成された画像は静的に最適化されます。この動作を変更するには、個別のfetchoptionsやルートセグメントの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ランタイムを使用してファイルシステム上のローカル画像をフェッチし、それを<img>要素のsrc属性にArrayBufferとして渡します。ローカルアセットは、プロジェクトのルートを基準にして配置する必要があります。この例のソースファイルの場所に関係なく配置してください。

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.0opengraph-imagetwitter-imageが導入されました。