Nuxt.jsでURL末尾の"/"ありURLを"/"にリダイレクトする

関わっているプロジェクトでSEO対策の一環として、

以下のように ”/“ありのURLを常に”/“なしのURLにリダイレクトする という対応をしました。

https://exapmle.com/ → https://exapmle.com
https://exapmle.com/about/ → https://exapmle.com/about
https://exapmle.com/hoge/fuga/ → https://exapmle.com/hoge/fuga

私のケースはスラッシュを常になくす方向での対応でしたが、

常にスラッシュをありにする場合は↓の記事が参考になります。

Nuxt.jsでURL末尾にスラッシュ(trailing slash)を付ける方法 | K note.dev

（私が対応する際もこちらの記事を参考にして対応させていただきました、感謝です！m__m）

URLの統一について

まず何故このような事をSEO対策としてするか、簡単に。

”/“あり・なしの設定を行わなかった場合、

コンテンツの内容が同じ、/あり・/なしのURLがどちらも存在する事になります。

googleのロボットはこれらを別のページとして扱うため、

「違うURLなのに同じコンテンツがある！」と評価し、結果順位が落ちるといった事が発生するようです。

そこでURLを”/“あり・なしどちらかに統一する、という対応が必要になります。

私が関わったプロジェクトでは「”/“なし」で統一したためその方法を記載します。

”/“の統一化設定

trailing slashの設定

nuxt.config.jsでtrailing slashの設定

export default {
  ・・・
  router: {
    trailingSlash: false
  }
}

上記の設定をする事で example.com/hogeが有効になり、example.com/hoge/は無効になります。

しかし問題点があって、

名前付きルーティングを使用していれば

上記のURLが自動的にexample.com/hogeに設定されますが、

$router.push({ path: '/hoge/' })のように文字列指定している場合特にリダイレクトも起きずに404になります。

redirectの設定

そのため、”/“ありのURLの場合”/“にリダイレクトさせるようにします

export default {
  ・・・
  router: {
    trailingSlash: false,
    middleware: 'redirect'
  }
}

import { Middleware } from '@nuxt/types'
 
const redirect: Middleware = ({ route, redirect }) => {
  /**
   トップページではなく、かつ最後の文字が "/" の場合、URLの正規化を行うため末尾が"/"なしのURLにリダイレクトする
 
   NOTE:
     トップページを対象から外しているのはドメインのみの場合は扱いが特殊なようで、"/"をなくしたURLにredirectしようとするエラーになる
     元々"/"を付けてアクセスしても"/"なしのURLに自動変換される影響？
   */
 
  const lastCharacter = route.path.slice(-1)
  if (route.path !== '/' && lastCharacter === '/') {
    redirect(301, route.path.slice(0, -1))
  }
}
 
export default redirect

上記の設定をする事で、

example.com/hoge/にアクセスしてもexample.com/hogeにリダイレクトされるようになります！