アコーディオン内のテキストはインデックスされる？判定手順

スマホの画面が長くなるので、よくある質問をアコーディオンにまとめた。タブを切り替えないと出てこない説明もある。あの中の文字は、Googleに読まれているのでしょうか。

折りたたんだかどうかを見ていても、そこは分かりません。先に確かめられるのは、レンダリング（プログラムを実行して画面の形にすること）が終わったあとのHTMLに、その文字が入っているかどうかです。ここは推測しなくても、その場で確認できます。

Googleの公式ドキュメント「遅延読み込みコンテンツの修正」には、コンテンツを読み込む方法として、ブラウザ組み込みの読み込み、IntersectionObserver、JavaScriptライブラリが挙げられています。そのうえで、こう書かれています。これらの方法は、スクロールやクリックといったユーザー操作に頼ってコンテンツを読み込むことはしない、それが重要なのは Google 検索があなたのページを操作しないからだ、と。

ここが線引きです。

心配すべきは「折りたたみ」ではなく「読み込みの引き金」

同じ「折りたたみ」でも、作りは二通りあります。

ひとつは、テキストがHTMLに最初から書き出されていて、開閉は表示の切り替えだけをしているもの。もうひとつは、クリックされた瞬間に別のところへ取りに行き、返ってきた内容をその場に差し込むものです。見た目は、ほとんど区別がつきません。同じアコーディオンに見えます。

でも、引き金がまるで違う。

前者は、誰も触らなくてもHTMLの中に文字があります。後者は、クリックという操作が起きるまで、そこには何もありません。公式ドキュメントが「ユーザー操作に頼らない方法を使うことが重要」と書いているのは、まさにこの後者のような作りを念頭に置いた話です。Google 検索はページを操作しない、と明記されている以上、クリック待ちの読み込みは前提が崩れます。

なお、HTMLに最初から入っていれば、少なくとも「操作しないと読み込まれない」という条件には当たりません。ただし、そこから先——折りたたんだテキストが、開いた状態のテキストと比べてどう扱われるのか——について、ここで見た範囲の記述に踏み込んだ説明は出てきません。分からないことは、分からないままにしておきます。判断材料になるのは、HTMLに入っているかどうかまでです。

「隠しテキスト」と言われないか、という不安について

折りたたみを避ける理由として、よく挙がるのがこれです。隠していると見なされるのではないか、と。

Googleのスパムポリシーのページには、隠しリンクや隠しテキストについての記述があります。そこで説明されているのは、検索エンジンには見えるけれど、自分やユーザーには見つけにくいコンテンツをサイトに追加するという形です。CSSやHTMLを使って隠しリンクや隠しテキストをページに追加する、あるいはクローキングのようなもっと複雑な変更を加える、という例が挙げられています。

読み比べると、向きが違うことに気づきます。

ここで例に挙がっているのは「機械には見えて、人には見つけにくい」形です。一方、アコーディオンやタブは、開けば読者がそのまま読めます。少なくとも、記述されている形とは向きが逆だ、とは言えそうです。ただし、これはあくまで書かれている記述との読み比べであって、「だから折りたたみは安全だ」とお墨付きが出ているわけではありません。断定はしません。

不安を消す方法は、解釈を積み重ねることではないはずです。実際にHTMLを見に行けば済みます。

レンダリング後のHTMLを確認する6ステップ

公式ドキュメントは、確認のやり方まで書いています。遅延読み込みのページには、実装したあとは正しく動くか確かめること、Search ConsoleのURL検査ツールですべてのコンテンツが読み込まれたかを確認できること、レンダリング後のHTMLの中に自分のコンテンツが入っているかを探して確かめること、と案内されています。

その手順を、折りたたみの点検用に並べ直すと次のようになります。

1. 点検するURLを1本決める。サイト全体をいきなり見ないでください。折りたたみの中に、検索から来た人に読ませたい説明が入っているページを1本選びます。よくある質問、料金の但し書き、仕様の詳細あたりが典型です。
2. 折りたたみの中から、一文をそのまま控える。あとで検索するための目印です。「送料無料の条件」のような要約ではなく、実際に画面に出ている文をそのままコピーします。言い換えると見つからないので、一字一句そろえてください。
3. Search ConsoleのURL検査に、そのURLを入れる。ヘルプでは、インデックスに登録された状態の結果と、ライブテストの結果を、ページ上の切り替えで行き来できると説明されています。今の実装を見たいので、ライブテスト側で確認します。再実行したいときは、テストページの再実行ボタンを押します。
4. 返ってきたHTMLを開く。ヘルプによると、「クロールされたページを表示」を押すと、リクエストとレスポンス、そして返ってきたHTMLの詳細を見られます。もしこのリンクが押せない状態になっていたら、ページの取得自体で問題が起きています。ボタンにカーソルを合わせると理由が出るので、先にそちらを読みます。
5. 控えておいた一文を、そのHTMLの中で検索する。ブラウザの検索機能で構いません。ここで出てくれば、少なくとも「操作しないと読み込まれない」状態ではありません。
6. 出てこなければ、引き金を疑う。折りたたみが悪いのではなく、クリックされるまで取りに行かない作りになっている可能性があります。開いた状態でHTMLに書き出しておいて、閉じて見せるのは表示の切り替えだけ、という順序に変えられないかを実装担当と相談します。

