【SEOが不安】display:noneにならないアコーディオンの実装
WebページのUI/UXの一つとして展開式コンテンツ（アコーディオン/ドロップダウンなど）がよく使われますよね。特にモバイルページでは比較的サイズの小さい画面で情報を効果的に見せることができて重宝されます！
さて、その展開式コンテンツ（アコーディオン）ですが、SEO的に問題があるんじゃないかとよく議論されます。
どういうことかというと展開式コンテンツ（アコーディオン）は、初期状態では中身のコンテンツは隠れているので、その隠れたコンテンツ部分はクローラーに正しく認識されずインデックスされない（評価されない）のではないかということです。
そこでこの記事では展開式コンテンツ（アコーディオン）に関するGoogleの見解や懸念点、display:noneにならない実装方法についてお伝えします！
Googleの見解
まずは、2014年にGoogleのジョン・ミューラー氏が
初期状態で表示されないコンテンツも認識できるが、重要なコンテンツなら見えるようにしておくべき。
ただし、PCで初期状態で見えるようにしていればモバイルサイトでは隠れたコンテンツとなっていても問題はない。
という趣旨のアナウンスをされています。
当時はMFI（モバイルファーストインデックス）適応前なので、PCページがインデックスされ評価されていました。
その後、2016年のMFI導入発表以降、Googleのゲイリー・イリェーシュ氏やGoogle公式Twitterなどにより、MFIではモバイルページがインデックスされ評価されるので、初期状態で隠れたコンテンツでも問題はないとアナウンスされました。
結論としては、現在は展開式コンテンツ（アコーディオン）でも評価が下がることがないので問題はありません！
展開式コンテンツ（アコーディオン）の懸念点
Googleが明言しているとおり、実際にもGoogleヘルプページなどでdisplay:noneで隠れたコンテンツ部分をテキスト完全一致（site:ドメイン "テキスト"）で検索してみると、ちゃんとヒットしますしスニペットでも表示されるので、しっかりクローラーに認識されインデックスされていることが確認できます。
じゃあ問題ないじゃん！という話なのですが、いくつか懸念があります。
まず、展開式コンテンツ（アコーディオン）にはいくつか実装方法があり、
例えば、隠したいコンテンツ部分をCSSでdisplay:noneとする方法や、初期状態では読み込まず展開時にAjaxで非同期でコンテンツを読み込む方法など。
Googleは初期状態で隠れたコンテンツ全般のことを指してはいますが、特定の実装方法に対する言及はしていませんので、全般的に問題はないのだろうとは思いますが、少なくとも非同期で後からコンテンツを読み込む方法だとさすがのクローラーもスムーズに認識できないのではないかと思うわけです。
また、CSSのdisplay:noneは本来要素の非表示を意味するので、通常はコンテンツ評価の観点でクローラーは中身を（認識できてはいるものの）無視しやすいものと思われます。
ちなみに展開式コンテンツ（アコーディオン）の実装でよく利用されるjQueryのslideToggleやslideUp/slideDownだと隠れたコンテンツ部分はdisplay:noneです。
他にも、こちらは実装方法の違いではありませんが、隠れたコンテンツが有るページと無いページではランキングに差が出たという海外事例があり、その海外事例で使用されたとされているプラグインも隠れたコンテンツはdisplay:noneで実装されています。
そういったことから、同じ展開式コンテンツ（アコーディオン）でも実装方法によって認識のしやすさが異なるのではないかと予想できます。
そこでGoogle公式コンテンツはどうしているのかなと思い確認してみると、先ほど例にあげたGoogleヘルプページのようにdisplay:noneで隠れているもの以外にも、
隠したいコンテンツを別のhtml要素で囲み、そのhtml要素の高さを0にすることで、見た目は隠しつつdisplay:noneとなっていないものがありました。
これならモヤモヤが解消できる！ということで、同じような展開式コンテンツ（アコーディオン）の実装方法をご共有します！
display:noneにならないアコーディオンの実装
jQuery（CDN）の読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
jQueryの実装
隠したいコンテンツをdiv要素で囲み、はみ出て表示されないようにしつつ高さを0にして隠します。
表示する時は、隠れたコンテンツの高さを取得して、囲んでいるdiv要素の高さを取得した高さを同じにします。
<script>
$(function(){
$('.js-dropdown-box').wrap('<div class="js-dropdown-box-wrap">');
$('.js-dropdown-box-wrap').css({
'overflow': 'hidden',
'height': 0,
'transition': 'height .3s linear'
});
$('.js-dropdown-btn').css('cursor','pointer');
$('.js-dropdown-btn').on('click',function(){
if($(this).hasClass('js-dropdown-btn-on')){
$(this).next('.js-dropdown-box-wrap').css('height','0');
$(this).removeClass('js-dropdown-btn-on');
}else{
var target_height = $(this).next('.js-dropdown-box-wrap').children('.js-dropdown-box').outerHeight();
$(this).next('.js-dropdown-box-wrap').css('height',target_height);
$(this).addClass('js-dropdown-btn-on');
}
});
});
</script>
htmlの記述
<h2 class="js-dropdown-btn">ボタン</h2> <p class="js-dropdown-box">コンテンツ</p>
さて、この記事では展開式コンテンツ（アコーディオン）に関するGoogleの見解や懸念点、そしてdisplay:noneにならない実装方法をお伝えしてきました。
実際にはクローラーは非常に優秀で「隠しテキストと隠しリンク - Search Console ヘルプ」といったガイドライン違反も判別できるように、display:noneでも全然判別可能なはずですので、Googleの見解通りあまり気にせず展開式コンテンツ（アコーディオン）を実装しても問題ないかと思います。
ここまで書いておいてなんですが、現状は僕もあまり気にしません！
実は過去にせっかく実装したので、備忘録的に記事にしておきたいなと思ったのが本音です。。笑
それでもどうしても不安を拭い去っておきたいというような、いざというコンテンツがあれば、僕もこちらの方法で実装します。
あくまで、念のためのおまじない的な感じでご活用いただければ幸いです^^
※参照記事
[続報] 重要なコンテンツならタブや展開ボタンで隠さないほうがいい | 海外SEO情報ブログ
Googleの説明とは異なり、タブで隠されたコンテンツはMFI後であっても評価が下がるのか？ | 海外SEO情報ブログ
