ul（リストタグ）とmicrodata構造化マークアップでパンくずリストにこだわりを
この記事をご覧いただいている皆様へ。
このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開されていた記事であり、2014年12月にデジタルマーケティング研究所へ統合されました。
皆さん、パンくずリスト、使ってますか。
パンくずリスト、ああ、なんてかわいらしく、愛おしい響きなんでしょう。
かの有名な「ヘンゼルとグレーテル」が帰り道で迷わないようにパンをすこしずつちぎって残していったというエピソードに由来するこのパンくずリストは、その名の通りユーザーも検索エンジンも迷子にさせない、それはもう、必須といっていいサイトパーツでは無いでしょうか。
今日はそんなパンくずリストに対する私のこだわりをご紹介します。
パンくずリストをマークアップするときのポイント
さて、そんなパンくずリストですが私がマークアップする際に注意しているポイントが2つあります。
実はul（リストタグ）を使ってパンくずをマークアップする方法やmicrodata形式の適用方法はそれぞれ個別に素晴らしい記事が紹介されているんですが、両方兼ね備えたものがなかったのでここでご案内しようと思います。
ul（リストタグ）を使用する
別に<div>でも<p>でもいいなんて言わないで！見えないコードを飾るのが江戸っ子の粋なところ。せっかくですからGoogleフレンドリーなセマンティックWeb（意味のあるコーディング）にとことんこだわりましょう。「パンくずリスト」ですからリストタグ（<ul>→<li>で）を使います。まずはHTMLのサンプルをどうぞ。
</li>
<li>
<a href=”http://www.example.com/category/”>カテゴリー名</a> >
</li>
<li>
記事名
</li>
</ul>
続いてスタイルシートで横に並べちゃいましょう。hoverなんかも設定して付けてオシャレに。細かいところは異なりますがこのページのパンくずリストも同じ原理で記述されています。サンプルとしてご覧ください。このページのパンくずリスト
float: left;
text-align: left;
}
#bread-crumb-list li {
display: inline;
padding-right: 2px;
text-align: left;
}
#bread-crumb-list li a {
color: #333333; /* 通常時の文字色 */
}
#bread-crumb-list li a:hover {
text-decoration: underline;
color: #bbbbbb; /* マウスオンした時の文字色 */
}
microdata形式の構造化マークアップを適用する
構造化マークアップというのは特定の形式をHTMLに追記することで、ページ内に含まれる情報に意味付けするソースコード記述方法のことです。
この構造化マークアップはパンくずリストを指し示すのにも使えます。かつてはmicrodata、microformats、RDFaなど、仕様が乱立していましたが紆余曲折ありまして現在はmicrodata形式が主流になりつつあります。
そして、構造化マークアップをパンくずリストに適用すればGoogleの検索結果にパンくずリストが表示されるようになるという、嬉しいメリットがあるんですよ。
以下はGoogleで「構造化マークアップ」と検索した時のこのサイトのスニペット。緑の文字のところに注目してください。
「構造化マークアップ」に関する上記のページが、「HTMLソースコードの最適化」に類する内容であることがひと目でわかるようになりますよね。
下記はulタグを使用したパンくずリストのコードに構造化マークアップを適用したサンプルコード。
</li>
<li itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a itemprop=”url” href=”http://www.example.com/category/”><span itemprop=”title”>カテゴリー名</span></a> >
</li>
<li>
記事名
</li>
</ul>
一見すると複雑に見えますが、
- liタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を
- aタグ内に「itemprop=”url”」を
- あとはアンカーテキスト部分をspanで囲んで「itemprop=”title”」とすればOK
- ただしいずれも当該記事部分（自分がいるページのパンくず）には不要
構造化マークアップによるリッチスニペットがクリック率にどれだけ影響するのかは分かりません。ですが少なくともGoogleとユーザー、両方にとって親切なものになることは確実です。であればWebマスターとして実装しない手はありませんよね。
2012年2月6日追記
@tyto_styleさんが上記をWordPressで実現する方法をブログで紹介しています。大変わかりやすい記事ですのでWordPressユーザーの方はこちらも合わせてご覧ください。
Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ（SEOモード）
【SEOコンサルタント監修】
2017年 最新版 SEOセルフチェックリスト 無料プレゼント！
年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。
内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。
本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。
>最新記事 by 片川 創太 (全て見る)
- AdWordsの拡張テキスト広告をフル活用するためのあれこれ - 2016年9月6日
- 検索結果にサイトリンクを表示させるための設定方法 - 2015年12月22日
- ステージング環境（開発環境・デモ環境・テストサイト）を検索結果から削除する方法 - 2015年12月1日
Google、スマートフォン向けのプレイス検索機能を強化
「短いURL」が意図せずインデックスされてトラブルになる事例が頻発中