SEO アコーディオンメニュー表示は検索に不利？

タブ・アコーディオン等の非表示・展開型コンテンツもきちんとGooglebotにはクロール・認識されます。

100％評価している保証はありませんが、CSS・jQueryどちらを非表示で実装してもSEO的には問題ないと言えます。

基本的に見えていない部分のコードがHTMLソース上にきちんと記載されていれば大丈夫だという事です。

MFIにおいてアコーディオンなどの展開機能は重要なファクター

WEBサイトはMFI（モバイル・ファースト・インデックス）に移行されている事は皆さんご存知ですよね。

PCなら画面が広いのであまり気にしませんが、スマホ版だと内容の全てを最初から表示した状態が難しいコンテンツってありますよね。

例えば各項目ごとのメニュー表示などがそれにあたります。

各メニューをアコーデオンで折りたたむ

皆さんなら通常スマホ版で最初から全てを見せたりはしないと思います。

クリックされた時にだけ内容を表示させる「タブ表示やアコーデオン機能」を使うでしょう。

表示の必要がない時は非表示にしておけるので見栄えも良いし、小さな画面を有効に使えます。

ですのでアコーデオンメニューなどを使うスマホサイトがたくさん登場しました。

アコーディオンメニュー等の表示は検索に認識されない？

アコーディオン等でコンテンツを非表示にした場合、初期状態では当然表示されません。

クリックされれば表示されるのですから、大きな問題はないはずです。

しかし、アコーディオンメニューやタブ等の非表示コンテンツは「SEO的に不利になる」という説が出回った事があります。

だとすれば心配ですよね。今まで使っていたのであればなおさらです。

検索順位に違いが出たという検証報告

とある管理者が、同条件の2つのスマホ版WEBサイトをテストしてSEO検証をしています。

その結果すべてのキーワード検索で、項目などを全て公開したコンテンツのサイトの方が上位表示されたそうです。

このようなテスト結果が広がり、SEO担当者を困惑させました。

SEO検証テスト

その実験は、同条件でMFIに移行した2つのWEBサイトで実施されました。

両者の違う部分

比較した結果、AサイトよりBサイトの方が上位表示されたという検証結果でした。

結論：検索評価に影響はない

現在この問題自体は解決しているのですが、経緯を説明しておきましょう。

経緯：2014年（MFI導入前）

まず2014年にGoogleのジョン・ミューラー氏の発言が下記の様に発言していました。

初期状態で表示されない非表示コンテンツも認識できるが、重要なコンテンツなら見えるようにしておくべき。

PCの状態で見えるようにしていれば、モバイルサイトでは隠れたコンテンツとなっていても問題はないという趣旨ですね。

当時はMFI適応前なので、PCページが主なインデックス対象として評価されていたんですね。

経緯：2016年（MFI導入後）

その後2016年のMFI導入発表が正式にされました。

これによりモバイルページがメインにインデックス・評価される様になります。

Googleのゲイリー・イリェーシュ氏やGoogle公式Twitterなどにより、初期状態で隠れたコンテンツでも問題はないという見解が示されました。

結論として、現在はアコーディオンなどの展開をするコンテンツでも評価が下がる様な事はないという認識になったのです。

キーワードを詰め込まれる危険

乱用するケースへの注意喚起

MFIでは基本的に隠れているコンテンツであっても、見えているコンテンツと全く同じ様に扱います。

モバイルではタブや展開を使わずに全てを見せるのは難しいことはわかっている。なので非表示にしても不利な点はない。

今後、乱用するケースが見られたら変えるかもしれないが、今のところは同じように扱う。

との事でした。

確かに非表示コンテンツに主要なキーワードを詰め込む（乱用される）可能性が残りますよね。

その様な乱用が将来的に起こる場合は、何らかの調整をおこなう事を示唆しています。

SEOテストの差は何だったのか？

では先ほどの管理者のおこなったSEOテストではなぜ順位に差が出たのでしょうか。

実装方法に差があった

某管理者のテストはWordPressの「Tabby Responsive Tabs」プラグインを利用してタブ切り替えのデザインを実装したそうです。

このプラグインの説明を読むと、jQueryでタブを生成しているようです。

つまりこのjQueryが影響して、当時のGooglebotがコンテンツをきちんと認識していなかったのでは？という事が可能性として考えられるのです。

Googlebotは確実に進化

もちろん今はGooglebotも日々バージョンUPしていますから、その辺りの対応はされているはずです。

