パンくずリストを作成する

サイトの構造と現在位置を示すパンくずリスト

パンくずリストは、サイトの構造と現在表示しているページの関係を分かりやすくするために設置します。
サイトの閲覧者のためでもありますが、同時にGoogleなどの検索ロボットに対してサイトの構造をデータとして伝える役割も持ちます。

HTMLのマークアップ例

<ol class="breadcrumbs_list">
	<li><a href="/">トップ</a></li><li><a href="/category-a/">カテゴリーA</a></li><li><a href="/cxategory-a/detail.html">詳細ページ</a></li>
</ol>

サイトの構造はトップページから階層が決まっているため順序リストであるol要素を使ってマークアップするのが一般的です。

CSSのコード例

.breadcrumbs_list li {
	display: inline-block;
	margin-left: 12px;
	padding-left: 16px;
	background: url(./images/icon_breadcrumbs.svg) left center/6px auto no-repeat;
}
.breadcrumbs_list li:first-child {
	margin-left: 0;
	padding-left: 0;
	background: none;
}

横に並べるのでli要素に「display: inline-block」を指定しています。

リストの左側にmargin-leftプロパティとpadding-leftプロパティで余白をつけて、さらに矢印アイコン「icon_breadcrumbs.svg」を背景画像として表示しています。
padding-leftプロパティの方がやや広いのは、このアイコンを表示するスペースを兼ねているためです。

ただし、リストの先頭については左側のアイコンと余白は必要ないため、擬似クラス「:first-child」を使ってこれらを無効にしています。

構造化データを持たせる

冒頭で紹介した通り、パンくずリストには検索ロボットに対してもデータ構造を伝える機能を持たせることができます。
先ほどのパンくずのHTMLに構造データを加えると次のようになります。

コード例

<ol class="breadcrumbs_list" itemscope itemtype="http://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">トップ</span></a><meta itemprop="position" content="1"></li>
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/category-a/"><span itemprop="name">カテゴリーA</span></a><meta itemprop="position" content="2"></li>
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/cxategory-a/detail.html"><span itemprop="name">詳細ページ</span></a><meta itemprop="position" content="3"></li>
</ol>

要素や属性が増えて複雑に見えますが、データのラベリングを追記しているだけだったりするのでルールが分かると簡単です。
1つずつ解説していきます。

ol要素

リストの親要素であるol要素には固定値でitemscope属性とitemtype属性を指定します。
itemtype属性のURLは構造化データのルールが記述されたサイトのもので、ここは固定です。

コード例

<ol class="breadcrumbs_list" itemscope itemtype="http://schema.org/BreadcrumbList">

li要素

リストの子孫要素であるli要素はさらに1つ増えて3つの属性を指定しますが、ここも固定値が入ります。

コード例

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

a要素

li要素の子孫要素であるa要素はitemprop属性のみ追加します。
href属性のURLはそれぞれのa要素で異なりますが、itemprop属性の値は固定で全て「item」が入ります。

コード例

<a itemprop="item" href="/">

span要素

構造化データを持たせるにあたり新しく追加された要素です。
span要素はページ名を表すために追加された要素で、itemprop属性の値を「name」にします。
今回の例では、「トップ」「カテゴリーA」「詳細ページ」がそれぞれページ名となります。

コード例

<span itemprop="name">トップ</span>

meta要素

こちらも新しく追加された要素です。
meta要素に指定しているitemprop属性の「position」はページの階層を表します。

「トップ」はルート階層なので「1」、下層ページの「カテゴリーA」は「2」、さらに下層ページにあたる「詳細ページ」は「3」と言った具合に、階層が深くなるほど値も1つずつ増やしていきます。

コード例

<meta itemprop="position" content="1">

以上が構造化データの内訳です。
構造化データはSEOを重視するなら必須です。