AIクローラーはShopifyページを読める？レンダリングの確認

ページが実際に返す内容から確認する#

AIクローラーはShopifyページを読めるのでしょうか。ページを取得できる可能性はありますが、それだけでは、どのコンテンツを受け取るのか、追加コンテンツを生成するJavaScriptを実行するのかは分かりません。ブラウザでは完全に見えるページでも、最初に返されるドキュメントは不完全な場合があります。

実用的な確認方法は、ページの初期レスポンス、JavaScriptを無効にしたページ、通常どおりレンダリングされたページの3つを比較することです。同じ見た目かどうかではなく、重要な商品情報、記事本文、リンクがあるかを確認しましょう。

重要な情報がJavaScriptの実行後にしか表示されない場合は、テーマ開発者やアプリ提供元に、その情報を初期レスポンスに含めるよう依頼してください。買い物客に役立つインタラクティブな拡張機能は残しましょう。

この確認では、 決して 特定のサービスがストアをクロール、インデックス登録、引用、推奨したと証明することはできません。分かるのは、より限定的で実用的なことです。つまり、公開ページが本質的な意味を伝えるためにブラウザでの実行処理に依存しているかどうかです。

アクセス、レンダリング、採用を分けて考える#

欠落しているテキストを診断する前に、次の3つの問いを区別してください。

1. アクセス： クローラーは、設定されたアクセスルールのもとで公開URLをリクエストできますか。
2. レンダリング： レスポンスに有用なコンテンツが含まれていますか。それともJavaScriptで構築する必要がありますか。
3. 採用： サービスは、そのコンテンツを結果に含めることを選びますか。

これらは別々の判断です。2つ目を改善しても、3つ目は保証されません。

GoogleのJavaScript SEOドキュメント ↗ では、クロール、レンダリング、インデックス登録をそれぞれ異なる段階として説明しています。Google検索はChromiumを使ってJavaScriptを実行しますが、Googleは、すべてのボットがJavaScriptを実行できるわけではないことも明記しています。Googleのレンダリング能力を、あらゆるクローラーに共通する仕様と考えるべきではありません。

OpenAIのクローラードキュメント ↗ では、検索を支援するOAI-SearchBotと、モデルのトレーニングに使われる可能性のあるコンテンツをクロールするGPTBotを区別しています。両者の設定は独立しています。ChatGPT-Userは、ユーザーの操作によって開始される一部のアクセスを処理するもので、自動検索クロールを制御するものではありません。

このドキュメントは、それらのエージェントに共通するJavaScriptレンダリング能力を示しているわけではありません。JavaScriptなしでの確認は、OpenAIによるアクセスの正確な再現ではなく、慎重を期した診断方法として扱ってください。

確認に役立つShopifyページを選ぶ#

ホームページだけを確認するのではなく、異なるページ構成を網羅する少数のサンプルから始めましょう。

標準的な商品ページ、バリエーションによって情報が変わる商品、コレクションページ、商品を中心に扱う記事、別のページ作成アプリで構築したランディングページを含めてください。2つのテンプレートでコンテンツの配置が異なるなら、両方を含めます。

エディターのプレビューではなく、公開ストアのURLを使ってください。販売者としてのアクセス権に観察結果が左右されないよう、ログアウトした状態で開きます。表示内容に影響する可能性のある言語、通貨、選択したバリエーション、同意の選択内容を記録してください。

各URLについて、比較するどの状態でも残っているべき情報を書き出してください。

• 商品名と有用な説明。
• 関連する仕様、素材、寸法、互換性。
• 該当する場合は、表示価格と在庫・購入可否に関する条件。
• 記事のタイトル、主な説明、重要な条件や注意事項。
• 取り上げている商品や補足ページへのリンク。

すべての操作要素がJavaScriptなしで動くことを求めないでください。最初の目標は情報を読めることです。スクリプトなしで購入手続きをすべて完了できることではありません。

初期ドキュメントを調べる#

