【Gatsby の SEO対策】Gatsby + Netlifyで運用しているサイトで意図しない301リダイレクトがかかっていたので対応した話
先日、Gatsbyで作成してNetlifyで運用しているサイトで不要なリダイレクトが発生していることに気づき、対応をしていた。
(Google Search Consoleでリダイレクトありと出ていた)
ただ、コードを見ていてもリダイレクトがかかっている箇所なんて存在しないし、なぜだろう？と悩んでいたときにこのIssueを見つけた。
私のケースもここで書かれているのと同様で、末尾にスラッシュがない URL を指定すると、末尾にスラッシュがあるページに 301 リダイレクトされるというものだった。
なお、この問題についてはローカルの開発環境上では起こらず、Netlify上でしか発生しない。
そのため、最初はなぜリダイレクトが発生しているのかが分からなかった。
もし同様の問題で悩んでいる方がいれば(かつ、Netfliyを利用している方は)、本番環境で末尾に / なしのURLを打ち込んで確認してみてほしい。
上のissueではなぜNetlify上ではそのような挙動になるのか、色々と議論されているので、興味ある人は目を通しておいたほうが良さそうだ。
また、このケースとは別にURLに大文字が入っていると、全て小文字のURLにリダイレクトされるという事象も同時に発生していたので、併せて対応までの流れを備忘録がてら書いていこうと思う。
また、少し前に下記のような投稿をした。これとも少しは関係しているかもしれない。
末尾に/(スラッシュ)をつけないとページアクセス時に301のリダイレクトがかかる
まずは末尾にスラッシュがない URL を指定すると、末尾にスラッシュがあるページに 301 リダイレクトされるという件についての対応について。
これは単純に末尾にスラッシュを付けるように対応した。
(生成されるリンクURLに対する対応)
また、現在の状態だとスラッシュありとなしで２種類のURLが生成されていることになるため、canonicalを追加し、末尾にスラッシュありのURLの方を指定するようにした。
これで今後どれぐらいSEOに影響があるかは観察してみようと思う。大きな変化があればまたこちらに書くかもしれない。
GatsbyJSにおけるcanonicalの設定方法
なお、Gatsbyではcanonicalを設定するためのpluginがあるため、今回そちらをインストールして設定を行った。
設定方法についてはREADMEを見ればわかるレベルなので、割愛する。
そもそも末尾に/をつけないURLで運用したい
私は結局末尾に / をつける運用に切り替えて対応したが、もし末尾に / つけないで対応していく場合はNetlifyのUI上で設定をイジる必要がある。
上に貼ったissue内のこのコメントが参考になりそうなので、URLを貼っておく。
(私も機会があれば、今度はこの方法で対応を試してみたいところ)
URLに大文字が使用されているとページアクセス時に301のリダイレクトがかかる
これも対応方法としては簡単、かつ地味である。
単純にURLに使用される文字列を小文字に変換して対応するようにした。
というわけで、まあわざわざここに書く必要もないぐらいに地味な内容となったが、原因がわかるまでは気持ちが悪かったし、一応備忘録としてここに残しておく。
追記：その後のSEOへの影響
上記対応を行ってから3日ぐらいで、今までは表示されていなかったページもGoogle 検索結果にポツリポツリ出てくるようになった模様。
(Google Search Console上でのデータから判断した他、自身でも試しに検索をかけてみて、以前よりも表示される頻度が上がっているように感じた)
今回の対応の成果によるものかは完全には言い切れないところだが、すくなくとも悪くはなっていないように感じた。
