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

2022.01.04 2012.02.06 SEO記事一覧

この記事をご覧いただいている皆様へ。

このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開されていた記事であり、2014年12月にデジタルマーケティング研究所へ統合されました。

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

1 パンくずリストをマークアップするときのポイント
2 ul（リストタグ）を使用する
3 microdata形式の構造化マークアップを適用する
- 3.1 2012年2月6日追記

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

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

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

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

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

</li>

<li>

<a href=”http://www.example.com/category/”>カテゴリー名</a> >

</li>

<li>

記事名

</li>

</ul>

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

#bread-crumb-list {width: 500px;　/* 横幅は任意の値 */padding: 10px 0px 10px 10px;　/* パディングも任意の値 */

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>

<a itemprop=”url” href=”http://www.example.com/category/”>カテゴリー名</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モード）

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

片川創太

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