841-biborokuWebフロントエンドの備忘録

__NEXT_DATA__のjson内のパスがサーチコンソールで認識され404エラーが出てた件

サーチコンソールから何度も来ている「ページがインデックスに登録されない新しい要因」にようやく・・向き合うことにしました。

今回対処したのは、「見つかりませんでした(404)」のリストに上がっているURLを対象に原因を探ってどのような対策を施したかをまとめました。
(対策は最適解が他にないか悩み中...)

404が発生しているURLの確認

サーチコンソールにログインして、サイドバーのインデックス作成>ページもしくは、ヘッダー右にある🔔アイコンのメッセージを開きインデックス登録レポートを開く。

「ページがインデックスに登録されなかった理由」の「見つかりませんでした(404)」を開くとエラーが出ているページのURL一覧が表示されます。

リンク元を探す

エラーが出ているURLの虫眼鏡アイコンをクリックすると、URLの検査がはじまり完了すると参照元ページURLを含めた検出情報が表示されます。

原因を探る

page/2/public/images こんなパス指定した記憶がない・・

参照元ページにアクセスし、ページのソースを表示し「public/images」で検索したところ__NEXT_DATA__内のjsonで該当しました・・!

microCMSで投稿した記事の本文に記載していたサンプルコード「./」の部分が表示しているページから相対パスとしてサーチコンソールが認識してしまったため、リンク先がない=404として検知されていました。

類似の状況や問題の解決方法を探す

ありました・が、これだ!といった解決法はまだないようです😥

できる対策を施す

一覧ページで取得するフィールドを制限する

microCMSからコンテンツを取得する際、フィールドの制限をしていなかったので本文として定義しているフィールドを除いて必要なフィールドだけを取得するよう変更しました。

相対パスとして認識されないように本文に任意の文字を挿入する

.と/の間、/の後ろにハイフンを2つ挿入し、出力時に置き換えています。

sec.body.replace(/ハイフンハイフン/g, "")

※置き換えを施しているため、ハイフンと記載しています

これでjsonには、.ハイフンハイフン/ハイフンハイフンとなり、サイト表示では./と表示されるようになりました。

サーチコンソールに修正報告

「修正を検証」をクリックすると検証:開始に切り替わりました。

経過観察中...👀