意外と見落としがちなCSSの「display:none」。過去の設定がページ非表示の原因になる？

弊社で支援をさせていただいている某クライアントサイトにて、一部のWebページが表示されない事象が発生しました。

詳細を分析し、クライアントに確認したところ、必要な動的コンテンツを後で描画するために、一時的に非表示設定にしたままになっていた、とのことでした。

今回の問題が検出された経緯とは？

弊社にてサイト分析中、各ページのソースコードを確認していた際に、一部のコンテンツがSSR(サーバーサイドレンダリング)で記載されていることがわかりました。

しかし、静的要素も動的要素もページに表示されず、仕様に問題があることは把握していました。

その後、詳細分析を進めていく過程でGoogleキャッシュを確認した際、Googleがページ内の各要素を認識しているにもかかわらず、あえて表示していない挙動が発生していることがわかりました。

ここで弊社はスタイルシートに問題があると仮定し、CSSを確認したところ、ページ全体にdisplay:noneがかかっていたことが判明しました。

今回の事象からの反省点

CSSでページ全体にdisplay:noneがかかっていたことを発見するのに時間を要してしまったため、修正対応に遅れを取ってしまったことが今回の反省点です。

現在はクライアントに事象の詳細と原因を共有し、改善を進めていただいています。

今回はたまたまGoogleキャッシュの確認から事象を発見することができましたが、普段からHTMLだけでなく、CSSの確認も綿密に行うことが大切であるという気づきを得ることができました。

CSSの分析は意外と見落としがちなので、特にレスポンシブ対応時や動的コンテンツをページに取り入れる際はdisplayプロパティの設定状況を正確に把握しておくことをおすすめいたします。

執筆者：川口享晟

株式会社ヒトノテのSEOコンサルタント。メディアサイトからポータルサイト、ECサイトまで様々なサイトのSEO支援を経験。売上のアップから逆算したSEO対策を得意とし、クライアントに寄り添ったオーダーメイドの提案を心がけています。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。