📷

Next.js 15.3.1 OGP画像が表示できない

に公開
Next.js
TypeScript
Vercel
tech

結論

src/app/ (src使っていない場合はapp/)直下に

  • opengraph-image.jpg（.jpg, .jpeg, .png, .gif）
  • twitter-image.jpg（.jpg, .jpeg, .png, .gif）

というファイル名でOGP用の画像ファイルを置く

状況

今まで（ver14~）はlayout.tsxにMetadataを設置していたが15.3.1にバージョンアップしたら表示されなくなっていた


// 省略
 openGraph: {
        type: "website",
        locale: "ja_JP",
        url: "https://example.com",
        title: "サイトタイトル",
        images: ["/ogp.jpg"]
    },

解決

公式ドキュメントに以下のように記載あり

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

感想

metaの仕様変更多すぎ、、😇

Discussion