Vue.jsを使っている開発者がSEO対策の選択肢のひとつとしてNuxt.jsを選ばれる方が多いです。事前レンダリングを行う上でNuxt.jsはVue.jsと遜色なく使え非常に良いことが選択されてる理由かと思います。

Nuxt.jsではhtmlを事前にレンダリングする手段として nuxt generate を使う場合と、nuxt を立ち上げる2つの手段があります。nuxt generateはhtmlファイルを生成するのみですのでサーバーがapacheならhtaccessなどでリダイレクトができます。しかしnuxtの場合、Expressを立ち上げあげているのでapacheと連携するのも少し手間だったりします。そんな時どうすれば簡単に実装できるか紹介していきたいと思います。

リダイレクト方法

redirect メソッド(301/302リダイレクト)

ユーザーを別のルートにリダイレクトさせます。ステータスコードはサーバーサイドで使用され、デフォルトは 302 です。redirect([status,] path [, query])。

https://localhost:3000/item/1 → https://localhost:3000/item/
に301リダイレクトさせた場合などに使用します。

実装はasyncData又はcreatedで記述すればOK

<script lang="ts">
export default{
  asyncData({ redirect }) {
    return redirect(301, '/item/)
  }
}
</script>

error メソッド(404/500リダイレクト)

NotFoundやエラーページを表示したい場合はerrorメソッドを呼び出します。
自動的にlayoutフォルダのerror.vueが表示されます。

<script lang="ts">
import Vue from 'Vue'
export default {
  asyncData({ error }) {
    return error({
      errorCode: 404
    })
  }
}
</script>

@nuxtjs/redirect-module

命名規則が決まってる場合は@nuxtjs/redirect-moduleも便利です。
nuxt.config.jsでリダイレクトの条件を正規表現で指定できます。


// nuxt.config.js
export default <
  modules: [
     '@nuxtjs/redirect-module'
  ],
  redirect: [
    < from: '^/item/(.*), to: '/item/, statusCode: 301>
  ]
>

SSL対応

redirect-ssl

現在メジャーとなっているhttps対応
普段はELBでリダイレクト設定をしていますが、こちらもredirect-sslを使うことで簡単に実装できます。


// nuxt.config.js
const redirectSSL = require('redirect-ssl')
export default <
  serverMiddleware: [
    redirectSSL.create(< redirectHost: uiuifree.com' >)
  ]
>

nuxt.config.jsに記述することで簡単にhttpからhttpsにリダイレクトできましたね。

uiuifree.com

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