パンくずリストの構造化マークアップ
ウエブページのパンくずリストにmicrodataで構造化マークアップを施すと、グーグルの検索結果のページにリッチスニペットとして表示されます。パンくずリストが検索結果に表示されると、他のサイトより日本語表示のパンくずリストは目立ちます。
グーグル検索結果にパンくずリストを表示させる方法
トップページから該当ページへの道筋を表示するのがパンくずリスト(breadcrumb)と呼ばれるものです。これをウェブで表示させただけでは、リッチ スニペット楽天 と呼ばれる、グーグルの検索結果にパンくずリストを表示させるのは一般的にはできません。
グーグルによると、パンくず情報をウェブページ内で適切にマークアップすると、パンくず情報を識別して検索結果に表示できるとの事です。つまり、構造化マークアップをしてパンくずリストを表示させようという訳です。
パンくずリストが検索結果に表示されると、URLだけ表示している他のサイトより、日本語表示のパンくずリストは少しだけ目立つようになります。これによって、少しでもアクセスが増えれば良いのですがどうでしょうか。
microdataで構造化マークアップの方法
グーグルが推奨しているmicrodataで構造化マークアップをして、リッチスニペットを検索結果ページに表示させる方法を紹介しましょう。なお、これはHTML5に準拠した記述方法であり、XHTMLやHTML4などではW3Cエラーになります。
パンくずリストは次のように表示されているものとします。
トップ > 修理 > テレビ修理
パンくずリストの部分のHTMLコードは次のように単なるaタグのリンクになっているものです。
<a href="http://example.jp/">トップ</a> > <a href="http://example.jp/repair/">修理</a> > テレビ修理
実際のmicrodataマークアップ
これを次のように書き換えてmicrodataの構造化マークアップを適用します。
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://example.jp/" itemprop="url"><span itemprop="title">トップ</span></a> > </span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://example.jp/repair/" itemprop="url"><span itemprop="title">修理</span></a> > </span> テレビ修理
やっていることは簡単で、まず、パンくずリストの各項目を、「itemscope」に「itemtype」属性を指定したspanタグで囲みます。次に、各パンくずリストのaタグにitemprop="url"属性を追加します。更に、各パンくずリストの表示名を、itemprop="title"属性を付けたspanタグで囲みます。
パンくずリストの各項目をspanタグではなくdivタグで囲むと、divタグはブロック要素なのでパンくずリストの途中で改行されてしまいます。必ずspanタグなどのインライン要素で囲んでください。
私の場合、実際はPHPを使ってパンくずリストを自動的に生成しているので、その各部分に上記の変更を追加するだけです。
リッチスニペット テストツールで確認します
パンくずリストに構造化マークアップができたら、グーグルの「構造化データテストツール」を使ってうまく設定できているかどうかを確認します。テストツールにURLを指定して「プレビュー」ボタンをクリックします。抽出された構造化データにちゃんと表示されていればOKです。