Google Search Consoleではサイトの検索アナリティクスを確認・調整できますが、このブログではいつからかソフト404エラーが多発するようになってしまってました。
今回その原因がわかったので備忘録として記録しておきます。
ソフト404エラーとは
そもそもソフト404エラーとはなんでしょうか？
Googleによると
- サーバーサイド インクルード ファイルがない。
- データベースへの接続が切断されている。
- 内部検索結果ページが空である。
- JavaScript ファイルがアンロードされている、または欠落している。
などによって、ステータスコード200を返しているが内容が無いページを指すようです。
エラー原因の確認
今回うちのブログでの場合だと、だいたいの記事がソフト404エラーとなっていました。
ただどの記事もブラウザでアクセスする分には問題なく表示することができます。
そこでSearch Console上部のURL入力欄にエラーとなっているURLを入力することで詳細情報を確認することができます。
今回はhttps://shigurezuki.jp/articles/wadsn-eotech-ogl-nylon/こちらのURLで確認します。
エラーなっているので「URL が Google に登録されていません」となっていますね。
下にはもう少し詳細な情報が表示されているのでそこも確認します。
色々ありますが、重要なのは真ん中のクロールの欄です。
これを見ると「クロールを許可」「インデックス登録を許可」はいずれも問題なく、「ページの取得」も成功しているのが伺えます。
もしここがいずれかが不許可になっている場合はrobots.txtなどの設定を見直したり、ページの取得が失敗していればサーバーのエラーログなどを見て修正をします。
ただし今回のケースではいずれも問題がなく、この情報としては特に問題はないように見えます。
これでは原因がわかりませんので、右上の「公開URLをテスト」ボタンを押します。
そうすると実際にGoogleのクローラーが動いて再度検証を行ってくれます。
だいたい1〜2分ほど待つと検証が完了し、検証結果が表示されます。
やはり「URL が Google に登録されていません」となっており、エラーも「ソフト404」ですね。
ここで重要なのは1枠目の左下に存在する「テスト済みのページを表示」リンクです。
これを押すことで右側に更に詳細な情報を表示することができます。
- HTML
- スクリーンショット
- その他の情報
ここでは上記のタブで様々な情報が見れます。
スクリーンショットタブに切り替えてみると、クローラーが実際に見てる画面のスクショが表示されます。
見事に500エラーとなってますね……
よく見るとヘッダー下辺りにはイラストが表示されるはずですが、それも表示されていません。
再度言っておきますが、ブラウザで見る分には正常に表示されます。
さて、とりあえずなにかがおかしくなっているのは確実です。
そこでその他の情報タブに切り替えてみます。
ここでは画面のレスポンス情報を見ることができます。
コンテンツタイプ：text/htmlは普通ですね。
HTTPレスポンス: 200OKも問題はなし
ページのリソース: 23/106県のリソースを読み込めませんでした……んんん、23件が読み込めないと。
JavaScriptコンソールメッセージ: 43件のメッセージうちのブログは案内用に2,3件のコンソールログはデフォで表示させていますが、43件はおかしいですね。
このことから下記の2点に異常があることがわかります。
- 読み込めないリソース（css/js/画像など）がある
- jsエラーが有る
読み込めないリソース
細かく見ていきます。
まずはページのリソースで読み込めないリソースがなんなのか確認します。
どうやらhttps://directus.shigurezuki.jp配下のリソースがrobots.txtによってGooglebotからのアクセスをブロックしているようです。
詳細は後述しますが、これは画像ファイルやAPIですね。
JSエラー
次にjsエラーの内容を見ていきます。
APIのFetchエラーやCORSエラーのようです。
上記のリソース読み込みでのエラーになりますね。
ということは、https://directus.shigurezuki.jpのリソースが読み込めないことが根本的な原因のようです。
ソフト404エラーの解消
そもそもうちのブログ構成を少し説明しますね。（wappalyzerなどを見ればわかるとおりですが）
フロント及びバックエンドはNuxt.js（nodeサーバー）のSSRで動いています。
ただ一部を除いた各種画像データや記事データなどはdirectusというヘッドレスCMSを使用しています。
上述したhttps://directus.shigurezuki.jpがそれですね。
このdirectusに登録した画像や記事データ等をNuxt.jsからAPIでコールして表示するような形を取っています。
そのため、基本的にはサイト自体のshigurezuki.jpとCMS用のdirectus.shigurezuki.jpの2つのドメインを用いています。
Search Consoleで検出できる「クロールの許可」「インデックスの許可」など、つまりはrobots.tsの設定は基本的に前者のshigurezuki.jpのものになっています。
当たり前ですね。 通常Webサイトは自己ドメインのみで完結せずにCDNなどで他ドメインからなんらかのリソースを取得して構築されていることが多々です。
そのため、今回のshigurezuki.jpのほうでは問題ないが、実はdirectus.shigurezuki.jpのほうに問題があった。というケースの場合パット見では原因がわからない状態になります。
directusの設定見直し
さて、上記で記載したようにNuxt.js側のshigurezuki.jpは問題なく、CMS側のdirectus.shigurezuki.jpに問題がありました。
エラーとしては「Googlebotがrobots.txtによってブロックされています」とのことなので、robots.txtの設定が原因のようです。
ただ自分がdirectusを構築した際には特にrobots.txtはいじっておらず、実際のディレクトリを見てもルートには存在しません。
そこで調べてみると、どうやらdirectusはビルドした際にデフォルトでrobot.txtを吐き出しているようで、実際には存在しているようです。
デフォルトの設定値は以下のようです。
User-agent: *
Disallow: /
全クローラーに対して、ルート配下のアクセスを拒否する設定ですね。
つまりはこれのせいでCMS（directus）のリソースにGooglebotがアクセスできず、結果jsでfetchエラーが発生して500となったようです。
directusは.envに環境変数を記載することでrobots.txtの内容を上書きできるようなので、その設定を行います。
## robots.txt上書き
ROBOTS_TXT="User-agent: *\nDisallow:"
上記を記載して再度directusを立ち上げ直せばrobots.txtが反映されます。
User-agent: *
Disallow:
内容としてはこうですね。
全てのクローラーに対して、アクセス拒否設定はさせないようにしました。
再度確認
これで再度「公開URLをテスト」ボタンで再検証させてみると、無事「URLはGoogleに登録できます」となり、「ページの可用性」も「ページをインデックスに登録可能です」となりました。
あとは「ページのインデック登録>ソフト404エラー>検証の詳細」で「新しい検証を開始」をしておけば、そのうちソフト404エラーが解消されて、各ページがインデックスされるはずです。 ※スクショはソフト404エラーではすでに新しい検証を開始しちゃってたので、404エラーのほうを表示しています。
