【React】Next.jsでappディレクトリに配置した画像をogpに設定したい

概要

Next.jsではNextjs App Routerでmetadataを設定してSEO対策をする方法の記事に紹介されている通り、metadataの機能を使うことでOGPの設定ができます。OGPで使う画像について、どこかにアップロードしたものを使っても全然よいのですが、appディレクトリなどに配置したものを使えないのかなと思い、少し調べてみました。

前提

• 使用したNext.jsのバージョンは15.1.3です。
• ルーティングはApp Routerを使用します。

対応

Next.js 13 og image not working when I put it in app directoryのstackoverflowの回答にある通り、どのバージョンからは分からないですが（Next.js14から？）、相対パスでimageを読み込めるそうです。
私が使用した15.1.3ではこの実装で動作しました。

実装サンプル

layout.tsx

import type { Metadata } from "next";
import ogImage from "./ogp-image.png";

export const metadata: Metadata = {
  title: "Web用",
  description: "Web用OGP",
  openGraph: {
    title: "Web用",
    description: "Web用OGP",
    siteName: "サンプルサイト",
    images: [ogImage.src],
  },
  twitter: {
    card: "summary",
    title: "X用",
    description: "サンプルサイト",
    images: [ogImage.src],
  },
};

その他参考

• Twitterカードについて