SEO display noneはSEOスパムになるのか？

display noneはSEOスパムになるのか？

よくWEBサイトを構築する際に、ソース上にはタグを表記していても表面上には見せないようにする部分が出てきます。

この時よく使われるのがCSSのdisplay: none;（以下「display none」とします）ですよね。

この「display none」が設定された箇所は、コンテンツ自体は存在しているにもかかわらずユーザーの目には見えなくなります。

これを利用する際に懸念されるのが、スパムと判断されGoogleからペナルティを受けるのでは？という件ですね。

CSSで使う「display none」とは？

「display none」は目的に応じてコンテンツを非表示にできるCSS（スタイルシート）のプロパティのことです。

例えばですが、毎年12月に告知するクリスマスイベントのためWEBサイト上部に特設バナーを利用しているとしましょう。

その場合、開催前のだいたい10月頃からは告知を出してPRしますよね。

その特設バナー（imgタグなど）に「display none」を設定していれば、10月から12月以外の月はイベントの告知の必要がないので、バナーを非表示にできます。

htmlソース上は常に存在する

この時、htmlソース上にはきちんと特設バナーのタグはあります。

不要となる時期はコンテンツを非表示にする事で、ユーザーにとってタイムリーでない情報は隠しておく事ができるのですね。

しかも毎回毎回タグを設置する必要がなく、CSSの「display none」を解除するだけですぐに表示されるようになります。

仮に複数個所にバナーが設定されていたとしても、全て一度に表示させる事ができる便利なところもあります。

CSSとhtmlの記述方法

cssで使われるdisplay:noneは以下のように記述されます。

.hide { display: none; }

このように記述した場合、「hide」というクラスを持つ要素は全て非表示になります。hideでなくても何でもOKです。

<div class="hide"> <img src="images/banner_xmas.png" alt="クリスマスバナー"> </div>

このように「display none」は便利なCSSなのです。

それではこれがGoogleからスパム行為とみなされ、SEO的に悪影響を与えるのでしょうか。

Googleは常にWEBサイトを評価診断している

Googleの検索エンジンは常日頃より「検索ユーザーの役に立つサイト」を表示させることを第一の目標にしています。

検索したのに有益な情報が得られないWEBサイトばかり並んでいては、Googleの検索を信用してもらえませんよね。

そのためGoogleはユーザーの利益につなげるために、いろいろな観点からサイトを診断し、評価を付けています。

中でも「ユーザーにとって価値ある情報を提供するWEBサイト」に高い評価を付ける傾向があります。

ユーザーが見えるコンテンツとGoogleが見えるコンテンツ

ポイントになるのが、実質的なページコンテンツ量への評価と、ユーザーが目にできるコンテンツへの評価です。

両者は明確に分かれているのです。

基本的には「検索ユーザーに見えている情報のみ」でサイトを評価して、適切な検索結果を提示しているとされています。

見えていない情報は評価にはふくまれません。ユーザーにとって「無いものと同じ」だからです。

この時「ユーザーとGoogleが把握できる実質コンテンツ量の差が大きすぎるサイト」に対しては、SEOスパムと判定されるのではないでしょうか。

検索クローラーにはどう見えてるの？

「display none」を使っているWEBサイトをGoogleクローラーが巡回・診断をした場合、どのように判断しているのでしょう。

そもそも「display none」というのは、要素自体を非表示にするものであって削除している訳ではありません。

当然CSSプロパティの制御も把握している訳ですから、Googleは「この要素はdisplay:noneで隠されてる」とすぐにわかります。

実際に非表示の内容も認識している

実際に「display none」で隠したコンテンツ部分であっても検索の候補には挙がります。

きちんと検索クローラーには認識されていて、インデックスされているのですね。

試しに非表示の部分を作って、Googleにクロール読み込ませた後にテキスト完全一致で検索して見ましょう。

（site:ドメイン "テキスト"）で検索できます。

インデックスはされても評価対象にはならない

基本的にはGoogleは、ユーザーの目に留まらないコンテンツはインデックスはされても、評価自体はしないとしています。

アナウンスとして「display noneは、より低くランキング評価されてしまう」とGoogleは明言しています。

つまり隠せば隠すほどコンテンツの質が低くなり、サイト自体の評価も下がるという事を意味しています。

隠しコンテンツについて

これまで一般的に「隠しコンテンツ」というのは、ユーザーの目に止まらないようにしながらコンテンツを増やす事とされていました。

