結論
Vercel Authenticationの設定をOnly Preview Deploymentsに変えよう!
(以下はこまごまとした説明です)
経緯
最近、文字数カウントアプリをVercelにデプロイしました。
lef237/char-count: テキストの文字数をカウントするアプリ
Next.jsではとても簡単にOGP画像を設定することができます。
しかし、そのままだと自分の本番環境ではOGP画像が表示されませんでした。
色々調べたところ、OGP画像へのリンクにVercel Authenticationが掛かっていることが分かりました。そのため、自分以外のユーザー(サイト)がOGP画像へのリンクを辿れないため表示されないことが分かりました。
そのため、VercelのProject SettingからDeployment Protectionへと進み、Vercel Authenticationの設定を変える必要があります。
最初の設定ではStandard Protectionになっているのですが、これだとup-to-date Production Domainsしか公開されません。
しかし、DeploymentsのCurrentから最新のデプロイ状況を選択し、Open Graphに設定されている画像を見ると、このイメージはup-to-date Production Domainsに含まれていないドメインを含んだパスになっています。
そのため、外部に公開されず、OGP画像が表示されなかったというわけです。
(自分はVercelにログインしていない別のブラウザからDeveloper Toolを開いてURLの値を確認したところ、上記のドメインを含んだパスになっており、原因に気が付きました)
そして、Vercel Authenticationを「Only Preview Deployments」に切り替えたところ、うまく表示されるようになりました。
一点だけ不安なのが、これはVercelがリコメンドしているデフォルト設定ではないということです。
将来的にはこの変更をしなくてもOGPが表示されるようになると思いますが、現段階ではこのような設定が必要なので記事に残しました。
(本来であればパスもデプロイ先のドメインに追従して欲しいので)
参考になれば幸いです。