夏アニメが終わってしまい気持ちが落ち込む季節。以前の記事で、Firebaseで使われる404.htmlにリダイレクトして満足していたが、404.htmlへのアクセスはFirebase Hostingはステータスコード200を返してしまい、Googleにインデックスされてしまっていた。
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周りはまだまだ情報が少ないので自分でなんとかしていくしかなさそう。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
- 作者: 小笠原みつき,西村公宏,柳佳音,志甫侑紀,池田友洋,木村涼平,?橋優介,大塚雅和,飯塚直,吉川竜太,末永恭正,久保田祐史,浜田真成,穴井宏幸,大島一将,桑原仁雄,牧大輔,池田拓司,はまちや2,竹原,WEB+DB PRESS編集部
- 出版社/メーカー: 技術評論社
- 発売日: 2018/06/23
- メディア: 単行本
- この商品を含むブログを見る
