Programming / Travel / Liquor

NuxtアプリケーションでURL末尾にスラッシュを強制的に付ける方法

Nuxt

SEO対策のためにNuxtアプリのURL末尾スラッシュの有無を統一させます。

NuxtでのURL末尾スラッシュ

NuxtアプリケーションはURL末尾のスラッシュ(trailing slash)の区別が曖昧なところがあり、Nuxt generateで生成した場合はURL末尾にスラッシュが付きますが、スラッシュなしのURLでも有効なURLとなっています。

アプリケーションの動作としてはそれで問題なく、スラッシュの有無自体もSEOには重要ではないみたいですが、混在しているのはSEOによろしくないです。

そのためどちらかに統一したいと思います。

trailing slashオプション

どう統一させようか実装を考えていたところ、ちょうど良いタイミングでNuxt 2.10.1からURL末尾にスラッシュを強制的に付与することが出来るオプションが追加されました。

nuxt configのrouterオプションで「trailingSlash」にtrueを指定することで、サブフォルダが使用されていない場合はURL末尾にスラッシュが必ず付与されます。

export default {
  router: {
    trailingSlash: true
  }
}

このオプションには注意点があり、有効にすると末尾にスラッシュがないルートについては機能しなくなり、404エラーとなってしまいます。

内部リンクでrouter-nameを指定している場合は問題ないですが、パスを直接記載している箇所は末尾にスラッシュを追記することが必要です。

>> trailingSlash

それでも何かのタイミングで末尾スラッシュ無しのURLにアクセスされた時に404となってしまうのはよろしくないので、スラッシュ付きのURLにリダイレクトさせることが必要です。

Nuxtでリダイレクト

とりあえず、すべてのルートに対して末尾スラッシュ有無の判定を行う必要があるので、そういう時はNuxtのミドルウェア機能を使うと便利です。

>> ミドルウェア

ミドルウェアはページレンダリング前に行いたい処理を実装できます。

  1. nuxt.config.js
  2. レイアウト
  3. ページ単位

nuxt.configのrouterで指定すると全てのルート変更時に実行されるようになります。

私はmiddlewareディレクトリの中に以下のjsファイルを用意しました。パラメータとしてrouterコンテキストを受け取れるので、遷移先のパスを取得できます。

処理自体は単純で、パスの末尾にスラッシュが無ければ付与して301リダイレクトさせています。

// 末尾にスラッシュがなければスラッシュ付きのルートへ301リダイレクトする
export default function({ route, redirect }) {
  if (route.path.slice(-1) !== "/") {
    redirect(301, route.path + "/");
  }
}

あとはnuxt configで上記のミドルウェアを指定してあげればOKです。先ほどのtrailingSlashと合わせて以下のようになっています。

export default {
  router: {
    trailingSlash: true,
    middleware: "redirect"
  }
}

おわりに

これで無事にNuxtアプリで末尾スラッシュ付きのURLへ統一することができました。

長期的にみればやっておいて損はないかなぁと思います!

About
K

旅行とお酒、そしてプログラミングが大好きなエンジニアです。

バックエンド、言語としてはJava(Spring FW)・Cが専門ですが、最近はVue/Nuxtをはじめとするフロントエンドまわりも勉強中。

旅行は国内・海外問わず、海外旅行は現在12か国、国内は色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)

お酒はビール・ウイスキー・日本酒があればOK。

Portfolio

QT Visualizer

Portfolio Site

プライバシーポリシー

Frontend by Nuxt & Vuetify / Contents by Prismic.io

© 2019 K note.life