水上浩一EC実践会
ネットショップから一般企業まで、月商1億円超等の実績!
ECコンサルタント、水上浩一が、圧倒的な成果実績の最新ノウハウで、価格競争に巻き込まれない「幸せな売上」アップに貢献します!
EC実践会blog >
アコーディオンメニュー
2025年1月4日|アコーディオンメニューとは
ウェブサイトやアプリケーションで
使用されるUI(ユーザーインターフェース)要素の一つで、
複数の項目が縦方向に並び、クリックやタップによって
個別の項目が展開・折りたたみされる仕組みのメニューです。
アコーディオンメニューのSEO効果
コンテンツは初期表示されていないことが多いため、SEOに影響する可能性があります。
検索エンジンのクローラーはボタンをクリックできないため、ページ表示直後のHTMLをみます。
折りたたまれたコンテンツが確実の認識されるように、初期HTMLでたたんでいるコンテンツは
必ずページロードの時点でHTML内にもち、
レンダリング後のHTMLで、ボタンクリックの追加読み込みをしないようにします。
Googleは隠されたコンテンツも評価しますが、
重要なコンテンツは折りたたまず、初期HTMLで表示する方が効果的です。
主な用途
FAQ(よくある質問)ページ
質問をクリックすると回答が表示される
ナビゲーションメニュー
カテゴリやサブカテゴリを展開・折りたたみできる
モバイルデバイス向けメニュー
限られた画面スペースを有効活用できる
アコーディオンメニューの特徴
省スペース
多くの情報をコンパクトに整理できる。
必要な部分だけを展開して閲覧できる。
ユーザビリティ
直感的に操作できる。
必要な情報だけを素早く確認できる。
階層構造
項目ごとに関連する内容をグループ化できる。