同じやり方は、動画についても案内されています。ヘルプには、そのページが1本の動画を中心に構成されているなら、URL検査ツールでレンダリング後のHTMLに動画が出ているかを確かめること、そして動画のコンテナをHTMLのより上の位置に動かしてみること、と書かれています。確認の作法は要素が変わっても同じ、ということです。

実際に1本通してみる

たとえば、配送に関するよくある質問を10問、アコーディオンで並べているページがあるとします。狙っているのは「送料 無料 条件」のような調べもののクエリで、答えは7問目の中にあります。

手順1で、このURLを選びます。手順2で、7問目を開いて出てくる「税込5,000円以上のご注文で送料が無料になります」という一文をそのまま控えます。ここで「送料無料は5000円から」と自分の言葉に直してしまうと、あとの検索が空振りします。控えるのは画面の文字そのままです。

手順3でURL検査にかけ、ライブテストを実行します。手順4で「クロールされたページを表示」からHTMLを開きます。手順5で、控えた一文を検索します。

ここで結果は二つに分かれます。

見つかった場合。折りたたんでいること自体は、確認できた範囲では問題の候補から外れます。次に見るべきは、その質問が本当に7問目でいいのか、つまり読者にとっての優先順位のほうです。見つからなかった場合。犯人は折りたたみではなく、クリックされてから質問の中身を取りに行く実装です。10問ぶんのテキストを最初からHTMLに出す形に変えられるか、そこを検討します。

どちらに転んでも、次の一手が決まります。これが、見た目をにらんで悩むのとの違いです。

実装パターン別の判定表

さきほどの手順5の結果は、だいたい作りで決まります。あたりを付けるために使ってください。

最後の行だけ、対処が少し具体的に書かれています。公式ドキュメントは無限スクロールについて、コンテンツのかたまりごとに固有で永続的なURL（例として ?page=12 が挙げられています）が必要であり、それらのURLへ順にリンクすること、そしてブラウザに表示されている現在のURLを更新することに触れています。ページ送りの形に寄せる、という発想です。

上から3行目の「クリックで取りに行く」が、いちばん多い落とし穴です。さきほどのよくある質問の例で、7問目が見つからなかったのは、まさにこの行に当たります。

つまずきやすいところ

「クロールされたページを表示」が押せない。 手順4で触れたとおり、ページの取得そのものに問題が起きているサインです。折りたたみの検証に進む前に、まずそちらを解消します。

JavaScriptやデータの取得先を、robots.txtでふさいでいる。 JavaScript SEOの基本のドキュメントには、GooglebotがHTTPリクエストを行ってクロールキューからURLを取得するとき、まずクロールを許可しているかを確認する、robots.txtを読んでURLが許可されていない印になっていれば、そのURLへのHTTPリクエストを行わずスキップする、と書かれています。URL検査のヘルプにも「クロール可能か」という項目があり、robots.txtのルールでブロックしているかどうかを示すと説明されています。ふさいだ覚えがなくても、/api/ や /assets/ をまとめて禁止していることがあります。

JavaScriptで組み立てているから駄目だ、と決めつける。 同じドキュメントでは、GoogleがJavaScriptをクロール・レンダリング・インデックスという流れで処理することが説明されています。組み立て方そのものではなく、操作を待っているかどうかが問題です。ここを混同すると、直さなくていいものを直すことになります。

公開前のチェックリスト

新しく折りたたみを入れるとき、または既存のものを触るときに使ってください。

• 折りたたみの中に、検索から来た人に読ませたい説明が入っているか（入っていないなら、この点検は不要です）
• その説明の一文が、レンダリング後のHTMLで見つかるか
• クリックやスクロールが、読み込みの引き金になっていないか
• 中身の取得先が、robots.txtでふさがれていないか
• 「クロールされたページを表示」が正常に開けるか
• 実装を変えたあと、ライブテストを再実行して確かめたか

上から2つめが本体で、残りはそれが空振りしたときの切り分けです。

折りたたみは、スマホの画面を読みやすくするための普通の作りです。避ける理由を探すより、HTMLに出ているかを一度確かめてしまうほうが早い。確かめ方は、上の6ステップがそのまま使えます。

読み込みの引き金という観点は、画像でも同じように効いてきます。画像側の判断は画像の遅延読み込みとSEOで扱っています。折りたたみ以外の理由でページが登録されないときは、ページがインデックスされない原因の切り分けから順に見ていくと早いはずです。