公開ページを通常どおり開き、ブラウザの ページのソースを表示 機能を使ってください。これは、ブラウザの処理やJavaScriptによる変更が行われた後の現在のドキュメントを表示する、開発者ツールのElementsパネルとは異なります。

商品説明や記事の特徴的な一文をソース内で検索してください。続いて、仕様と、リンクされている商品のリンク先を検索します。

検索結果は慎重に解釈してください。スクリプト内のデータにある文は、読み取れるページコンテンツとして配信された文とは同じではありません。その情報が通常のコンテンツにあるのか、埋め込みデータにしかないのか、ソース内のどこにもないのかを記録してください。

現在のページ読み込みに使われたレスポンスをより正確に確認するには、次の手順を行います。

1. ブラウザの開発者ツールを開き、Networkを選択します。
2. ページを再読み込みします。
3. 画像やスクリプトではなく、メインドキュメントのリクエストを選択します。
4. そのレスポンスとステータスを調べます。
5. そのレスポンス内で同じ情報を検索します。

これにより、開発者に引き継ぐための具体的な資料が得られます。「クローラーにはこれが読めない」と言う代わりに、「通常のブラウザ表示にはある互換性の段落が、メインドキュメントのレスポンスにはありません」と報告できます。

ソースの調査と次の確認はセットで行ってください。どちらか一方だけでは、情報の見え方に関するすべての疑問に答えられません。

JavaScriptを無効にして再読み込みする#

Chromeの開発者ツールでコマンドメニューを開き、 JavaScriptを無効にするを検索して選択します。開発者ツールを開いたままページを再読み込みしてください。ブラウザのバージョンによって異なるため、この項目がない場合は、同等のサイト設定を使ってください。

ページの読み込み後にJavaScriptを無効にするだけでは不十分です。再読み込みするまで、すでに挿入されたコンテンツが残る場合があります。

再読み込みしたページを訪問者の立場で読んでください。商品を特定し、想定される用途を理解し、重要な条件や注意事項を見つけられますか。記事では、主な説明を引き続き読めますか。関連リンクをたどれますか。

欠落している情報と表示の崩れを分けて記録してください。レイアウトが崩れていても仕様を読める場合と、見た目は整っていても仕様がない場合とでは、問題が異なります。

コンテンツの欠落と非表示も区別してください。テキストはレスポンスに存在していても、操作できなくなったアコーディオン内に隠れている場合があります。この場合に必要なのは、情報にアクセスできる代替表示であり、必ずしも別のコンテンツソースではありません。

終わったらJavaScriptを元に戻し、再読み込みしてください。1つの結果がストア全体に当てはまると思い込まず、サンプルに選んだ各テンプレートで比較を繰り返します。

観察結果を判断につなげる#

この判断表を使って、次に調べることを選んでください。これは対応の優先度を判断する枠組みであり、検索パフォーマンスを予測するものではありません。

観察結果	分かること	次の対応
主要な情報がレスポンスに含まれ、JavaScriptなしでも表示される	今回の確認では、その情報はスクリプトの実行に依存していない	アクセスルールとコンテンツの正確性を別途確認する
情報が通常のレンダリング表示にしか現れない	その情報の提供はブラウザの処理に依存している	担当するテーマまたはアプリの開発者に、初期レスポンスでの代替コンテンツの提供を依頼する
情報が埋め込みデータにしか存在しない	データは存在するが、読めるコンテンツとして提供されているとは確認できない	情報を読める要約として追加または復元する
テキストはソースにあるが、スクリプトなしではアコーディオンに隠れている	配信と表示は別である	重要な情報を読める代替表示を用意する
ページがエラーを返す、またはログインを要求する	公開コンテンツへのリクエストが想定どおり成功していない	レンダリングに取り組む前に、アクセスやレスポンスの動作を解決する
Googleのレンダリング表示に、ソースにはない情報が含まれる	Googleのテストでは、その情報がレンダリングされた	その結果をほかのクローラーにも当てはめない
記事本文は残るが、商品リンクが消える	記事から商品への導線が拡張機能に依存している	重要な説明とともに、リンク先へ移動できる通常のリンクを用意する

