SEO対策の一環としてトレイリングスラッシュの有無を統一したい。
今まではApache + htaccessで設定していたが、Nuxt.jsでプロダクトを開発してECSに直接乗っけているのにApacheやNginxをproxyとしていれたくないという方向けに対応方法を紹介いたします。

トレイリングスラッシュ（trailing slash）とは URLの最後につく「/」のこと

SEOにおける影響

末尾のスラッシュの有無でアプリケーションの挙動としては問題ないですがSEOには影響されます。
スラッシュの有無で /test /test/と2パターンできてしましGoogleからみた時に重複コンテンツとみなされランキングに影響が出てくる可能性があります。
そのため不確定な要素を残しておくよりはスラッシュの有無はサイト内で統一するべきです。

実装方法の紹介

全体の流れ

1	`@nuxtjs/redirect-module`を導入
2	`nuxt.config` の設定でリダイレクトの条件を正規表現で指定

作業としてはこれだけです。
私が最初に実装した時は2の設定でとまどりました。

@nuxtjs/redirect-moduleを導入

Nuxt.jsのリダイレクト設定で便利な@nuxtjs/redirect-moduleをインストールします。 @nuxtjs/redirect-moduleはSEOでよく議論になるリダイレクト処理をパフォーマンスの低下なく実装しているモジュールになります。

まず@nuxtjs/redirect-moduleのインストールとnuxt.config.tsにモジュールの登録を行います。

npm install --save-dev @nuxtjs/redirect-module

// nuxt.config.js
export default {
  modules: [
    ['@nuxtjs/redirect-module', {}]
  ]
}

スラッシュ無しからスラッシュ有りにリダイレクトする設定

続けてnuxt.config.tsにリダイレクト設定を正規表現で記述します。デフォルトでは302リダイレクトになっていますがstatusCodeを指定して301に変更しています。

// nuxt.config.js
export default {
  redirect: [
    {
      from: '^(\\/[^\\?]*[^\\/])(\\?.*)?$',
      to: '$1/$2',
      statusCode: 301
    }
  ],
}

これでhttp://localhost:3000/test にアクセスしたらhttp://localhost:3000/test/ にリダイレクトできるようになります。以上でリダイレクトの設定は完了です。

他にもこんな時にも使えるので便利ですので是非導入してみてください

・特定のURLを301/302リダイレクトしたい
・正規表現でリダイレクトルールをつくりたい

リダイレクト設定のアンチパターン

他の記事をみていると何個か実装したものの問題でそうなパターンも見つけましたので参考程度に紹介

trailingSlash: true

Nuxt.jsの2.10.1から提供されているrouterモジュールの機能でtrailingSlash: trueを設定するとスラッシュ無しのURLを無効化できます。


export default {
  router: {
    trailingSlash: true
  }
}

一番楽に統一はできるのですがURL直打ちしたパターンで/testなど最後のスラッシュが無いから表示されないのは結構シビアです。
できればユーザー優しくどちらでも表示できるようにしてあげましょう。

最後の文字列が/であるか判定

if (route.path.slice(-1) !== "/") {
  redirect(301, route.path + "/");
}

redirect: [
  {
    from: /^.*(?:<!\/)$/,
    to: (from, req) => req.url + '/'
  }
]

どちらもgetパラメーターがあった場合に対応できていません。 /test?id=1のURLでアクセスすると
/test/や/test?id=1/などにリダイレクトされてしますので注意しましょう。

uiuifree.com

- サイト制作のノウハウと最適化を目指して-