タブやアコーディオン内の情報は検索に伝わる？AI検索に備えるJavaScript表示の確認手順

タブの見た目ではなく、レンダリング後の内容を確認する

Google検索セントラルの「JavaScript SEOの基本を理解する」では、JavaScriptページをクロール、レンダリング、インデックス登録の段階で処理し、レンダリングされたHTMLをインデックス登録に使うと説明しています。

同資料は、Googleが認識できるのはレンダリングされたHTMLに表示されるコンテンツであり、そこに存在しない内容はインデックスに登録できないと案内しています。また、robots.txtでブロックされたJavaScriptはレンダリングされません。

そのため、「アコーディオンを使っているから検索に不利」「画面上で開けるから必ず認識される」と一律に判断することはできません。実務上は、ブラウザで見える操作結果だけでなく、Googleが取得したレンダリング済みHTMLに重要な文章が含まれるかを確認する必要があります。

Google検索のAI機能に関する公式資料でも、AIによる概要やAIモードに特別な最適化は不要で、従来のSEOの基本が引き続き有効とされています。重要なコンテンツをテキスト形式で提示することも基本項目に含まれます。

3つの表示状態を分けて考える

ここからはAI BRAND CHECK運営者による実務上の整理です。タブやアコーディオンを、次の3つに分けて確認すると原因を切り分けやすくなります。

1. 文章は読み込まれており、見た目だけ閉じている

ページを開いた時点で文章がレンダリング済みHTMLにあり、ボタンは表示・非表示だけを切り替える状態です。この場合は「閉じている」という見た目だけで問題と決めつけず、レンダリング結果と操作性を確認します。

2. 画面内へ近づくと自動で読み込まれる

Googleの遅延読み込みに関する公式資料では、関連コンテンツをビューポートに表示されるタイミングで読み込む方法として、IntersectionObserver APIなどを挙げています。重要なのは、読み込みにクリックやスクロールなどのユーザー操作を必要としない実装にすることです。

3. クリック後に初めて通信して文章を取得する

ボタンを押した後にAPIなどへ通信し、その時点で初めて文章を追加する状態です。Googleの公式資料では、Google検索はページ上で操作を行わないと説明されています。重要なサービス条件をこの方法だけで提供している場合は、操作しない状態のレンダリング済みHTMLに内容が残らない可能性があります。

これらを踏まえ、本記事では3つ目の状態から優先して見直すことを推奨します。ただし、個別ページが実際に認識されているかは、実装方法の名称ではなく検査結果で判断してください。

先に「隠れて困る重要情報」を決める

すべての折りたたみ要素を一度に作り直す必要はありません。実務上は、読者がサービスを選ぶために必要な情報から対象を絞ると進めやすくなります。

• サービスや商品の名称と内容
• 対象者、対応地域、利用条件
• 料金の考え方、追加費用、適用条件
• 営業時間、予約方法、申込手順
• 提供できない範囲、例外、変更情報
• 問い合わせ前に確認してほしい注意事項

これらを踏まえ、本記事ではページ冒頭または該当セクションに要点を通常の文章で示し、詳細をタブやアコーディオンで補足する構成を推奨します。情報量を減らすのではなく、重要部分への到達を操作だけに依存させない考え方です。

小規模事業者は6段階で確認する

制作会社へ依頼する場合も、次の順番で確認対象を共有すると、見た目の相談と検索向けの技術確認を分けやすくなります。

1. 対象を決める：料金、サービス条件、対応範囲など重要情報を含むタブやアコーディオンを一覧にします。
2. 操作前後を比べる：ページを開いた直後とクリック後で、文章やリンクが新たに追加されるか確認します。
3. 通信の有無を確認する：クリック時に外部ファイルやAPIから内容を取得している場合は、制作担当者へ取得タイミングを確認します。
4. 公開URLをテストする：Search ConsoleのURL検査で公開URLテストを実行します。
5. レンダリング結果を探す：クロール済みページのHTML内で、重要な固有語や条件文が確認できるか調べます。
6. 修正後に再確認する：見える画面だけでなく、レンダリング済みHTMLにも同じ要点が含まれるか照合します。

Google Search ConsoleのURL検査ツールに関する公式ヘルプでは、公開URLテストでリアルタイムのURLを取得し、クロール済みページからスクリーンショットやHTTPレスポンスなどを確認できると説明しています。ライブテストにはプロパティごとの1日あたり上限があり、重複ページなどインデックス登録時のすべての問題を検査するものではありません。

Googleの遅延読み込みに関する公式資料も、URL検査ツールでレンダリングされたHTMLを確認し、対象コンテンツを探す方法を案内しています。テストに合格した表示だけで判断せず、必要な文章そのものがHTML内にあるかを確認するのがポイントです。

修正するときの優先順位

実務上は、次の優先順位で制作担当者と相談すると整理しやすくなります。

1. 重要情報の要点を、操作前から読める本文に置く
2. 詳細を閉じる場合も、文章自体は初回表示時に取得できるようにする
3. 必要なリンクは、クロール可能な通常のリンクとして用意する
4. JavaScriptやCSSがrobots.txtなどで取得を妨げられていないか確認する
5. ページ速度と操作性を確認し、すべてを常時展開する以外の方法も検討する

GoogleのJavaScript SEO資料では、GoogleはJavaScriptを実行する一方、JavaScriptを実行できないbotもあるため、サーバー側レンダリングやプリレンダリングも有効な方法として検討できると説明しています。これを踏まえ、本記事では特に重要な文章を、可能な範囲で最初のHTMLレスポンスまたはユーザー操作なしのレンダリング結果に含める方法を推奨します。

よくある注意点

ブラウザで開けたことだけで完了とする

人がクリックして読めても、操作前のレンダリング結果に文章がない場合があります。ブラウザ表示とURL検査のレンダリング済みHTMLを分けて確認します。

すべてのアコーディオンを問題と判断する

表示だけを閉じ、文章はすでに読み込まれている実装もあります。部品名や見た目ではなく、内容がいつ生成されるかを確認してください。

ページのソースだけを見て判断する

JavaScriptで生成される文章は、最初のHTMLソースに含まれず、レンダリング後に追加されることがあります。初期ソースだけでなく、レンダリング済みHTMLも確認します。

AI検索向けの特別な設定を探す

Googleの公式資料では、AI機能向けに特別なファイルやschema.orgマークアップを追加する必要はないと説明されています。まず、重要な文章が通常の検索で取得・レンダリング・インデックス登録できる状態かを確認します。

まとめ：クリック前のレンダリング結果から確認する

タブやアコーディオン内の情報を確認するときは、見た目の開閉よりも、文章が読み込まれるタイミングを確認します。

1. 重要情報を含む折りたたみ要素を特定する
2. 表示切替だけか、クリック後のデータ取得かを分ける
3. Search Consoleでレンダリング済みHTMLを確認する
4. 要点を操作前から読めるテキストとして用意する
5. 修正後も画面とレンダリング結果を照合する

この順番はAI BRAND CHECK運営者による実務上の提案です。JavaScript表示を変更したことで、検索順位、AIでの表示、引用、推薦、回答修正、アクセス、問い合わせ、売上が改善することを保証するものではありません。