装飾的な機能よりも、商品の識別情報、仕様、条件や注意事項、リンク先の欠落を優先してください。動かないアニメーションと、欠落した安全上の制限事項を同じ優先度で扱うべきではありません。

症状だけでなく、コンテンツの依存関係を修正する#

欠落している各ブロックについて、担当箇所を特定してください。テーマ、記事本文、商品情報、ページビルダー、アプリのいずれかに由来している可能性があります。どのコンポーネントがデータを供給し、どのコンポーネントがそれを目に見えるコンテンツに変換しているのかを確認しましょう。

実装の依頼は、次のようにすると有用です。

「重要な情報の要約をページの初期レスポンスで提供し、その後JavaScriptで機能を拡張してください。意味を変えず、変動する情報については正とする情報源を1つに保ってください。」

こうすれば、開発者が適切な実装方法を選べる余地が残ります。実際の依存関係を特定する前に、テーマの変更を指定するのは避けてください。

商品ページでは、読める基本説明と主要な仕様を依頼してください。バリエーションの選択機能はインタラクティブなままでも構いませんが、基本情報の表示で、1つのバリエーションの寸法、価格、在庫・購入可否がすべての選択肢に当てはまるかのように示すべきではありません。

記事では、知識を伝える主な説明と、意味のある商品への言及を、配信されるコンテンツに残してください。おすすめウィジェットは説明を補うものであるべきで、該当商品に言及する唯一の場所にしてはいけません。

Googleは、すべてのボットがJavaScriptを実行するわけではないため、サーバーサイドレンダリングやプリレンダリングを有用な方法として推奨しています。これはレンダリングへの不要な依存を減らす根拠にはなりますが、ストアからすべてのスクリプトを削除する理由にはなりません。

2つの仮想例で考える#

寸法が仕様パネルにしか表示されない場合#

仮想例： バッグの商品ページで、アプリが動かすパネル内に寸法が表示されています。JavaScriptを無効にすると、商品タイトルと導入の説明は残りますが、寸法は消えます。メインレスポンスを検索すると、寸法は埋め込まれたアプリのデータ内にしか見つかりません。

診断は「商品ページが見えない」ではありません。より限定的な結論は、今回の確認では、寸法に読める基本表示がないということです。

実用的な修正依頼は、同じ管理済みの商品情報を使い、主な説明の横に寸法を含めることです。拡張パネルが引き続き役立つなら残してください。

受け入れ基準には、対象の情報を明記すべきです。寸法は、バリエーションに関する条件をすべて維持したうえで、初期レスポンスとスクリプトなしの表示に、読めるコンテンツとして現れる必要があります。その後、通常のパネルと基本表示が一致することを確認してください。

記事から商品へのリンク先が失われる場合#

仮想例： 交換用フィルターの選び方を説明する記事があります。本文はJavaScriptなしでも残りますが、対応商品のすべてのリンクはインタラクティブなカルーセルで提供されています。そのカルーセルがなければ、読者は移動先がないまま記事の最後に到達します。

解説記事はそのまま残し、互換性を説明している箇所に、リンク先が分かる商品リンクを追加してください。正確な互換性の案内を、汎用的な「今すぐ購入」リンクに置き換えないでください。

ClickFrom.AIは、対象となるShopifyの記事や、商品を中心に扱うブログコンテンツ向けに関連商品カードを提供しています。これらのカードを使う場合は、配信方法を推測するのではなく、実際の出力をレンダリングの確認対象に含めてください。最新の利用条件は /pricing で確認してください。

カードは、記事内の商品への言及を補完できます。ただし、クローラーがページにアクセスした証拠にはならず、欠落している主要情報の代わりにすべきでもありません。

アクセス制御とGoogleのレンダリングを別々に確認する#

