編集長ブログ―安田英久
Googleの検索結果ページでパンくずリストを表示するmicrodataの使い方

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

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

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

説明文の下にページの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

この記事が役に立ったらシェア!
tweet108このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

パーミッション
もとは「許諾」を意味する言葉。Webの世界では、サーバー上でのアクセス権を表す場 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore