Next.jsでOG画像のURLがlocalhostになる問題をmetadataBaseの動的設定で解決する

概要

OG画像のURLがlocalhost:3000になってしまい、公開環境で画像が表示されない。
※忘備録です。

og:image　https://localhost:3000/opengraph-image.png?88v1c428287defea

使用している環境

• Next.js: 15.2.4
• React: 19.1.0

解決方法

metadataBaseに動的にURLを設定して解決。

// src/app/layout.tsx

export async function generateMetadata(): Promise<Metadata> {
  const headersList = await headers();
  const url = new URL(`https://${headersList.get("host")}`);

  return {
    title: APP_NAME,
    description: APP_DESCRIPTION,
    metadataBase: url,
  };
}

補足

metadataBaseに環境変数から取得する方式に最初はしていたのですが、環境変数が読み込まれない問題に直面しました。

• 試したこと
  • process.env.SITE_URLを用意し./src/app/layout.tsxから読み込み
  • process.env.NEXT_PUBLIC_SITE_URLを用意し./src/app/layout.tsxから読み込み

参考サイト

• metadataBaseを使うとNext.js OG画像のURLを変えられる件について
  
• Link is being set to localhost:3000/og.png in production