/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].jsx12345クライアントのアクセス時に受け取ることができ、使うことができるという仕組み。
(ビルド時ではなく、各アクセス時にブラウザ上で変数を使うことができる)

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を検査調べ)。

投稿者 admin

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です