例えばテキストやリンクの文字サイズを極端に小さくしたり、文字の色を背景と同じにするなどする手段ですね。

これに対してGoogleはペナルティを課すと明言しているため、隠しコンテンツはSEO対策としてはかなりマイナスな手になるというのが通説です。

「display none」は隠しコンテンツになるか

問題は今回の「display none」を使うことで、その要素が隠しコンテンツだと見なされてしまう可能性があるかどうかですね。

先ほど述べたの特設バナーを「display none」で非表示にする事は、ユーザーには見えない隠しコンテンツ（テキスト）になります。

この時ユーザーに見えないようにするのは、「ユーザーのため」におこなっている事です。ユーザーに時期的にマッチしないものを隠すためですよね

それに対して文字サイズや色を調整した「隠しコンテンツ」は、「Googleに見せるため」のものです。ユーザーではありません。

「誰のために隠している」のか、これがペナルティが課せられるかどうかの境でしょう。

クローキングサイトの発生と取り締まり

クローキングは、Googleペナルティにつながるスパム行為とされています。

これは一般的に「訪問ユーザーには見せて、Google等の検索側には見せないコンテンツ」を指します。

つまり「display none」の逆ですね

例えばユーザーには「A」のコンテンツを見せながら、Googlebotには全く違う「B」コンテンツを見せるなどして、操作しようとする行為がそれにあたります。

ユーザーにだけ見えるコンテンツ生成はクローキング判定の危険

Ajaxなどで非同期のコンテンツを使い、ユーザーによるボタン操作などでコンテンツを表示させたり非表示にさせたりするWEBサイトの場合、Googleはコンテンツを把握することができない場合があります。

これを利用すると、ユーザーに見せるコンテンツとGooglebotに見せるコンテンツを分ける事ができ、表示操作につながるのです。

※Ajaxの非同期コンテンツは、htmlソース上にコンテンツが表示されずにクローラーに把握されないものがあります。

この場合、Googleにクローキングと判定されペナルティを受ける危険があります。

犯罪と取り締まりのイタチごっこ

こういった違法でグレーなWEBサイトが非常に多いのも現実です。WEB上の犯罪が多くなれば取締も強化されなければなりません。

いま現在も、Googleは常にクローキングを行うスパムサイトへの取り締まりを強化している状況なので、敏感になっているのです。

「display none」を正しく使おう

不要なものを隠す使い方であればOK

ここで断言させて頂きますが「display none」を正しく使う場合、「ユーザーにとって不要なものを隠す」使い方であれば問題はありません。

ユーザーにとって有益であれば、スパム扱いになることもペナルティを受けることも無いのです。

意識しなければならないのは、ユーザビリティー向上のためにdisplay noneを使用しているのかどうかです。

ですのでGoogleのために見せる様な「display none」の設置はしないようにしましょう。

価値のあるコンテンツは表に出そう

そのコンテンツやテキストなどが「検索ユーザーにとって価値のあるもの」であるならば、多少面倒でも堂々と表面に出しましょう。

Googleは先述の通り、検索ユーザーに見えない部分については、知ってても評価することはありません。

先ほども言いましたが、アコーディオンメニューを利用したりタブメニューなどを利用してコンテンツを隠した場合、Googleは「初期状態でユーザーに見えていないものを検索エンジンは無視する」としています。

コンテンツを隠す事に意味はない時代

せっかく検索ユーザーのために用意したオシャレなコンテンツなのに、隠してしまう事で検索エンジンに無視されてしまうのであれば本末転倒ですよね。

ですので、あえてコンテンツをタブ等で分ける特別な理由が無いのであれば、それぞれ別ページにして全て表示させて良いのではないでしょうか。

現在は、メニューや項目を隠す事はあってもコンテンツを隠すことに意味はない時代です。

なのでどんどん見せていきましょう。

重要なコンテンツなのであれば、ユーザーとGoogleのどちらにも見えるようにするべきです。

レスポンシブデザインなら普通に使用

PCとスマホ一体型レイアウトであるレスポンシブデザインを採用する場合、この「display none」はよく使われると思います。

当然使っていいのです。

例えばスマホサイトで、画面下部分に電話番号をタップできる固定フッターを設置したりしますよね。

その場合パソコンサイトでは当然「display none」で見えなくしておかなければなりません。

これもGoogleのためでなくユーザーのためです。ですので何ら使って問題は無いと言えますね。

