GAミント至上主義

Web Monomaniacal Developer@ビズオーシャン

続vue-router + Firebaseで404ページをちゃんとやる方法を考える

夏アニメが終わってしまい気持ちが落ち込む季節。以前の記事で、Firebaseで使われる404.htmlにリダイレクトして満足していたが、404.htmlへのアクセスはFirebase Hostingはステータスコード200を返してしまい、Googleにインデックスされてしまっていた。

uyamazak.hatenablog.com

404.htmlがなぜ200を返すか

Firebaseではファイルが無いときに404.htmlの内容を返してくれるが、404.htmlに直接アクセスした場合、404.htmlというファイルは存在するので200を返すのは当然といえば当然。

Hosting 動作をカスタマイズする  |  Firebase

しかし、Vue等でSPAにする場合、下記のような設定の必要があり、ファイルが存在しないはすべてindex.htmlにリライトしてしまう。
firebase.json

// 省略
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
// 省略

そのため、上記404.htmlの機能が動くことは無いのだった。

検索エンジンのインデックスを防ぐ

そもそも404.htmlが表示されることはないので、カスタム404.htmlを置く必要もないのかもしれない。
でも念のため、デフォルトよりはいいので置いておきたい。
リライト先のindex.htmlが無いと出るのかな?(未確認)

で、404.htmlがインデックスされてしまう問題はシンプルにmetaタグでなんとかする。
404.html

<meta name="robots" content="noindex">

Firebase Functionsで404のレスポンスを返す

いろいろ試したけどfirebase.jsonの設定ではステータスコードを変えられなかった。
そのため大がかりだけど、Functionsを使う。
そんなアクセスは無いだろうから料金もほとんど発生しないはず。

とりあえずcontentは直書きして404で返すfunctionを作る。

index.js

exports.notFound = functions.https.onRequest((req, res) => {
  res.status(404).send(`<!DOCTYPE html><!-- functions -->
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="robots" content="noindex">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>404 - ページが見つかりません - yagish</title>
    </head>
    <body>
        <h1>404</h1>
        <p>お探しのページが見つかりませんでした。</p>
        <p><a href="/">トップページ</a>から再度お試しください。</p>
    </body>
  </html>
`);
})

/404に来たら、Functionsに繋がるように設定する。

firebase.json

    "rewrites": [
      {
        "source": "/404",
        "function": "notFound"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]


vue-router側の設定は前回と同じで、設定が無いパスは404にリダイレクトしておく。
stackoverflow.com

これらの設定でvue-routerで存在しないページに行ったら/404にリダイレクトされ、Vue側で404を表示、直接/404にアクセスした場合はFunctionsで404エラーを返すことができた。
SPAやFirebaseのSEO周りはまだまだ情報が少ないので自分でなんとかしていくしかなさそう。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

WEB+DB PRESS Vol.105

WEB+DB PRESS Vol.105

  • 作者: 小笠原みつき,西村公宏,柳佳音,志甫侑紀,池田友洋,木村涼平,?橋優介,大塚雅和,飯塚直,吉川竜太,末永恭正,久保田祐史,浜田真成,穴井宏幸,大島一将,桑原仁雄,牧大輔,池田拓司,はまちや2,竹原,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/06/23
  • メディア: 単行本
  • この商品を含むブログを見る