「display:none」とは？SEOへの影響と適切な使い方
SEO対策では、テキストや画像などのコンテンツだけでなく、ソースコードの使い方にも配慮する必要があります。特に、検索エンジンのクローラーとユーザーで見え方に差が生じるdisplay:noneの使い方は注意すべきポイントです。
この記事では、display:noneが検索順位に与える影響やスパム扱いされるリスク、display:noneをSEO対策で適切に使う方法などを解説します。display:noneの正しい使い方やペナルティを避ける方法を知りたいWeb担当者の方は、ぜひ参考にしてください。
1.display:noneとは？
display:noneは、Webサイトのテキストや画像など、指定した要素を非表示にするためのコードです。
一般的に、Webサイトの見た目はCSSと呼ばれるプログラム言語によって指定されます。CSSにはさまざまなコードが用意されており、テキストのサイズや背景の色などを変更することが可能です。
display:noneというコードは、CSSの記法に則って書かれています。要素の表示形式を指定するためのプロパティであるdisplayと、非表示を表す値であるnoneを組み合わせたコードがdisplay:noneです。
以下では、display:noneを指定した要素がどのように見えるかを解説します。
1-1.ユーザーとクローラーからどう見える？
display:noneを指定した要素は、ブラウザを用いてWebサイトを閲覧しているユーザーからは見えません。
たとえば、Webサイトに掲載されているテキストのうち、ある段落に対してdisplay:noneを指定すると該当部分が表示されなくなります。画像や動画、リンクボタンなども同様にdisplay:noneで非表示にすることが可能です。
display:noneで非表示にした要素は、ユーザーからの見た目上は存在しないものとして扱われます。もともと要素が表示されていた部分にスペースも残りません。
一方、検索エンジンのクローラーはdisplay:noneが指定されている要素を把握することが可能です。クローラーはHTMLやCSSなどで書かれたWebサイトのソースコードを読み込むため、ユーザーには見えていない要素も把握できます。
そのため、検索エンジンのサイト内検索機能を使うと、display:noneで非表示になっているテキストであっても見つけることが可能です。
2.display:noneのSEOへの影響
display:noneを使用する場合、SEO上どのような評価をされるか知っておく必要があります。
Googleの公式ガイドラインには、display:noneを適用したコンテンツに対するSEO上の評価は明記されていません。ただし、プログラマー向けのコミュニティで投稿された質問に対して、Googleに所属する人物は次のように回答しています。
”Hiding the content with a display:none might backfire on you. We are giving hidden content way less weight in ranking.”
引用：stack overflow「Search engine indexing of single page applications」
この回答によると、display:noneでコンテンツを非表示にした場合、検索エンジンにおいてより低く評価される恐れがあります。
検索順位の評価においてGoogleが重視しているポイントは、Webサイトがユーザーにとって有益であることです。display:noneが適用されたコンテンツは検索ユーザーから見えないため、有益でないと評価される場合があります。
3.スパム扱いされる？display:noneのリスク
サイト内でdisplay:noneを使用すること自体は、Googleのガイドラインに違反しません。ただし、隠しテキストや隠しリンク、クローキングなどガイドラインに反する使い方をした場合はSEOスパムとして扱われます。
隠しテキストや隠しリンクとは、ユーザーからは見えない形で大量のキーワードなどをソースコードに含める悪質な手法です。検索エンジンのクローラーに対して情報量を多く見せかけ、不当に評価を得ることを目的として使われる場合があります。
クローキングは、ユーザーとクローラーに対して全く異なるコンテンツを表示する手法です。隠しテキストや隠しリンクと同様に、悪質なSEO手法として扱われます。
ガイドラインに違反する形でdisplay:noneを使用したWebサイトは、SEOペナルティの対象です。ペナルティを受けたWebサイトは検索順位が著しく低下したり、インデックスされなくなったりします。
3-1.display:none以外で非表示にするリスク
display:none以外の方法でコンテンツを非表示にした場合も、ガイドラインに反する行為はペナルティの対象です。ガイドライン違反のリスクがある非表示の仕方として、次のような方法が挙げられます。
●背景色と文字色を同じにする
CSS指定によって背景とテキストを同じ色にしてしまうと、ユーザーは文字を読めません。白背景に白文字など、文字が読めないような配色は避けましょう。
●テキストを画像の背後に配置する
要素の重なり順を指定するCSSのコードで、画像の背後に隠しテキストを記述することもペナルティの対象です。
●テキストを画面外に配置する
行頭に空白を設けるCSSで-9999pxなど過剰な値を設定すると、テキストがユーザーから見えない位置に移動します。ガイドラインに反する目的でテキストを画面外に配置する設定は避けましょう。
●フォントサイズを0にする
フォントサイズを0に指定すると、ソースコードに含まれているテキストがユーザーからは見えなくなります。
●小さな1文字にリンクを設定する
ピリオドやアンダーバーなど、小さくて目立たない文字にリンクを設定すると隠しリンクと見なされるため危険です。
●visibility:hiddenを適用する
CSSでvisibility:hiddenを適用した要素は、ユーザーからは見えない状態となります。display:noneとの違いは、visibility:hiddenを適用した場合、要素がもともと表示されていた場所が空白となることです。
要素の隠れ方に違いはあるものの、visibility:hiddenもガイドラインに違反するとペナルティを受けるため使い方に注意しましょう。
4.display:noneをSEO対策で適切に使う方法
display:noneは、デバイスによって適切なコンテンツを表示したい場合などには有用なCSSです。以下に挙げる注意点に配慮することで、検索エンジンから低評価を受けずにdisplay:noneが使えます。
●レスポンシブデザインなど必要に応じて使用する
パソコンで表示されるメニューを、スマートフォンでは非表示にするといった使い方ならガイドラインに違反しません。display:noneを活用すると、画面の横幅に合わせてレイアウトなどを最適化し、利便性を高められます。
また、ユーザーがボタンをクリックした場合に特定の要素を非表示にするような動的なコンテンツにも、display:noneが利用可能です。
●display:noneの多用は避ける
検索エンジンのガイドラインに違反する意図がなかったとしても、display:noneを多用することは避けましょう。
Webサイトがペナルティの対象となる具体的な条件は、Googleの公式ページなどに公開されていません。そのため、display:noneを適切に使用しているつもりであっても、ガイドライン違反と判定されてしまうリスクがあります。
display:noneを必要以上に使わないようにすると、ペナルティを受けるリスクを下げることが可能です。
●重要な情報は非表示にしない
検索エンジンからの評価に関わるような重要な情報は、display:noneで非表示しないようにしましょう。
検索エンジンのアルゴリズムは、Webサイトに含まれるキーワードの内容や情報量、リンク構造などを総合的に評価しています。特に、見出しに含まれるキーワードやWebページ内の文字数などは、評価に影響を与えやすい要素です。
そのため、見出しや特定の段落などをdisplay:noneで非表示にすると情報量が少ないと見なされ、低評価を受けるリスクがあります。ユーザーにとって有益な情報は、可能な限り表示させた状態でWebサイトを構築しましょう。
まとめ
display:noneは、テキストや画像などをユーザーから見えない状態にするCSSです。display:noneで非表示となった要素は検索エンジンのクローラーからは認識されるものの、低く評価されます。
隠しテキストなど、ガイドラインに反する利用方法でdisplay:noneを使ったWebサイトはペナルティの対象です。スパム行為としてみなされないためには、display:noneを多用せず、必要に応じて使用する必要があります。
display:noneの正しい使い方を理解した上でコーディングを行い、適切なSEO評価を受けられるようにしましょう。
