クローラー視点

どのページにも2つの姿がある

1つ目は、サーバーから出ていくHTML文書です。2つ目は、ブラウザがスタイルシートを読み込み、スクリプトを実行し、そのスクリプトが求めるものを取得したあとに組み立てる姿です。人が目にするのは常に2つ目だけです。

ボットは主に1つ目を使います。GooglebotはヘッドレスChromeでページをレンダリングしますが、それは後回しの工程で、遅れることもタイムアウトすることもあります。Bingbotのレンダリングはもっと限られます。AIアシスタントにデータを渡すクローラーや、チャットやSNSのプレビュー取得ボットは、たいていJavaScriptをまったく実行しません。テキストが2つ目の姿にしかないなら、機械の読み手のかなりの部分は空のページを受け取っています。

このチェックは1つ目を取得して、そこで止まります。何も実行せず、スタイルシートも適用しません。

テキスト表示の読み方

ページの本文をソースの順にたどり、テキストとして表示します。スクリプト、スタイル、テンプレート、インラインのSVG図は飛ばします。残りは次のように示します。

#、##、###

見出しとそのレベルです。これらの行だけを読んでみてください。ページの目次として機能するはずです。

下線付きの語

リンクです。マウスを重ねると、リンク先のアドレスが表示されます。

[Image: …]

画像のaltテキストです。alt属性のない画像は、ファイル名とともに「なし」と表示されます。ボタンやフォームフィールドも同じように角括弧で表示されます。

非表示と示されたテキスト

HTMLにはあるものの、hidden属性や、display:none、visibility:hidden、font-size:0、大きな負のtext-indentなどのインラインスタイルが付いた語です。

noscriptと示されたテキスト

<noscript>内の内容で、ボットとJavaScriptを使わない訪問者だけが受け取ります。

テキストの下には数値が並びます。HTMLのサイズ、表示される語数、HTMLに占めるテキストの割合、スクリプト、リンク、画像の数です。手作りやCMSのページでは、テキストの割合は10〜30%が普通です。1〜2%なら、文書のほとんどはコードです。

各結果が出る条件

最後のブロックでは、このアドレスについてrobots.txtを10種のクローラーに当てはめます：Googlebot、Bingbot、Google-Extended、GPTBot、OAI-SearchBot、ClaudeBot、Claude-SearchBot、PerplexityBot、CCBot、Applebot-Extended。Googlebotのブロックはエラーと数えます。AIクローラーのブロックは報告するだけです。それはあなたが選んでよいことだからです。サイト全体についてより多くのボットを調べるなら、AIボットのアクセスチェックを使ってください。

テキストを1つ目の姿に入れる

チェックで空のコンテナが見つかったなら、そのページはクライアントサイドのアプリケーションです。サーバーは枠だけを送り、ブラウザが中身を埋めます。対処法を、徹底したものから順に挙げます。

1. サーバーでレンダリングする。Next.js、Nuxt、SvelteKit、Remix、Angularはどれも、リクエストごとに完全なHTMLを生成し、そこにスクリプトを結び付けられます。たいていは書き直しではなく設定の問題です。
2. ビルド時に静的ページを生成する。あまり変わらない内容なら、Astro、Gatsby、または上記フレームワークの静的エクスポートが、ページごとに完全なHTMLファイルを書き出します。
3. ボット向けにプリレンダリングする。プリレンダリングサービスがレンダリング済みのスナップショットを保持し、クローラーに配信します。うまくいきますが、管理するバージョンが2つになります。

WordPressやDrupalのような従来型のCMSでは、HTMLにすでにテキストが入っているので、見つかる問題は小さなものです。画像の中にしかない価格、リンクがonclickハンドラーのメニュー、altが空のバナー画像に入った電話番号などです。