🌐
Next.jsでVercel以外でOG画像を設定する際はmetadataBaseを設定する必要がある
個人開発でFlowというアウトプット数を増やすチャット型メモアプリを開発しています。
WebアプリはCloudflare Workers × Next.js(OpenNextjs)という構成です。
LPにOG画像をつける際に、ハマったことを共有します。
問題
Next.jsでは、app/opengraph-image.{.jpg, .jpeg, .png, .gif}のようにopen-graph-image.{拡張子}というファイル名で画像を置くことで簡単にOG画像を設定することができます。
Next.jsめちゃくちゃ便利だと思って、デプロイしてOG画像確認ツールで確認した所なぜか表示されません。
不思議に思い、メタデータタグを見てみるとURLがhttp://localhost:3000になっています。
解決策
どうやらNext.jsをVERCEL以外のホスティングサービスで利用する際はmetadataBaseをつけないと、デフォルト値としてhttp://localhost:{PORT}で埋められてしまうようです。
私の場合は、次のようにルートのlayout.tsxにmetadataBaseを設定することで無事OG画像が表示されました。
// app/layout.tsx
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000";
export const metadata = {
metadataBase: new URL(baseUrl),
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return children;
}
Next.jsはとても便利ですが、Vercel前提な所が多くあるので要注意です。
参考
すべては以下の記事に書いてありました。
2025-08-12現在、公式ドキュメントの注意書きは消えていそうなので要注意です。
metadataBaseについて
ファイルベースメタデータAPIについて
関連するDiscussion
Discussion