「display:none」とは？SEOへの影響と適切な使い方

SEO対策では、テキストや画像などのコンテンツだけでなく、ソースコードの使い方にも配慮する必要があります。特に、検索エンジンのクローラーとユーザーで見え方に差が生じるdisplay:noneの使い方は注意すべきポイントです。

この記事では、display:noneが検索順位に与える影響やスパム扱いされるリスク、display:noneをSEO対策で適切に使う方法などを解説します。display:noneの正しい使い方やペナルティを避ける方法を知りたいWeb担当者の方は、ぜひ参考にしてください。

display:noneは、Webサイトのテキストや画像など、指定した要素を非表示にするためのコードです。

一般的に、Webサイトの見た目はCSSと呼ばれるプログラム言語によって指定されます。CSSにはさまざまなコードが用意されており、テキストのサイズや背景の色などを変更することが可能です。

display:noneというコードは、CSSの記法に則って書かれています。要素の表示形式を指定するためのプロパティであるdisplayと、非表示を表す値であるnoneを組み合わせたコードがdisplay:noneです。

以下では、display:noneを指定した要素がどのように見えるかを解説します。

display:noneを指定した要素は、ブラウザを用いてWebサイトを閲覧しているユーザーからは見えません。

たとえば、Webサイトに掲載されているテキストのうち、ある段落に対してdisplay:noneを指定すると該当部分が表示されなくなります。画像や動画、リンクボタンなども同様にdisplay:noneで非表示にすることが可能です。

display:noneで非表示にした要素は、ユーザーからの見た目上は存在しないものとして扱われます。もともと要素が表示されていた部分にスペースも残りません。

一方、検索エンジンのクローラーはdisplay:noneが指定されている要素を把握することが可能です。クローラーはHTMLやCSSなどで書かれたWebサイトのソースコードを読み込むため、ユーザーには見えていない要素も把握できます。

そのため、検索エンジンのサイト内検索機能を使うと、display:noneで非表示になっているテキストであっても見つけることが可能です。

クローラーとは？SEO上の仕組みとクローリングの最適化を説明

Googlebotをはじめとするクローラーは、Web担当者やSEO担当者が知るべき専門用語です。SEOに必要な知識としてクローラーの意味・仕組みや巡回を開始させる方法、インデックス登録の確認方法、クローラビリティを向上する方法を解説します。

display:noneを使用する場合、SEO上どのような評価をされるか知っておく必要があります。

Googleの公式ガイドラインには、display:noneを適用したコンテンツに対するSEO上の評価は明記されていません。ただし、プログラマー向けのコミュニティで投稿された質問に対して、Googleに所属する人物は次のように回答しています。

引用：stack overflow「Search engine indexing of single page applications」

この回答によると、display:noneでコンテンツを非表示にした場合、検索エンジンにおいてより低く評価される恐れがあります。

検索順位の評価においてGoogleが重視しているポイントは、Webサイトがユーザーにとって有益であることです。display:noneが適用されたコンテンツは検索ユーザーから見えないため、有益でないと評価される場合があります。

サイト内でdisplay:noneを使用すること自体は、Googleのガイドラインに違反しません。ただし、隠しテキストや隠しリンク、クローキングなどガイドラインに反する使い方をした場合はSEOスパムとして扱われます。

隠しテキストや隠しリンクとは、ユーザーからは見えない形で大量のキーワードなどをソースコードに含める悪質な手法です。検索エンジンのクローラーに対して情報量を多く見せかけ、不当に評価を得ることを目的として使われる場合があります。

クローキングは、ユーザーとクローラーに対して全く異なるコンテンツを表示する手法です。隠しテキストや隠しリンクと同様に、悪質なSEO手法として扱われます。

ガイドラインに違反する形でdisplay:noneを使用したWebサイトは、SEOペナルティの対象です。ペナルティを受けたWebサイトは検索順位が著しく低下したり、インデックスされなくなったりします。

Googleガイドラインとは｜SEO担当者が理解する意義も解説

この記事では、Googleガイドラインとは何か、概要やSEO担当者が理解しておく意義について、詳しく解説します。さらに、現在公開されている4つのガイドラインの内容についても解説するため、ぜひ参考にしてください。

display:none以外の方法でコンテンツを非表示にした場合も、ガイドラインに反する行為はペナルティの対象です。ガイドライン違反のリスクがある非表示の仕方として、次のような方法が挙げられます。

要素の隠れ方に違いはあるものの、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サイトを構築しましょう。

レスポンシブ対応の概要と重要性｜実装方法もSTEP別に解説！

この記事では、レスポンシブ対応の概要と重要性について解説します。スマホが普及している現在、レスポンシブ対応は欠かせない工程です。実装方法も紹介するため、Webサイトの管理や運用を担当している人は参考にしてください。

まとめ

display:noneは、テキストや画像などをユーザーから見えない状態にするCSSです。display:noneで非表示となった要素は検索エンジンのクローラーからは認識されるものの、低く評価されます。

隠しテキストなど、ガイドラインに反する利用方法でdisplay:noneを使ったWebサイトはペナルティの対象です。スパム行為としてみなされないためには、display:noneを多用せず、必要に応じて使用する必要があります。

display:noneの正しい使い方を理解した上でコーディングを行い、適切なSEO評価を受けられるようにしましょう。

【2024年最新】SEOとは？SEO対策や基礎知識についてわかりやすく解説！

インターネット上で集客をしたい場合は、SEOに関する知識が必要になります。しかし、「SEOは難しい」と先入観を持つ人もいるのではないでしょうか。この記事では、SEOの基礎知識・SEOを行うメリットなどについて解説します。