display:noneは隠しテキスト違反？安全なUIとの境界と点検法

FAQ をアコーディオンにしたい。スマホでは長い説明文を畳みたい。でも CSS で隠したら「隠しテキスト」と見なされて、順位を落とされるのではないか。——デザインの相談で、よく止まるところです。

先に答えを書きます。CSS で非表示にしていること自体は、違反の条件ではありません。Google がスパムとして挙げているのは、検索エンジンを操作するためだけに置かれ、人の訪問者には簡単に見えないようにした文字やリンクです。分かれ目は「display:none を書いたかどうか」ではなく、「その文字を、人も読める状態にしているかどうか」です。

Googleが「隠しテキスト」と呼んでいるもの

Google のスパムポリシーには、隠しテキストとリンクの不正使用という項目があります。そこでは、検索エンジンを操作することだけを目的に、人の訪問者には簡単に見えない形で文字やリンクを置くことを指しています。

例として挙がっているのは次の4つです。

• 白い背景に白い文字を置く
• 画像の後ろに文字を隠す
• CSS で文字を画面の外に配置する
• 文字の大きさ、または不透明度（どれだけ透けずに見えるか）を0にする

並べてみると、どれも訪問者の目には入りにくい置き方です。ページの持ち主が「見せる気のない文字」を、検索エンジンにだけ読ませようとしている形だと考えると分かりやすいでしょう。

同じページは、こうした違反を自動の仕組みと、必要に応じた人の確認の両方で見つけていると説明しています。人の確認は、手動による対策（Google の担当者が違反を確認したときに取る措置）につながることがあります。

アコーディオンとタブは、この定義のどこに入るか

では、FAQ のアコーディオンはどうでしょう。

最初は畳まれていて、文字は画面に出ていません。ただ、見出しをタップすれば開きます。訪問者は自分の意思で、その文字を読めます。

スパムポリシーの定義は「人の訪問者には簡単に見えないように置く」ことでした。タップひとつで誰でも読める折りたたみは、この定義の外側にあると読むのが自然です。タブ切り替えや「続きを読む」ボタンも、同じ考え方で整理できます。

スマホでの出し分けも似ています。手動による対策のヘルプには、デバイスによって少し違う内容を見せることは多くの場合問題ない、という記述があります。スマホの狭い画面に合わせて、画像などの一部を変える必要が出ることもある、という例が添えられています。

ただし、ここには落とし穴があります。違反かどうかと、検索で評価されるかどうかは、別の問題です。折りたたんだ中身が Google 側でちゃんと読めているかは、違反の話とは切り分けて確かめる必要があります。この点は「アコーディオン内のテキストはインデックスされる？判定手順」で詳しく扱っています。

安全なUIか、違反か：5項目の判定表

自社ページの非表示箇所を、次の表に当てはめてみてください。左の問いに「はい」が続くほど、正当な UI の側に寄ります。1つでも右の列に当てはまるなら、直す対象です。

2〜4は、Google が挙げた例を問いの形にしたものです。1と5は、スパムポリシーの「人の訪問者には簡単に見えない」「検索エンジンを操作するためだけ」という言い方を、自社で判断しやすいように置き換えた補助線で、公式の基準そのものではありません。ただ、話題と関係のない言葉が並んでいる時点で、「人に読ませるため」という説明は立ちにくくなります。

自社ページで点検する5ステップ

ここからは、実際の点検手順です。FAQ をアコーディオンにした「よくある質問」ページを例に、順番に通してみます。

