VercelにNext.jsで構築したサイトを公開したときに行うSEO対策

Next.jsは、Vercel社が開発しているReactフレームワークであり、同じくVercel社が提供するデプロイプラットフォームでNext.js製のサイトあるいはアプリケーションをデプロイすることによって、効率よい開発が可能になります。

本記事では、Next.js製のサイトをVercelのプラットフォーム上に公開したときに行うSEO対策について整理してみました。

Trailing Slashの有無を統一する

Trailing Slashとは、URL末尾に付けるスラッシュのことです。例えば、/about/の末尾のスラッシュのことを指します。

Next.jsでつくったサイトを何も考えずにアップロードすると、Trailing SlashありのURLでもなしのURLでもページを表示できてしまいます。このような挙動になる理由は、VercelのTrailing Slashの扱いがデフォルトでは未定義となっているからです。

内容が全く同じコンテンツがごくわずかな違いではありつつも複数のURLで表示できてしまうのはサイト設計上望ましくないので、Trailing SlashありかなしかのどちらかにURLは揃えます。

設定には、まずvercel.jsonという名前の設定ファイルをプロジェクトのルートに置きます。

そして、Trailing Slashを付けないURLにそろえる場合は、

{
    "trailingSlash": false
}

のようにファイル内に記述します。これを設定するとTrailing SlashありのURLでアクセスしたときはTrailing SlashなしのURLにリダイレクトされます。

Trailing Slashを付ける場合は、

{
    "trailingSlash": true
}

のように記述します。これを設定するとTrailing SlashなしのURLでアクセスしたときはTrailing SlashありのURLにリダイレクトされます。

これを設定するときに注意しなければいけないことが1つあります。一度Trailing Slashをどちらかにそろえたら設定を反転させないようにする必要があります。というのも、リダイレクトのHTTPステータスコードが308のため、そろえた方にページ評価が永続的に渡されることになるからです。

Development URLから独自ドメインにリダイレクトを設定する

Vercelにデプロイすると、複数の[project name].vercel.appというDevelopment URLがプロジェクト内に生成されます。

どのURLも表示されるコンテンツは独自ドメインと同じソースからデプロイしているものなので、異なるURLで同じコンテンツが表示されてしまいます。

独自ドメインをVercelの管理画面上で割り当てた場合は、この[project name].vercel.appというドメインから独自ドメインにリダイレクトを設定してコンテンツの重複を防ぎます。

管理画面でのリダイレクト設定はプロジェクトのドメイン設定から行えます。ただし、プロジェクトを更新するたびにランダムに文字列が割り当てられるDeployment URLのみリダイレクトの設定はできないようになっています。

ちなみに、Development URLにはx-robots-tag: noindexが設定されているので、そもそも検索エンジンにインデックスされることはありません。ただ、ダイレクトにURLを入力すればコンテンツが表示されます。よって、何らかのきっかけでDeployment URLが良質な被リンクを大量に獲得したときの機会損失を防ぐためにリダイレクトは適切に設定しておいた方が良いと思います。