display:none;とSEO

Question

こんにちわ。
SEOに関して質問があります。
レスポンシブデザインを採用してウェブサイトを作り上げていく場合に、どうしてもCSS内でdisplay:none;を利用しなければいけないことがあると思います。
例えば、広告専用のサイドバーを利用している場合などです。
スマートフォンやタブレットなどからのアクセスに対しては表示するスペースがないため、どうしても利用すると思います。
SEOの観点から隠し要素と判定されると知ったのですが、これを回避する解決策があるでしょうか？
アクセスしてきた端末で判断しページを振り分けることは可能ですが、できればレスポンシブデザインで対応したいと思っています。

よろしくお願いします。

Answer 1

SEO以前の問題ですが、規約上広告をdisplay:noneの中に入れてしまって問題ないのかどうかの確認が必要です。

広告として表示はされないのにコードの読み込みは行われることになるので、広告PVの不正カウントとみなされる場合があるかもしれませんし、とりわけモバイル環境では、読まないコンテンツのロードは負荷になるだけです。

Answer 2

広告というのは例えの話ですかね。
だとすれば自社メディアへの単純なバナーだったり、つまり本文とさほど関係がなくスマホでは隠しちゃっても良いと判断できるコンテンツということですね。

であれば、display:none;でいいです。もっというと、HTML5であれば、<aside>〜</aside>でマークアップしてあげると、より検索エンジンへやさしくなるかと。

asideは、簡単に言うと「ここの部分はこのページの本文とはさほど関係ねぇっすよ」という意味になるので、スマホで隠してしまえる程度の関連性のコンテンツであればasideです。

いやいや関係なくはないよ、出来れば表示したいんだよ？って場合は、asideにしない方がいいです。
そして当然ですが、display:none;にしない方がいいです。
一般的にはヘッダー付近にボタンをおいて、jsでニュッとスライドしてくるメニューのようにしちゃうか、コンテンツの下にそのまま表示させてCSSで見栄えを整形してあげるというのが定石。

ただ今回のようにどうしてもレイアウト的に難しいということであれば、display:none;にするしか無いでしょう。
SEO的にはマイナスです。隠しコンテンツとかの意味ではないです。いわゆる隠しコンテンツと判断されペナルティの対象になるのは、「意図的に悪意を持って」の場合です。google先生は賢いので、その辺はわかるかと思います。

SEO的にマイナスととられるのはなぜかというと、ユーザビリティが損なわれているという理由からです。だって、スマホで見れなくなっちゃうんですから。
そんだけです。
もしユーザビリティのためにあえてdisplay:none;にするんだ！というなら、おそらくなんのマイナスも無いかと思われます。そのへんまでわかってくれ（ようとす）るのが最近のgoogleさんです。

bingは知らね！

Answer 3

結論から言うと、「第三者が見て違和感がなければOK」かなと思います。

こちらのオンライン家庭教師のブログでもdisplay:noneを活用していますが、SEOで上位表示に成功しています^^

とはいえ、Googleの規約を確認した上で、自己責任でお願いします。

Answer 4

考え方の違いもあるかと思いますが、同じ構造で解像度別に別のスタイルを割り当てることで様々な環境に対応するのがレスポンシブデザインです。
解像度別に display: none; で出力を変更するのであれば端末別に出力を変える旧来の考え方と同じであり、本質的にはレスポンシブデザインとはいえないと思います。

レスポンシブデザインでも対応不可能な状況であれば、JavaScript やサーバサイドスクリプトで出力HTMLを変更するのが良いと思いますが、どうでしょうか。
JavaScript を使う例でいえば、screen.witdh, screen.height で解像度を取得できる為、media query との相性も良いと思います。

Answer 5

「SEOの観点から隠し要素と判定されると知った」
↑display:none;はロボットからも消すのでSEOとは関係ないですよ

text-indent:-999
みたいに人の目には見えないけどロボットには見える
みたいなのが、多用するとペナルティを受けるケースはあるかも、ですね