JavaScriptを使わずCSSでの切り替え構成にしておけば、Googlebotで通常通り認識できます。

今はページがどのようにレンダリングされるかは「Search Console」のURL検査ツールを使えば調べることができます。

URL検査ツールにはライブテスト機能も付きましたしね。

実装方法には念のため注意

Ajaxで非同期でコンテンツを読み込む場合

例えば初期状態では読み込まず、展開時にAjaxで非同期でコンテンツを読み込む方法などがそうですね。

Googleは初期状態で隠れた非表示コンテンツに対して言及をしています。

しかし特定の実装方法に対する事は述べていませんので、全般的に問題はないのだろうとは思います。

しかし少なくとも非同期で後からコンテンツを読み込む方法だと、クローラーがスムーズに認識できない可能性はありますね。

display:noneを使う場合

Googleが実際にもGoogleヘルプページなどで下記の様に明言しています。

display:noneで隠れたコンテンツ部分をテキスト完全一致（site:ドメイン "テキスト"）で検索してみると、ちゃんとヒットしますしスニペットでも表示されます。

つまりdisplay:noneの部分も、クローラーに認識されインデックスされるという見解で問題は無いと思います。

display:none部分が「評価上は無視」される可能性

しかしCSSのdisplay:noneは本来要素の非表示を意味します。

つまりクローラーは内容の認識はしていても「コンテンツ評価」の面では、その部分を無視する可能性もあります。

ちなみにjQueryの「slideToggle」や「slideUp/slideDown」などのアコーディオン実装の場合、隠れたコンテンツ部分はdisplay:noneになっています。

同じ展開式コンテンツでも実装方法によっては評価・認識がされにくい場合がある事を踏まえておく必要がありますね。

アコーディオンメニュー実装例

HTML5+CSSによる実装

特に条件が無いのであれば、下の様なHTML5とCSS3の組み合わせで実装できますので参考にして下さい。

javascriptは利用していません。

上の各タイトルをクリックするとアコーディオンが開きます。

htmlソース

<div class="menu"> <label for="menu1">アコーディオン1</label> <input type="checkbox" id="menu1" class="accordion"> <ul id="links1"> <li><a href="#">内容1</a></li> </ul> <label for="menu2">アコーディオン2</label> <input type="checkbox" id="menu2" class="accordion"> <ul id="links2"> <li><a href="#">内容2</a></li> </ul> </div>

CSSファイル記述

.menu{ width: 100%; } .menu a{ display: block; padding: 15px; text-decoration: none; color: #000000; } label{ display: block; margin: 0 0 4px 0; padding : 15px; line-height: 1; color :#000000; background : #1abc9c; cursor :pointer; } input{ display: none; } .menu ul{ margin: 0; padding: 0; background :#f4f4f4; list-style: none; } .menu li{ height: 0; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #menu1:checked ~ #links1 li, #menu2:checked ~ #links2 li{ height: 50px; opacity: 1; }

JQueryファイルによる実装例

jQueryを利用したアコーディオンです。内容は全てソース上で見えています。

htmlソース

<!-- ACCORDION --> <div class="wt-accordion acc-outline" id="accordion3"> <div class="panel wt-panel"> <div class="acod-head"> <h6 class="acod-title text-uppercase"> <a data-toggle="collapse" href="#collapseOne3" data-parent="#accordion3" ><i class="fa fa-globe"></i>アコーディオン <span class="indicator"><i class="fa fa-plus"></i></span> </a> </h6> </div> <div id="collapseOne3" class="acod-body collapse"> <div class="acod-content p-tb15">内容1</div> </div> </div> <div class="panel wt-panel"> <div class="acod-head"> <h6 class="acod-title text-uppercase"> <a data-toggle="collapse" href="#collapseTwo3" class="collapsed" data-parent="#accordion3"><i class="fa fa-photo"></i>アコーディオン <span class="indicator"><i class="fa fa-plus"></i></span> </a> </h6> </div> <div id="collapseTwo3" class="acod-body collapse"> <div class="acod-content p-tb15">内容2</div> </div> </div> </div>

jQueryソース

<script src="../js/jquery-1.12.4.min.js"></script>
※jqueryファイルがページソースの一番下で読み込まれています。内容は割愛します。

上記の様にソース上で内容を全て見せていて、それをdisplay:noneで制御するのがコツになりますね。

一押し人気コーナー紹介