display: none の内容がGoogleの検索結果に表示されるか試してみる

タブ型のレイアウトやもっとみるボタンなど、コンテンツの一部をdisplay: none で非表示にすることがたまにあります。
display: none になっている部分は検索結果に表示されない、という情報を以前過去に見かけたことがあったのですが、現在の検索エンジンの場合どうなるのかを試してみました。

サンプルコード

コンテンツの一部にdisplay: none を設定したページを作成して、そのコンテンツに含まれるキーワードで検索にかかるかを試してみます。
今回はdisplay: none と合わせて、visibility: hidden とopacity: 0 も試してみます。

<h2>設定なし</h2>
<div>
  <p>喜多郁代</p>
</div>
<h2>display: none; の内容</h2>
<div class="display-none">
  <p>後藤ひとり</p>
</div>
<h2>visibility: hidden; の内容</h2>
<div class="visibility-hidden">
  <p>伊地知虹夏</p>
</div>
<h2>opacity: 0; の内容</h2>
<div class="opacity-0">
  <p>山田リョウ</p>
</div>

各classにスタイルを設定します。

.display-none {
	display: none;
}
.visibility-hidden {
	visibility: hidden;
}
.opacity-0 {
	opacity: 0;
}

要素を非表示にするデモページ

結果としては、各キーワードともに検索にはかかるようでした。
site:https://cly7796.net 喜多郁代
site:https://cly7796.net 後藤ひとり
site:cly7796.net 伊地知虹夏
site:cly7796.net 山田リョウ

ただし、display:none で非表示になっているコンテンツ部分の評価を下げる可能性があるといった情報もあるようだったので、display:none を設定する際は内容を考慮した上で設定したほうがよさそうです。