「display none」と「visibly hidden」の違い

同じようにコンテンツを見えなくする要素の中に、visibly: hidden;プロパティ（以下「visibly hidden」）があります。

2つには大きな使い方の違いがありますが「見えなくなる」という意味では同じです。

「visibility hidden」の見え方

「visibility hidden」は要素を非表示にするだけなので、下の例の通り要素の存在は残り見えなくなります。

visibility使用前

visibility使用後（testBに適用）

適用後のhtmlソースとCSS

##html <div class="row"> <div class="col-sm-4"> <div class="p-a20 bg-primary"> testA </div> </div> <div class="col-sm-4 vihi"> <div class="p-a20 bg-primary"> testB </div> </div> <div class="col-sm-4"> <div class="p-a20 bg-primary"> testC </div> </div> </div> ##CSS .vihi{ visibility: hidden; } .vihi .vihi-on{ visibility: visible; color: #000; }

「visibility hidden」の子要素

また「visibility hidden」は親要素の影響を受けず、子要素を表示することができます。

下のように親要素に「visibility hidden」を設定して、子要素にvisibility:visibleを指定したとします。

その場合親要素だけが非表示になり、子要素は表示されたままになります。

親要素が見えなくても、子要素がみえるので親要素の背景（グリーン）が見えています。

「display none」の見え方

それに対して「display none」は要素を丸ごと消してしまいます。

下の通り要素が無くなったその分次の要素が敷き詰めてきます。

display使用前

display使用後（testBに適用）

適用後のhtmlソースとCSS

##html <div class="row"> <div class="col-sm-4"> <div class="p-a20 bg-primary"> testA </div> </div> <div class="col-sm-4 hide"> <div class="p-a20 bg-primary"> testB </div> </div> <div class="col-sm-4"> <div class="p-a20 bg-primary"> testC </div> </div> </div> ##CSS .hide{ display: none; } .hide .hide-on{ display: block; color: #000; }

ですので「display none」を使用して表示・非表示を切り替える場合はレイアウトが少し変わる場合があります。

「display none」の子要素

親要素に「display none」を指定していた場合、子要素でdisplay:blockを指定しても表示させる事はできません。

親要素をまるごと消しているので、子要素を表示させても映りません。

「text-indent」との違い

text-indentはその段落におけるテキストの始まり位置を調整するCSSプロパティです。

px数（マイナス値もOK）を指定する事でそのpx数分移動した箇所から文章が始まります。

例えば数値を100pxにすれば、左から100px右へズレたところから始まります。

マイナス値を使った技

応用編でとしてマイナス値（-9999px）を設定すると、理論的にはモニターのはるか左の方に移動します。

これを利用してh1タグの背景画像にロゴマークなど設定し、マイナスを設定してテキストが見えない様にしていました。

左側に9999px移動させているため、背景画像しか見えない様になります。この手はよく使われていましたね。

厳密には大きく右（左）へ移動するだけなので、テキスト1段落分（段落があればその段数）の空白ができます。

text-indent使用例

一番下はモニター枠の更に左に9999px移動しています。文字スペース分だけ余白はあるので帯の高さは3つとも同じです。

まとめ

コンテンツを増やすため、つまりGoogleのために見せるための「display none」の乱用は、Googleからは良しとされない事を認識しておきましょう。

ユーザビリティに関係のない隠しテキスト・隠しリンクは、Googleの品質ガイドラインに違反する可能性があります。

ただしこれまで述べたように、ユーザーのために自然と生まれる隠しコンテンツはスパムとしてペナルティを受ける行為ではありません。

スマホでは見る必要がないコンテンツや、プラグインが入っていないユーザーのなどのための説明テキスト表示など、ユーザビリティを前提とした措置はこれからも必要ですよね。

この様に検索ユーザーを考慮した利用方法であれば「display none」でペナルティを受ける可能性は低いと考えてよいと思います。

理由があれば理解してくれる

そこに理由があればそれをきちんとGoogleも把握してくれます。

極論「display none」を使わなくて済めばそれに越したことはありませんが、レスポンシブルデザインがベースとなった今の環境ではなかなかそういう訳にはいきません。

「display none」の設置がGoogleのためでなくユーザーのためであれば、Googleからの評価が下がる事はないので、気にせずに積極的に使いましょう。

そしてリンクテキストや重要コンテンツに対しては「display none」をあえて使わずに、大胆に表示させてしまいましょう。

一押し人気コーナー紹介