レスポンシブWebデザインでのサイト構築について、最近以下のような相談を受けることがあります。

「レスポンシブWebデザインでdisplay:noneを使うのはNGになるのでしょうか？」

検索していても、キーワード候補にも上がってくるくらいなので結構気にしておられる方も多いはずです。

結論から言うと、適切に使えばペナルティを受けることはありません。

レスポンシブWebデザインでのdisplay:noneの使用について

レスポンシブWebデザインでの考え方の基本は、1ソースマルチデバイスで構築し、同じコンテンツを端末サイズに合わせてMedia Queriesで調整するというものです。

ただどうしても「この端末特有のコンテンツを表示させたい」といったケースでは、他のデバイスサイズでは表示しないように設定する際に上記の「display:none」を使って調整する必要があります。

display:noneはSEO的に問題があるのか？

Googleはウェブマスター向けガイドラインの隠しテキストと隠しリンクの中で、

Google の検索結果でのランキングを操作するためにコンテンツに隠しテキストや隠しリンクを含めることは、偽装行為と見なされることがあり、Google のウェブマスター向けガイドラインへの違反にあたります。

と述べています。

はっきりとdisplay:noneを使った行為は書かれていませんが、サイトの内容と無関係なキーワードを列記し、表示を隠すことはスパム行為に該当する可能性が非常に高いです。

ただし、ユーザーのアクセシビリティを確保するために端末によってコンテンツの表示／非表示を切り替えることについては、スパム行為とはみなされないという記述もあります。

つまり、合理的な理由に基づいてタグや要素を記述しているケースであれば、検索エンジンはガイドライン違反とみなすことはない、ということになります。

レスポンシブWebデザインでのdisplay:none の利用は、それぞれのデバイスのアクセシビリティを確保する目的があるので、特に問題ないと考えてよいでしょう。

このブログでもdisplay:noneは使っています。

当ブログでもdisplay:noneを使ってコンテンツの表示非表示を端末毎に切り替えていますが、特にペナルティを受けている形跡はありません。むしろレスポンシブWebデザインへリニューアルしてからPV、UUともにほぼ2倍になりました。

レスポンシブWebデザインにしたからアクセスが伸びたとは一概には言えませんが、過去記事などが多くインデックスされ検索結果でも上位表示されているケースも多く見られます。

最近ではレスポンシブWebデザインで構築されたサイトが日本でも増えてきましたが、正しい知識を持ってサイト制作をするように心がけましょう。

上林