こんにちは、mickです。
HTMLの要素を消したり隠したりするCSS、display:none; と visibility:hidden;
自分も含め、どっちを使えばいいか迷う人のために、整理しておくことにしました。
この記事を読むと、この2つの明確な違いや、SEO対策で気をつけることがわかります。
存在を消す none、非表示にする hidden
本来ならそこにあるはずのHTMLタグを、あたかもなかったかのように存在を消すのが display:none;です。
displayの意味は：見える、示す
noneの意味は：（そこに）ない
display:none; は 画面から消す
もうひとつ、そこにあるHTMLタグを非表示にするのが、visibility:hidden;です。
visibilityの意味は：視界、見えること
hiddenの意味は：隠す
visibility:hidden;は 表示を隠す
なので、display:none; と visibility:hidden; はそれぞれまったく違います。
display:none;での見え方
display:none;なし
中央のdivタグにdisplay:none;を指定
そこにあったはずの要素が、まるでなかったかのような表示になってます。
まさに消されてますね。
visibility:hidden;での見え方
visibility:hidden;なし
中央のdivタグにvisibility:hidden;を指定
そこにある要素が、非表示になっています。
非表示になっているだけで、要素の幅やサイズなどレイアウトはそのままです。
どちらもソースコードは残っている
display:none;とvisibility:hidden;、どちらを使ってもソースコードでは残っています。
消えていたり、非表示になっているのは、見た目だけ
SEOの観点から気をつけること
display:none;とvisibility:hidden;を使うときは、SEOの観点から気をつけることがあります。
それが「隠しテキストと隠しリンク」にならないようにすること。
ユーザーには見えなくて、検索エンジン（クローラー）には見えるHTMLタグの使いすぎは、推奨されていません（Googleのガイドラインより）。
理由は、偽装行為に使われるから（例えば、記事に無関係な文字を隠しておいてWebページの文字数を水増しするなど）。
これは、Googleからすると品質に関するガイドラインの違反になって、ペナルティ扱いになる可能性が高くなります。
SEO対策を意識しているのなら、偽装行為には使わないようにしましょう。
普通は心配しすぎなくていい
スマホやタブレット、パソコンのように利用者のデバイスによって、見た目を切り替えたり、メニューの見え方を変えたりすることは普通にあります。
これらはユーザーのため（ユーザビリティのため）にdisplay:none;やvisibility:hidden;を使うわけです。
このように、適切に使う分には心配する必要はないと思います。
それくらい、Googleなど検索エンジンがWebサイトを調べる精度は上がってます。
サイトに隠しテキストや隠しリンクが含まれていないかを判断する際は、ユーザーから見えにくい部分がないか、ユーザーではなく検索エンジンのみを対象としたテキストやリンクがないかを確認します。
Google上級者向けSEO「隠しテキストと隠しリンク」
まとめ。
display:none; と visibility: hidden; の違いと使い分けを紹介しました。
SEO対策も意識をすると、ペナルティの対象にならないか心配になります。
でも、大丈夫。適切に使っていれば心配しなくていいと思っています。
そもそも、レイアウトの調整に使っても、これらを使って文章の見え方を変えることはないですよね。
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/02/07