公開ページがブロックされているためにレスポンスが不完全な場合は、コンテンツを書き直す前にその問題を解決してください。関連するrobots.txtのルールと、そのURLへのアクセスに影響する認証・検証の要求を確認しましょう。

この robots解析ツール は、robots.txtの確認に役立ちます。検索とトレーニングに関する希望は分けて扱ってください。OpenAIは、OAI-SearchBotとGPTBotの制御が独立していることを文書化しています。検索クローラーを許可することはアクセスの許可であり、結果への掲載を約束するものではありません。

Googleの クローラーの概要 ↗ でも、一般的なクローラー、特殊なケースのクローラー、ユーザーが開始するフェッチャーを区別しています。すべてのクライアントが1つのアクセスパターンに従うとは考えないでください。

Googleに関しては、JavaScriptのドキュメントで、レンダリングされたコンテンツを調査する際に、URL検査やリッチリザルトテストでレンダリング済みHTMLを調べることを推奨しています。そこにある重要な情報を、自分のブラウザで観察した内容と比較してください。

Googleのレンダリング済みHTMLに仕様が含まれている場合は、その限定的な結果を記録してください。それで、別のサービスがページをどう扱うかが分かるわけではありません。

同様に、想定外のステータスコードやインデックス登録の指示は別途調査してください。Googleは、初期のnoindex指示によってレンダリングが行われなくなる可能性があると警告しています。そのため、JavaScriptでその指示を削除する方法に頼っても、意図どおりに動作しない場合があります。

すべてのテンプレートでこのワークシートを再利用する#

次のワークシートを保守用のメモにコピーしてください。クローラーの動作に関する推測ではなく、観察した事実で埋めてください。

ページの記録#

• 公開URL：
• ページの種類とテンプレート：
• 担当するテーマコンポーネントまたはアプリ：
• 言語、通貨、選択したバリエーション：
• ログアウト状態でのアクセス確認：
• メインドキュメントのステータス：
• 含まれているべき重要な情報：
• 日付と確認者：

比較の記録#

重要な情報ごとに、次の項目を記録してください。

• 初期レスポンスに読めるコンテンツとして存在するか：
• 埋め込みデータ内にしか存在しないか：
• JavaScriptなしで再読み込みした後に読めるか：
• 通常どおりレンダリングされたページで読めるか：
• 関連するリンク先へのリンクが利用できるか：
• 相違点、条件や注意事項：
• 確認した場合は、Google固有のレンダリング結果：

修正と受け入れのチェックリスト#

• 欠落している情報ごとに、担当するコンポーネントを特定する。
• アクセスの失敗とレンダリングへの依存を区別する。
• 重要なコンテンツについて、初期レスポンスでの代替コンテンツの提供を依頼する。
• 変動する情報は、正とする情報源に紐づけておく。
• バリエーション、通貨、在庫・購入可否に関する条件を維持する。
• 通常のリンクで重要なリンク先に移動できるようにする。
• 修正後に初期レスポンスを再確認する。
• スクリプトなしの表示と通常のブラウザ表示の両方を再確認する。
• 同じ情報を複数箇所に表示している場合は、内容が一致することを確認する。
• 完了後にブラウザのJavaScript設定を元に戻す。
• すべてのクローラーから見えると断言せず、未解決の制限事項を記録する。

成功の基準を限定的かつ実用的に定める#

レンダリングの確認が成功したと言えるのは、証拠が得られたときです。重要な情報が配信されたドキュメントに存在し、JavaScriptなしでも理解でき、拡張後のページと一致していること。重要なリンクに利用可能なリンク先があり、アクセス制御が意図した方針を反映していることです。

テーマの変更、ページビルダーの更新、アプリの置き換えによって、これらの情報の配信方法が変わったときは、関連する確認を繰り返してください。

目標は、どの環境でもストアを同じ見た目にすることではありません。商品や記事の理解が、インターフェースの実行に不必要に依存しないようにすることです。これは、トラフィック、順位、おすすめへの掲載を約束することなく、検証できる実用的な改善です。