Next.jsをVercelにデプロイしたとき、OGP画像が表示されない事件
何が起きた?
Vercel が OGP 画像の相対 URL を勝手に書き換えてしまい、管理者以外閲覧不可能なプライベートURLにしてくる。
つまり、外部から OGP 画像にアクセスできず、Twitter(X) などに反映されない。
バグだという報告が少しだけあるので、多分 Vercel の致命的なバグである可能性が高い。
どうやったら起きる?
以下どちらかで OGP 画像を設定
Next.js の仕様に準拠して、例えば opengraph-image.png を App 直下に設置
layout.tsx に画像を import し、その相対 URL (image.src) を Metadata API を準拠にして読み込む
↓
Vercel にデプロイする
↓
code: index.html
このアドレスにアクセスできるのは Vercel の管理者のみ、他の人がアクセスするとログインを求められるという URL が指定されている。そのため、Bot もクロールできず、Twitter(X) には OGP 画像がないものとして扱われる。
結果、表示されない。悲しみ。
回避策:publicに置いて絶対URLで指定
苦肉の策として。
まず、OGP 画像を public 直下に移動する。例: public/opengraph-image.png
Metadata API を準拠にして metadata を書き込む。OGP 画像が 1200 x 630とすると……↓
code: layout.tsx
const title = 'サイト名';
const siteName = 'サイト名';
const description = 'サイトの説明';
export const metadata = {
title,
description,
openGraph: {
title,
description,
url,
siteName,
locale: 'ja_JP',
type: 'website',
images: [
{
type: 'image/png',
// url: ${url}/opengraph-image.png, // ← これでも良さげ
// url: "/opengraph-image.png" // ← これはNG
width: 1200,
height: 630,
alt: title,
},
],
},
twitter: {
card: 'summary_large_image',
title,
description,
site: '@~',
creator: '@~',
},
};
こんな感じかな。「~」の部分は摘便置き換えてくだされ。
注意:相対URLで指定しないこと
ferret によれば、OGP に指定する URL は 相対 URL ではなく、絶対 URL を使う必要があるらしい。 参考文献