1. 非表示にしている箇所を書き出す アコーディオン、タブ、スマホだけで畳んでいる説明、フッターなど。制作会社や開発担当に「CSS で非表示にしている要素はどこか」と聞くのが早道です。
2. ブラウザで全選択して、見えない文字を探す ページを開いて Ctrl + A（Mac は Command + A）を押します。手動による対策のヘルプも、背景と同じような色の文字はページ全体を選択すると見つけやすい、と案内しています。選択の色がついた場所に、読めない文字が浮かび上がらないかを見ます。
3. 判定表の1〜5に当てはめる 手順1で書き出した箇所を、1つずつ表で確かめます。アコーディオンなら、実際に開いて文字が読めるかまで見ます。
4. URL 検査ツールで、Google 側の見え方を確かめる Search Console の URL 検査で「公開 URL をテスト」を実行します。テストが成功すると、スクリーンショットを確認できます。さらに「クロール済みのページを表示」から、返された HTML も見られます。畳んだ中身の文字が HTML に含まれているかを確認します。
5. 気になる箇所を直し、記録を残す 違反の例に近い箇所は、消すか、人にも読める見た目に直します。ヘルプにある方針も同じで、隠した文字は消すか、検索エンジンのクローラーと人の訪問者が同じように見つけられるよう見た目を直す、とされています。いつ・どこを直したかをメモしておくと、後で順位が動いたときの切り分けに使えます。

例：FAQページで通してみると

「よくある質問」ページに、質問が10個並んでいるとします。回答はすべてアコーディオンで畳まれています。

手順1で書き出すと、非表示の箇所は2種類ありました。10個の回答と、ページ最下部の見えない一文です。最下部の一文は、何年も前のリニューアル時に誰かが入れた「地域名＋サービス名」の羅列でした。

手順2の全選択で、その一文が浮かび上がります。背景と同じ白い文字でした。

手順3の判定表に当てはめます。10個の回答は、タップで開いて普通に読めるので1〜4が正当な側。内容も質問への答えなので5も問題ありません。一方、最下部の一文は1（操作しても出ない）と2（背景と同色）に当てはまり、5（話題と合わないキーワードの羅列）にも当てはまります。直す対象はこちらです。

手順4の URL 検査では、回答の文字が HTML に含まれていることを確認できました。畳んでいても、中身は Google 側に届いています。

結論として、アコーディオンはそのままでよく、消すべきは最下部の一文だけでした。表の1と2が、まさにこのケースを拾っています。

よくある誤解：URL検査が通れば違反ではない？

URL 検査の結果が問題なしでも、それで「違反していない」とは言えません。

URL 検査ツールのヘルプには、このツールは手動による対策を考慮しない、と書かれています。つまり URL 検査が確かめているのは、主に Google がそのページを取得して読めるかどうかです。スパムポリシーに合っているかの判定ではありません。

だから役割を分けて使います。違反の点検は、判定表と全選択（手順2・3）で行う。中身が Google に届いているかの確認は、URL 検査（手順4）で行う。この2つを混ぜないことが、点検を空振りさせないコツです。

もし手動による対策の通知が来たら

Search Console の「手動による対策」レポートに、隠しテキストやキーワードの詰め込みに関する項目が出ることがあります。

その場合の流れは、ヘルプに沿うと次のようになります。まず、隠しテキストとキーワードの詰め込みについてのスパムポリシーを読み直します。次に、上の5ステップと同じ要領で、CSS の見た目や配置で隠した文字を探して直します。違反がなくなったと確信できたら、レポートから審査をリクエストします。

審査リクエストには、削除した問題のある内容と、追加した良い内容の例を書くよう案内されています。手順5で残した修正の記録が、ここでそのまま使えます。リクエストを送ったあとは、結果が出るまで待つことになります。

まとめると、見るべきは「人が読めるか」

display:none や折りたたみを使うこと自体を恐れる必要はありません。問われるのは、その文字が人の訪問者にも読める形で置かれているかどうかです。

まずは自社の「よくある質問」ページで、全選択を一度試してみてください。見えない文字が浮かばなければ、判定表の2〜4は片づきます。残りは、畳んだ中身が Google に届いているかの確認です。

画像の中に文字を入れている場合は、別の理由で文字が読まれないことがあります。「重要なテキストを画像にすると何が起きるか」もあわせて確認してください。