/posts/[postId].jsx
というページを作って公開し、Google Search Consoleでhttps://example.com/posts/12345
に「公開URLを検査」すると404エラーのためインデックスできないと言われた。
GatsbyにはClient-Only Routesという仕組みがあるが、簡単に説明すると、
/src/pages/posts/[postId].jsx
というファイルがあるときに、https://example.com/posts/12345
とアクセスすると、[postId].jsx
は12345
をクライアントのアクセス時に受け取ることができ、使うことができるという仕組み。
(ビルド時ではなく、各アクセス時にブラウザ上で変数を使うことができる)
Gatsbyは静的なHTMLを生成するフレームワークなので、GitHub PagesやNetlifyなどにホスティングできる。
/src/pages/hoge/fuga.jsx
をビルドすると、/hoge/fuga/index.html
が生成される。
ここで、Client-only routesを使ったページは、/posts/:postId/index.html
として生成される。
ブラウザでまずhttps://example.com/hoge/fuga/
にアクセスして、さらに/posts/12345/
に移動する操作をした場合は、jsがよしなにやってくれるので問題ない。
しかしダイレクトにhttps://example.com/posts/12345
にアクセスした場合、ホスティングサーバーとしてはそのようなファイルを持ち合わせていないので、404ページを返すことになる。
そのため、Googleはそのページをインデックスしてくれない(可能性がある)。
(上記のように内部リンクでたどり着いた場合は正しく認識されてインデックスされるかも。)
実際にsearch consoleでテストサイトを作ってみて公開URLを検査すると、404エラーのためインデックスできないと言われた。
対策
ホスティングサービスに依存した対策しかできない。
/posts/*
にアクセスされた場合に/posts/:postId/index.html
を返す設定をすることで解決する。
言い換えれば/posts/:postId/index.html
にステータスコード200でリダイレクトすればよい。
Netlifyではその設定が存在し、Webサイト直下に_redirects
ファイルを置き(https://example.com/_redirects
となるように。)、/posts/* /posts/:postId/index.html 200
と書くと設定できます。
Cloudflare Pagesでは300系のリダイレクトにしか対応していないので、解決不可能です。
インデックスさえされなくていいなら放置でいい
上記のとおり、Client-only routesを使ったページはインデックスされない可能性が高いが、インデックスは不要で、ブラウザからアクセスできさえすればよいというなら、放置でいい。
いったんはステータスコード404で404ページが返ってくるが、404ページ内のgatsbyスクリプトによって、よしなに正しいページをロードしてくれる。
Googleはjsを解釈できるものの、404が返ってきた場合はその瞬間に打ち切るみたい(公開URLを検査調べ)。