この記事は Next.js Advent Calendar 2025 および デジタル創作サークル UniProject Advent Calendar 2025 17 日目の記事です。
ことの発端
Next.js でサイトを作っていたある日...とある SNS で OGP が表示されないということが発生しました。
原因調査
まず調べてみたのは、OGP チェッカーが通るかどうかです。
- OGP チェッカー A ← 通る
- OGP チェッカー B ← 通らない
この時点で何かがおかしい...
また、ページによって通ったり通らなかったりするということも...
ということで、開発者ツールを使って確認することにしました。
なぜか body に出力される meta タグ
確認してみると、なぜか meta タグが body 直下に生成されています。
原因
判明した原因は、動的に metadata を生成していることでした。
過去に同じ状況に遭遇した人が Issue を立ててくださっていました。
確認してみると、
Hi, this happens when streaming metadata is at play.
と書いている方が...
Streaming Metadata とはなんなのか
ドキュメントに解説がありました。
動的に metadata をレンダリングする場合、Next.js が UI をブロッキングしないように、生成が完了した時点で HTML を挿入するという仕様のようです。
Twitterbot や Slackbot、Bingbot などは head タグ内に metadata があることを想定しているので UserAgent を確認して自動的に無効化してくれるらしいです。
残念ながら、今回利用した SNS はマイナーすぎてリストに入っていなかったようです...(かといって、プルリクするほどではない...)
解決策
Bot をリストに追加すればいいらしい。
デフォルトに追記したものを記述しました。
最後に
今回は Next.js の generateMetadata 関数の不思議な挙動とそれが引き起こす問題、そしてそれの対処法について記述しました。
誰か困っている人の助けになればと思います。