自分のスマホではきれいに見えるのに、AIには読めないかもしれないページ

画面は完成した料理、元のHTMLは最初に届いた材料です

ページを開くと、ブラウザはまずサーバーからHTML文書を受け取ります。次に、その中でつながっているJavaScriptを実行して、価格を読み込み、レビューを付け、商品説明を埋めていきます。私たちがスマホで見ているのは、この流れがすべて終わった結果です。

最近のネットショップやホームページは、この2つ目の段階で多くの内容を埋めることがよくあります。人は違いに気づきません。1秒もかからないからです。問題は、JavaScriptを実行せず、最初に受け取った文書だけを読む側です。そこから見ると、価格の場所もレビューの場所も空っぽのページになります。

同じ商品ページの、2つの姿例

自分のスマホ画面 JavaScript実行後商品名 · 4,400円「防水生地、機内持ち込みサイズ」レビュー128件 · 配送案内人はこの画面を見ています。

最初に届いた元のHTML JavaScript実行前商品名 <div id="price"></div> 空欄 <div id="detail"></div> 空欄元のHTMLだけを読む側はここで止まります。

すべてのサイトがこうなるわけではありません。最初からHTMLに内容を入れて送るサイトもたくさんあります。自社ページがどちらかは、下の3分チェックで確かめられます。

AIクローラーはどちらを読むのでしょうか

Google は、JavaScriptのページをクロール、レンダリング、インデックス登録の3つの段階で処理すると説明しています。Google 検索はレンダリングの段階でJavaScriptを実行し、完成した画面を見ます。それでも同じ文書の中で Google は、サーバーサイドレンダリングや事前レンダリングは今もよい方法だとすすめています。ユーザーにもクローラーにもページが速くなり、すべてのボットがJavaScriptを実行できるわけではないからです。

AIクローラーはどうでしょうか。2024年12月、Vercel が MERJ と共同で自社ネットワークのクローラーのリクエストを分析し、公開した記事があります。結果はこうでした。OpenAI、Anthropic、Perplexity などの主要なAIクローラーで、JavaScriptをレンダリングするものはなかった。ChatGPT と Claude のクローラーはJavaScriptファイルをダウンロードはしていたものの（リクエスト全体のそれぞれ11.50%、23.84%）、実行はしていなかった。一方、Gemini は Googlebot のインフラを使うためレンダリングでき、AppleBot もブラウザベースでレンダリングしていました。

クローラーごとに持ち帰るもの（2024年12月 Vercel · MERJ の分析）

ChatGPT（OpenAI）元のHTMLだけJavaScriptファイルは取得しても、実行はしていませんでした。

Claude（Anthropic）元のHTMLだけJavaScriptファイルは取得しても、実行はしていませんでした。

Perplexity元のHTMLだけJavaScriptをレンダリングしていませんでした。

Gemini · Google完成した画面までGooglebot のインフラでJavaScriptを実行します。AppleBot もレンダリングしていました。

2024年12月時点の公開分析です。クローラーの動きは変わることがあるので、結論よりも「元のHTMLに大事な内容があれば、どちらでも安心」という原則を持ち帰ってください。

Vercel がまとめた推奨も同じ方向です。重要な内容はサーバーでレンダリングして最初のHTMLに入れて送り、閲覧数カウンターやライブチャットのウィジェットのように、なくても困らない部分だけをブラウザで埋める、というものです。お客様が買う前に確かめる価格、仕様、配送や交換の条件は、もちろん「重要な内容」の側です。

元のHTMLから抜けやすい内容は

サイトの作り方によって違いますが、一緒にページを見るときに確かめることが多い場所はだいたい決まっています。ほとんどが「あとから読み込む」内容です。

元のHTMLにあるか、まず確かめたい場所例

商品名多くの場合は元のHTMLにあります。titleタグにも入っていることがよくあります。
価格 · オプション在庫や割引で変わるため、画面を開いたあとに読み込むサイトがあります。
商品説明 · レビュー「もっと見る」、無限スクロール、別のウィジェットで付く内容は、元のHTMLにないことがあります。
配送 · 交換案内共通部分として別に読み込むサイトなら、あわせて確かめてください。

赤い場所が必ず抜けているという意味ではありません。サイトごとに違うので、自分で元のHTMLを開いてみるのがいちばん確実です。

もうひとつ。元のHTMLになくても、サイトを作り直す必要はありません。まずはショップのシステム会社や制作会社に「このページの価格と商品説明を、最初からサーバーがHTMLとして出すようにできますか？」と聞くところから始めましょう。サーバーサイドレンダリングや事前レンダリングといった名前で、すでに対応していることも多いです。ただし、元のHTMLに入れたからといって、AIが自社ページを引用する保証はありません。読める状態にするところまでが、私たちにできることです。

今日できる3分チェック

パソコンで、いちばん売りたい商品のページを開いてください。スマホよりパソコンの方がずっと簡単です。

1分 · 開くページのソースを開くChrome や Edge で Ctrl+U（Mac は Cmd+Option+U）を押すと、サーバーが最初に送った元のHTMLが新しいタブで開きます。
1分 · 探す大事な文章を3つ検索Ctrl+F で、価格の数字、商品説明の一文、交換条件の一文を順に検索します。
1分 · 書くO/X をメモ見つかれば O、見つからなければ X。X がひとつでもあれば、制作会社に聞く最初の質問ができたということです。

手作業だとどこで行き詰まるか

1ページなら3分で終わります。でも商品が何十もあり、テンプレートが何種類もあり、元のHTMLにある文章がお客様とAIに実際どう読まれているかまで見ようとすると、ページごとに同じ作業を繰り返すことになります。開発用語が混じった途端、後回しにもなりがちです。

その部分を AIOudit が代わりに見ます。ページの URL を入れるだけで、お客様とAIがそのページをどう読むかを一度に確かめ、何から手を入れると良いかを順番に整理します。

ただし AIOudit は、価格競争力、在庫、広告、季節要因、ブランドの評判は見ることができません。そして、どのページを引用するかは最終的にそれぞれのAIが決めます。

あなたのページがお客様と AI にどう読まれているか、AIOudit で診断してみてください。