display:noneについてSEO的にどうなのか自分なりにまとめてみた
要素を非表示にするdisplay「none」
便利なんだけど、SEO的にどうなるのか調べてみた
googleのクローラーが集める情報
googleさんのクローラーはサイトに表示されているコンテンツを集めているようです
display「none」で非表示にしているコンテンツを認識することはないそうです。
例えば…
|
1 2 3 4 5 6 7 8 |
<body> <div class="pc"> PC用コンテンツ </div> <div class="sp"> スマートフォン用コンテンツ </div> </body> |
このようなコードがあったとしましょう。
このコンテンツをデバイスごとに表示切替するためにメディアクエリと組み合わせてdisplay:noneを使ったとしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
.pc{ display:none; } @media(min-width:499px){ .pc{ display:block; } .sp{ display:none; } } |
表示内容は切り替わるようになり、どちらかのコンテンツしか表示されなくなります。
この時に表示されているどちらかの情報しか認識しないのがgoogleさんのクローラーの動きらしいです。
上にも書いた通りdisplay:noneを使って非表示にしたコンテンツは無視されているというわけですね
※ そもそもdisplay:noneが指定されているものは認識しないという考え方もあるようです。
その場合はこのコードなら何も認識されないようです
display「none」の持っているリスク
隠しコンテンツとみなされスパム扱いされた場合ペナルティを喰らうことになるようです。
このような行為はこれはクローキングとも呼ばれるそうです。
例えば…
- Googleさんのクローラーには害のないコンテンツを見せる
- ユーザーにはアダルトコンテンツを見せる
Googleさん、ユーザーさんのどちらかを騙そうとする行為です。
このような行為を意図的にするとスパム扱いされて検索順位を下げられてしまうそうです。
こういう発言もされているようです。
検索エンジンに、ユーザーが見るのとは違うコンテンツを配信するのは、危険だ。
クローキングとみなされる可能性がある。
コンテンツをdisplay:noneで隠すのは、逆効果だ。
というのも、Googleは隠れたコンテンツをより低くランキング評価してしまうからだ。
すなわちこういうことのようです
display:noneを使うとコンテンツは非表示になる
↓
見えないコンテンツは評価しない
↓
コンテンツが減る＝コンテンツ量でライバルに負ける
↓
評価されにくくなる
不要なパーツ類を隠すために使うのもNGなのか？
googleさんは「使う必然性があるなら、使ってOK」と言っていたようなので必要があれば使っていきましょう
display:noneを使ったら即スパム扱いというわけではなさそうです。
大丈夫そうな使い方
あくまでも個人的見解
- 非表示にしたメニューをユーザーの操作によって表示する
- サイトの表示に不要なパーツを非表示にする
- バナーを他のものに切り替えるために非表示にする
ヤバそうな使い方
あくまでも個人的見解
- デバイスごとに表示用コンテンツを作っておき、丸ごとごと表示切替をする
- サイトとは関係のないものを入れ、不正に検索順位を上げようとする
レスポンシブ対応させるときにソースコードを2重3重に書いているサイトを稀に見かけますが、このような行為はかなり怪しいので気を付けたほうがよさそうに感じます
あくまでも個人的見解でまとめました
