実装3分でクリック率UP！Google検索結果にパンくずリストを正しく表示する方法

こんにちは。keiです。
今回は、パンくずリストをGoogleの検索結果に表示する方法をご紹介したいと思います。

パンくずリストとは

Wikipediaの説明は以下のようになっています。

パンくずリスト（breadcrumb list）は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

ユーザの利便性向上のためのナビであるパンくずリストですが、実は、SEOの観点からも効果的な実装であるといえます。
大きなメリットは以下の2点です。

サイトのリンク構造の最適化
内部リンク数の増大

パンくずリストはGoogleの検索結果に反映される

2009年11月以降、Googleの検索結果には、URLの代わりにパンくずリストが表示されるようになっています。元記事はこちら
定量的なデータはありませんが、URLよりパンくずリストの方がクリック率が上がるような気がします。特に、長かったり複雑だったりするURLであればなおさらではないでしょうか。

ランサーズのページのGoogle検索結果

パンくずリストの実装は、ulやdiv,span等を利用して記述するのが一般的ですが、
実装すれば必ずしもGoogleに認識してもらえるというわけでもないようです。
通常の実装では、以下の様な懸念があります。

認識が不安定で検索結果から消えることがある
Googleボットがサイト構造を把握しにくい
区切り文字を「>」以外にしていると認識されにくい

Googleに正しくパンくずリストを認識してもらうには？

先に挙げた懸念に対する解決策として、Microdataを用いて、Googleにパンくずリストの内容を的確に伝える方法があります。
Microdataとは、HTML文書にメタ情報を付与することができるHTML5の仕様です。
身近な例でいうと、Googleの検索結果での食べログの店舗情報がそれにあたります。
評価の★の数やレビュー数は、Microdataでマークアップされた情報をGoogleボットが解釈して表示しています。

私が大好きな鎌倉の海鮮料理屋さんの食べログ検索結果

Microdataパンくずリストの実装方法

例として、ランサーズでの実装方法を以下に示します。

    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/" itemprop="url">
            	<span itemprop="title">トップページ</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/work/search/design" itemprop="url">
            	<span itemprop="title">デザイン・クリエイター</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/work/search/design/logo" itemprop="url">
            	<span itemprop="title">ロゴ</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        Lancers 「激速会」 のロゴ作成の仕事        
    </span>

ポイントは以下の3点です。

spanタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を追加
aタグ内に「itemprop=”url”」を追加
アンカーテキストを「itemprop=”title”」を追加したspanで囲う

ランサーズはCakePHPで開発されていますが、今月からCakePHPを始めたエンジニアが3分程で実装できました。
配列にパンくず要素を入れて、for文で上記HTML出力を繰り返すだけです。

実装したHTMLは、Googleのリッチスニペットテストツールで、その妥当性を確認できます。

おわりに

SEO効果を見越したパンくずリストの正しい実装方法をご紹介させて頂きました。
Googleは、今後、セマンティック検索を強化していくと公表しています。
(参考:Googleのセマンティック検索、Knowledge Graphが全世界に拡大)

魅力的なコンテンツ作成と共に、サイトの論理構造を的確に伝える実装も意識していきたいと思います。

ランサーズでは鎌倉でランサーズを開発するWebエンジニア・デザイナーを募集しております。
くわしくは募集要項をご参照下さい。