UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【SEO】アコーディオン表示にhidden属性を使ってみたがSEOは問題なかった

検索エンジンの歴史上で「display:none」が利用した悪質なサイトがあったため、不必要に「display:none」を使うとSEOを下げるといわれてきた

そのため、アコーディオンとよばれるUI(見出しをクリックすると本文がしたからスライドしてでてくるやつ)はSEOの効果を狙う箇所には使用するなというルールを設けている現場もあるときいた

たしかに、初回描画時の本文は非表示にする必要があるため「display:none」などを使う必要があるが、これが本当にSEOにマイナスなのか定かではない

自社サイトはSEOが特に重要な部分をしめるため、万が一のため「display:none」の代わりにhidden属性を使ってみた

developer.mozilla.org

hidden属性とは

「まだ」あるいは「もはや関連性がない」ことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザーは、 hidden 属性を設定している要素を表示しません。

解釈が難しいが、見出しを押すまでユーザには関係ない(興味がない)コンテンツと考えれば間違ってもない気がするが、わからない

結論

この記事を書いているときはすでに実装していて、結果的にSEOには問題がなかった

タブ付きダイアログのパネルを隠すために hidden属性 を使うのは正しくありません。

とあるので、タブなどの場合には「display:none」がよさそう

ちなみに、Search Consoleヘルプに適切なコンテンツであるなら「display:none」でもSEO上問題ないという回答があったので、「display:none」でもよかったのかもしれない

support.google.com

他参考

https://www.w3.org/TR/2014/REC-html5-20141028/editing.html#the-hidden-attribute