Javascriptのlocation.href でリンクする箇所はSEOに不向き?


Old book about javascriptスマホ向けのサイトを作っていると、Javascriptでページのデコレーションをしたくなるんです。例えばJqueryを使ってアコーディオンメニューを作るとか。ってか実際作って、配信したりしているんですけど。

ただ配信してしばらくしても、なぜかアコーディオンメニューの奥にあるページが一向にGoogleさんに引っ掛かってくれない。なんでだろう?

たしかに自分の作ったアコーディオンメニューって少し特殊で、<ul>の下に<ul>があればそれを開き、なければlocation.href で指定されたリンクへジャンプするといった仕組みを取っています。もしかするとそれが原因なのかなぁ・・・。ということで今日はアコーディオンメニューとlocation.hrefとGooglebotについてのお話。

あくまで推測なので、これが正しいというわけではないけれど :wink:

まずアコーディオンメニューとは何ぞや?というかたはこちら・・・(アコーディオンメニュー例(TRIPLEXXX様))。要はメニューの1番目(親)をクリックしたら、その2番目(子供)のメニューが現れる、という仕組み。アコーディオンのように伸びたり縮んだりすることから、こういう名前が付いたんでしょうね。

通常アコーディオンメニューを開いたり閉じたりする親メニューには ID を貼ったり Classをつけたりして、「それをクリックしたらアコーディオン動作するよ」というJavascriptを組みます。ただ、それだとJavascriptの知らない人が使ったら、なんのことかさっぱり?になると思って、普通にHTMLを組んでもアコーディオンメニューができるよう、下のJavascriptを使ってやっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function() {
  // アンカーをクリックしても、基本的動作はさせない
  $("ul a").click(function(e){
    e.preventDefault();
  });

  // アンカー動作はこれ。
  $("ul li").click(function() {
    $("ul li").removeClass("oncursor");
    // アコーディオンメニューの下に ul がある?
    var child = $(this).children("ul");
    if (child.html() != null) {
      child.slideToggle();  // あればそれを表示
      $(this).addClass("oncursor");
    }
    else {
      // なければ aタグの「href」(リンク)を取得し、それにリダイレクト
      child = $(this).children("a");
      var target = child.attr("href");
      if (target != null) {
        location.href = target;
      }
    }
  });
});

こうすることで、Javascriptの存在を気にせず、HTMLを作る側はアコーディオンメニューを実装できる、というわけです。

ただ冒頭書いたとおり、これではSEOには不向き?と思える点が2つあります。

アコーディオンメニューの子供側は開くまでは見えない=Googlebotは認識できるのか
開いたり閉じたりするということは、「メニューを非表示にすることがある」ということなんです。それをGooglebotさんはうまく判定してくれるのでしょうか・・・?
location.hrefで飛ばすといったリンク方法をGooglebotは認識できるのか
location.href ってリダイレクトなんだよね・・・?もともとaタグの動作を封じて行っているから正しくないことは分かっているけど、そもそも location.href をGooglebotさんがわかってくれるのかな?

・・・実際Googlebotさんが引っかけてくれないことを考えると、おそらく両方とも「認識できない」が正しいんでしょうね。

アコーディオンメニューやlocation.hrefを使っていて「いや当方はGooglebotに引っ掛かってますよ」というかた、情報いただければ幸いです。