一見動作しているウェブサイトがGoogle Search Consoleで取得できない

動作しているように見えるウェブサイトを公開して，Google Search Console で確認したところ，コンテンツの読み込みが途中で止まってしまい，正常に取得できない問題が発生していました．

どうやらページを読み込む最初の部分で，javascriptからxhrで読み込むコンテンツのダウンロードに失敗しているようですが，javascriptでエラーはありませんでした．

原因は非同期処理で await し忘れていました．例えば以下のようなjavascriptで，downloadContent()を実行する時に上記のxhrが実行されるとします．

const load = async () => {
    await downloadContent();
    ...
}
load();

呼び出しもとでawaitしていないため，ダウンロードの途中で，ブラウザーが読み込み完了と判断してしまうわけです．

const load = async () => {
    await downloadContent();
    ...
}
load().catch(() => { });

このようにcatch()を追加したところ，Google Search Console でコンテンツが全て読み込まれるようになりました．

ブラウザーで実行する場合は，awaitしていなくてもブラウザーは処理を実行し続けるため，動作しているように見えるわけです．Google Seach Console では，読み込みが終了したら処理が終わってしまうので，このような現象が発生するわけです．読み込みが完了するまで適切に待機するべきです．

エラーが表示されないのに処理が最後まで進まない場合にawaitを忘れていないか確認しようという教訓でした．

みーのぺーじ