vercel の preview URL を使って、preview 環境でも OGP image を展開したい

この記事は sadnessOjisan Advent Calendar 2021 21 日目の記事です。書かれた日付は 1/15 です。

OGP 画像の展開条件

OGP 画像は

<meta
  property="og:image"
  content="https://twiogp.ojisan.dev/images/shirankedo.png"
/>

のように絶対パスで書く必要があります。

つまり、

<meta
  property="og:image"
  content="https://twiogp.ojisan.dev/images/shirankedo.png"
/>

だと OGP 画像は展開されません。

PRD, STG 環境のようにオリジンが決まっている環境であればいいですが、preview 環境のように URL がころころ変わる環境で OGP 画像を確認したい場合は困ります。

そこで Vercel 環境で Preview 環境でも OGP を展開できる方法を紹介します。

Vercel には組み込みの環境変数がいくつかあります。

そこによると VERCEL_URL もしくは NEXT_PUBLIC_VERCEL_URL という環境変数にデプロイ先の URL が格納されているとのことです。

そのため、

<meta property="og:image"
content={https://${process.env.NEXT_PUBLIC_VERCEL_URL}/images/shirankedo.png`}
/>

として OGP 画像を展開できます。