ul（リストタグ）とmicrodata構造化マークアップでパンくずリストにこだわりを

皆さん、パンくずリスト、使ってますか。
パンくずリスト、ああ、なんてかわいらしく、愛おしい響きなんでしょう。
かの有名な「ヘンゼルとグレーテル」が帰り道で迷わないようにパンをすこしずつちぎって残していったというエピソードに由来するこのパンくずリストは、その名の通りユーザーも検索エンジンも迷子にさせない、それはもう、必須といっていいサイトパーツでは無いでしょうか。
今日はそんなパンくずリストに対する私のこだわりをご紹介します。

パンくずリストをマークアップするときのポイント

さて、そんなパンくずリストですが私がマークアップする際に注意しているポイントが2つあります。

1. ul（リストタグ）を使用する
2. microdata形式の構造化マークアップを適用する

実はul（リストタグ）を使ってパンくずをマークアップする方法やmicrodata形式の適用方法はそれぞれ個別に素晴らしい記事が紹介されているんですが、両方兼ね備えたものがなかったのでここでご案内しようと思います。

ul（リストタグ）を使用する

別に<div>でも<p>でもいいなんて言わないで！見えないコードを飾るのが江戸っ子の粋なところ。せっかくですからGoogleフレンドリーなセマンティックWeb（意味のあるコーディング）にとことんこだわりましょう。「パンくずリスト」ですからリストタグ（<ul>→<li>で）を使います。まずはHTMLのサンプルをどうぞ。

続いてスタイルシートで横に並べちゃいましょう。hoverなんかも設定して付けてオシャレに。細かいところは異なりますがこのページのパンくずリストも同じ原理で記述されています。サンプルとしてご覧ください。このページのパンくずリスト

microdata形式の構造化マークアップを適用する

構造化マークアップというのは特定の形式をHTMLに追記することで、ページ内に含まれる情報に意味付けするソースコード記述方法のことです。

この構造化マークアップはパンくずリストを指し示すのにも使えます。かつてはmicrodata、microformats、RDFaなど、仕様が乱立していましたが紆余曲折ありまして現在はmicrodata形式が主流になりつつあります。

そして、構造化マークアップをパンくずリストに適用すればGoogleの検索結果にパンくずリストが表示されるようになるという、嬉しいメリットがあるんですよ。
以下はGoogleで「構造化マークアップ」と検索した時のこのサイトのスニペット。緑の文字のところに注目してください。

「構造化マークアップ」に関する上記のページが、「HTMLソースコードの最適化」に類する内容であることがひと目でわかるようになりますよね。

下記はulタグを使用したパンくずリストのコードに構造化マークアップを適用したサンプルコード。

一見すると複雑に見えますが、

1. liタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を
2. aタグ内に「itemprop=”url”」を
3. あとはアンカーテキスト部分をspanで囲んで「itemprop=”title”」とすればOK
4. ただしいずれも当該記事部分（自分がいるページのパンくず）には不要

構造化マークアップによるリッチスニペットがクリック率にどれだけ影響するのかは分かりません。ですが少なくともGoogleとユーザー、両方にとって親切なものになることは確実です。であればWebマスターとして実装しない手はありませんよね。

2012年2月6日追記

@tyto_styleさんが上記をWordPressで実現する方法をブログで紹介しています。大変わかりやすい記事ですのでWordPressユーザーの方はこちらも合わせてご覧ください。

Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ（SEOモード）

2019年 最新版 SEOセルフチェックリスト 無料プレゼント！

年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。

無料で資料をダウンロードする

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

片川 創太

2014年12月までディーエムソリューションズ株式会社SEO対策チームに所属。「SEOは実装」を信条に、コミュニケーションを重視するスタイルで数多くのサイトのコンサルティングを手がける。内部施策に関して造詣が深く、「SEOまとめ」というtwitterアカウントを通じて日々情報発信を続けている。 Twitter： SEOまとめ

>最新記事 by 片川 創太 (全て見る)

• AdWordsの拡張テキスト広告をフル活用するためのあれこれ - 2016年9月6日
• 検索結果にサイトリンクを表示させるための設定方法 - 2015年12月22日
• ステージング環境（開発環境・デモ環境・テストサイト）を検索結果から削除する方法 - 2015年12月1日