レスポンシブデザインでの「display:none」使用の是非

前提・実現したいこと

HTML, CSSでランディングページのコーディングをしています。

「z-index」を使った2層構造のページを作成しており、
PC及びスマホ向けレスポンシブWebデザインへの対応方法を検討しています。

試したこと

「display:none」を使用してPCとスマホで表示切替をしようとしたところ、
会社の先輩からは「ペナルティを受けることがあるから推奨はしない」とアドバイスをいただきました。

ネット情報を参照すると「使っても良い派」と「使わなくても良い派」で意見が分かれており、
明確な基準を探すことができなかったため、
取り急ぎ「z-index」を使用した階層分けでコーディングを進めています。

ただ、
2層 × 2 = 4層
の構造になってしまい、ややこしい設計となっています。

個人的には「display:none」を使用して分かりやすいコードを記述したいのですが、
「display:none」使用の是非や他の方法についてアドバイスをいただけないでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

「display:none」を使用してPCとスマホで表示切替をしようとしたところ、

会社の先輩からは「ペナルティを受けることがあるから推奨はしない」とアドバイスをいただきました。

これ、少し語弊があるというか、古い情報になります。
確かに一昔前だと、Google側が、スパムを除外する技術が足りなかったために、
ペナルティ対応とせざるを得なかったからです。
（もちろん今でも、不正なdisplay: none;に対しては、ペナルティを課すと思われる。サイトの内容に関係ないキーワードを大量に埋め込むなど）
現在では、アルゴリズムもかなり精度があがり、
正当な理由でのdisplay: none;に関しては、正当なSEOであると判断してくれます。
（そうしないと、技術の否定になるから・・・と公式でも言及していたはず）
また、スマホはPCとは別にSEO判別をしてくれるようになっているため、
コンテンツの重複ではなく、デバイス別の表示だとも認識してくれる傾向にあります。