初代編集長ブログ―安田英久

Googleの検索結果ページでパンくずリストを表示するmicrodataの使い方

グーグルの検索結果で少しだけクリックされやすくするための、サイトの作り方

安田英久（Web担編集統括） 2011/7/19 13:00 SEO | 解説／ノウハウ

89 108 236

今日は、検索エンジンに関する話題を。グーグルの検索結果で少しだけクリックされやすくするための、サイトの作り方を紹介しましょう。

グーグルの検索結果ページで御社のサイト内のコンテンツページ（トップページではなく）は、次のどちらのように表示されていますか？

説明文の下にページのURLが表示

説明文の下にドメイン名とパンくずリストが表示

どちらのほうが検索ユーザーの目に留まってクリックされやすいと思いますか？確かなデータはありませんが、パンくずリストのほうがクリックされやすそうですよね（特にWeb担のような無機質なURLの場合は）。

最近の検索エンジンは、サイト上でふつうにパンくずリストを出していれば、自動的に検索結果でパンくずリストを表示するようにしてくれるようです（「リッチスニペット」と呼ばれるもの）。しかし、Web担のように、おかしなこだわりでパンくずリストの区切り文字をふつうの「>」ではなく「«」にしていると、自動認識されずにさみしいことになります。

そこで、ページのHTMLに「microdata」という仕組みで手を加えて、グーグルに「ここがパンくずリストだよ」と教え、検索結果ページで使ってもらえるようにする方法を紹介しましょう。

ふつう、パンくずリスト部分のHTMLは次のような感じになっていると思います。


<a href="/articles">記事一覧</a> > 
<a href="/articles/lpo">LPO</a> > 
<a href="/articles/lpo/electriciteit">エレキテルLPO</a>

これを、次のようにします。


<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="/articles" itemprop="url">
    <span itemprop="title">記事一覧</span>
  </a> >
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="/articles/lpo" itemprop="url">
    <span itemprop="title">LPO</span>
  </a> >
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="/articles/lpo/electriciteit" itemprop="url">
    <span itemprop="title">エレキテルLPO</span>
  </a>
</span>

少しわかりづらいですが、次のような変更を加えています。

パンくずリストの各項目を、「itemscopde」「itemtype」属性を指定したspanタグ（divでも可）で囲み、itemtype属性にパンくずリストタイプを意味する「http://data-vocabulary.org/Breadcrumb」の値を指定して、これがパンくずリストであることを明示する。
各パンくずのリンクのaタグにitemprop="url"属性を付ける。
各パンくずの項目名を、itemprop="title"属性を付けたspanタグで囲む。

というものです。面倒な修正に見えますが、CMSを使ったサイトならば、パンくずリスト部分の処理を変えるだけで大丈夫なはずです。

変更後のHTMLで正しくパンくずリストが認識されているかは、グーグルの「リッチスニペットテストツール」を使って確認できます。テストツールにURLを指定して［Preview］ボタンをクリックすると、グーグルがそのページに埋め込まれたデータをどう解釈していて、どんなリッチスニペットを生成するのかが表示されます。

リッチスニペットテストツールで確認

結構簡単ですよね？ Web担でも、サイトを修正したら1～2日後には一部のページに関しては、検索結果ページでパンくずリストが表示されるようになっていました。

ただし、こうしてデータを埋め込んだとしても、100%確実に検索結果ページでリッチスニペットとして表示されるわけではありません。データが間違っていたり足りなかったりすると、リッチスニペットとして表示されない場合があります。

また、リッチスニペット用のデータを指定する方式にはいくつかありますが、ここでは検索エンジンが今後メインに扱っていくといわれているmicrodata（マイクロデータ）を使っています。microdataが想定しているページのマークアップはHTML5ですので、Web担のようなXHTMLサイトではよろしくないのかもしれませんし、そもそもHTML文法チェッカーなどでエラーだと表示されますので、ガイドラインなどでそのあたり制限がある場合は注意したほうがいいかもしれません。

でも、Web担としては、ブラウザでの表示に問題ないし、うまくクライアント側のソフトが対応してくれればアクセシビリティ対応にもなると考えて、文法違反でも気にせずにXHTML＋microdataで使っています。

あとは、検索結果ページでのパンくずリスト表示が本当にユーザーのためになっているかの確認ですね。Web担の場合はコーナー名などが表示されることが多いのですが、少しコーナー名が長いかもしれません。また、検索結果のパンくず項目をクリックしてサイトに来る人の数などを、今後チェックしていこうと思っています。

参考情報

・パンくずリスト（リッチスニペットと構造化マークアップ）（Googleヘルプ）
→ http://www.google.com/support/webmasters/bin/answer.py?hl=jp&answer=185417

・リッチスニペットテストツール（Google、英語）
→ http://www.google.co.jp/webmasters/tools/richsnippets

・検索3社が協力してセマンティックウェブを促進、schema.orgイニシアティブを発表（SEM R）
→ http://www.sem-r.com/google-2010/20110603032703.html