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

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

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

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

非表示コンテンツ部分を100%常に評価対象にしている保証はありませんが、実装の際はCSS・jQueryいずれも非表示(display:none)による制御をしていく事でSEO的には問題ないと言えます。

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

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

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

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

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

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

通常スマホ版では最初から全てを開いたままにするのではなく、クリックされた時にだけ内容展開をさせる様に「タブ表示やアコーデオン機能」を使います。

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

ですのでMFIに移行すると同時にアコーデオンメニューなどを使うスマホ版WEBサイトがたくさん登場しました。

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

アコーディオン等でコンテンツを非表示にした場合、初期状態では表示されていませんがクリックされれば表示されるのですから大きな問題はないはずです。

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

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

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

ダン・ペトロヴィック(Dan Petrovic)氏が、同条件の2つのスマホ版WEBサイトをテストしてSEO検証をしています。

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

[SEO Test] Tabs and Accordions not OK in Mobile-First(タブとアコーディオンはモバイルではOKではない)

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

SEO検証テスト

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

両者の違う部分は下記のみ

・サイトA:タブやアコーディオンで処理されたコンテンツ
・サイトB:最初から全て公開されたコンテンツ

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

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

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

経緯:2014年(MFI導入前)

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

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

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

当時はMFI(モバイルファーストインデックス)適応前なので、PCページが主としてインデックスされた上で評価されていたんですね。

経緯:2016年(MFI導入後)

その後2016年のMFI導入発表が正式にされました。これによりMFIではモバイルページがインデックス・評価される様になります。

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

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

SEOに乱用される可能性に関する示唆

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

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で制御するのがコツになりますね。

この記事をシェアする

人気記事

SEOカテゴリの関連記事