Next.jsをVercelにデプロイしたとき、OGPを表示するためにはVercel Authenticationの変更が必要かも

結論

Vercel Authenticationの設定をOnly Preview Deploymentsに変えよう!

(以下はこまごまとした説明です)

経緯

最近、文字数カウントアプリをVercelにデプロイしました。

github.com

lef237/char-count: テキストの文字数をカウントするアプリ

Next.jsではとても簡単にOGP画像を設定することができます。

nextjs.org

しかし、そのままだと自分の本番環境では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が表示されるようになると思いますが、現段階ではこのような設定が必要なので記事に残しました。

(本来であればパスもデプロイ先のドメインに追従して欲しいので)

参考になれば幸いです。

参考URL