Next.js でOGP画像設定でハマった話 - Vercel + Custom Domain
こんにちは。リテールアプリ共創部で事業企画を担当しているかめだです。
今回は、サービスのLPサイトをNext.jsで構築中に、「OGP画像が出ない」という現象と格闘しました。その解決プロセスを共有します。
問題
Next.jsで作成したLPをVercelにデプロイし、カスタムドメインを当てて運用を開始しました。
しかし、いざSNSでシェアしてみると、OGP画像が正しく表示されないという事象が発生しました。
Vercelのデフォルトドメイン（xxx.vercel.app）では表示されるのに、本番のカスタムドメインでは表示されないなど、挙動が一貫しないことも混乱の種でした。
原因
ドメインの不一致
layout.tsx の metadataBase 設定が曖昧で、Vercelのデフォルト動作とカスタムドメインの間でパス解決の不整合が起きていた。
解決策
画像の静的配置
Next.jsの opengraph-image 自動生成機能（File-based Metadata）の使用をやめ、最適化した画像を public/images/ に配置して静的配信に変更。
絶対パスの統一
metadataBase と画像URLを本番環境のカスタムドメイン（https://...）に完全固定。
AIに相談しながら原因を調査
自分では原因がわからなかったので、AIに相談しながら調査を進めました。
私: 「OGP画像が出ないんだけど、何が原因？」
AI: 「Next.jsの自動生成機能を使っていますか？それだとパスの生成がうまくいかないことがあります。publicフォルダに画像を置いて、直接パスを指定する方が確実ですよ」
→ 言われた通り、画像の置き場所を変更。でもまだ直らない…
私: 「まだ出ない。Vercelのドメインでは出るのに、本番ドメインだと出ない」
AI: 「それは設定ファイルに書いてあるURLが、本番ドメインを向いていないのが原因ですね。metadataBaseという設定を本番ドメインに固定してみてください」
→ おおお、設定ファイル内のURLが問題だったのか！
対策：コードの修正 (app/layout.tsx)
本番ドメインを直接つなげるようにしました。
import type { Metadata } from "next"
export const metadata: Metadata = {
// 本番ドメインを明示的に指定（相対パス解決の基準となる）
metadataBase: new URL("https://lp.XXXXXXXX.net"),
// ... (title, description等) ...
openGraph: {
// ...
type: "website",
images: [
{
// 絶対パスで指定
url: "https://lp.XXXXXXXX.net/images/ogp.jpg",
width: 1200, // 推奨サイズを明記
height: 630,
alt: "YYYYYYYYYYY",
},
],
},
twitter: {
card: "summary_large_image", // 大きい画像での表示を指定
// ...
images: ["https://lp.XXXXXXXX.net/images/ogp.jpg"],
},
}
確認方法
htmlのソースを表示をして「og:image」があることを確認するが先決ですが、下記のサイトであればog:imageを確認することができるので便利でした。
まとめ
LPサイトのOGP画像を表示させるために、AIに頼りながら施策を重ねて無事表示することができました。
非エンジニアでも、コードを書いてアウトプットをすることができるし、何か不具合があってもAIと一緒に解決することができました。
ちなみに、修正に当たっては、
- まず、VercelにおけるOGP画像の表示方法の調査
- そのうえで、コードの修正方針の策定
- 実装
というように、修正方法を具体的に指示したことで、うまくいったのかなと思ってます！
おつかめ！
