Next.js 16 App Router
Next.js アプリに OG イメージを実装して検証する
静的 metadata、ルート認識 generateMetadata、または生成された opengraph-image を選択し、パブリック絶対 URL を使用して、展開された結果を検査します。
ファイルベースかコードベース metadata を慎重に選択する
固定値の場合、およびルート データによってタイトル、説明、または画像が変更される場合は、静的な metadata オブジェクト エクスポートを使用します。どちらのエクスポートも Server Components に属します。
opengraph-image という名前のファイルは、ファイルベースの metadata を提供できます。ビジュアルがルート データに依存する場合、生成された opengraph-image.tsx は ImageResponse を返すことができます。静的 metadata と generateMetadata を同じルート セグメントからエクスポートしないでください。
静的 metadata 付き metadataBase
metadataBase は相対 metadata URL を解決します。https://starterpackai.com/og/home.png のような絶対指定の公開画像 URL も示すと、アプリ外から確認しやすくなります。
import type { Metadata } from 'next'
export const metadata: Metadata = {
metadataBase: new URL('https://starterpackai.com'),
title: 'A clear page title',
description: 'A concise share description',
openGraph: {
images: ['https://starterpackai.com/og/home.png'],
},
}Next.js 16 のルート認識 generateMetadata
Next.js 16 の App Router では params は Promise です。先に await params してからルート固有のデータを読み込み、generateMetadata を返します。
import type { Metadata } from 'next'
type Props = { params: Promise<{ slug: string }> }
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params
const post = await getPost(slug)
return {
title: post.title,
openGraph: { images: [post.ogImageUrl] },
}
}動的 opengraph-image と ImageResponse
サーバー側の opengraph-image.tsx で params を await し、明示したサイズで ImageResponse を返します。
import { ImageResponse } from 'next/og'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
return new ImageResponse(
<div style={{ display: 'flex', padding: 80 }}>{slug}</div>,
size
)
}導入検証チェックリスト
- metadata または generateMetadata がサーバー コンポーネント ルート セグメントで実行されていることを確認します。
- デプロイされた HTML を開き、最終的な og:title、og:description、および og:image の値を確認します。
- 別のセッションで絶対パブリック イメージ URL を開き、イメージ応答が成功することを確認します。
- 小さなリンクカード サイズでレンダリングされた 1200×630 構成を確認します。
- パブリック チェッカーを実行し、キャッシュが一致しない場合はプラットフォーム固有のデバッガーを使用します。
Next.js実装ガイド
Next.jsのOG画像に関する質問
静的・動的ページでのApp Routerの主な選択肢です。
metadataとgenerateMetadataのどちらを使いますか？
固定値はmetadata、ルートデータで内容が変わる場合はgenerateMetadataを使います。
opengraph-imageファイルも使えますか？
はい。App Routerはファイルベースのメタデータに対応し、metadata APIでは明示的・動的に制御できます。
画像URLを絶対URLにする理由は？
ソーシャルクローラーはブラウザ外から取得します。公開絶対URLなら迷わず直接アクセスできます。
公開ワークフローを完了する
画像とメタデータを一緒に公開
素材を作り、Next.js用コードをコピーしてデプロイ結果を検証します。