♪僕の生き方全てが君の人生の道標になれるように (c) schemaスイッチ

パンくずリストを構造化データでマークアップしてみる

schemaにBreadcrumbListが追加されたと今更ながら知ったので、実際にパンくずリストをどのように構造化できるのか試してみた。
schema.org v1.92で追加されたBreadcrumbList
schema.orgがv1.92へ更新、パンくずリストのサポートは近いか?

なお、試行錯誤なので文字通り仕様を錯誤している可能性が大いにあるのでご注意をw
誤りのご指摘は大歓迎です!

さて、schemaに追加されたBreadcrumbListはどのようなものなのかというと…

Thing > Intangible > ItemList > BreadcrumbList

A BreadcrumbList is an ItemList consisting of a chain of linked Web pages, typically described using at least their URL and their name, ending with the current page.

ではそのItemListはというと…

Thing > Intangible > ItemList

A list of items of any sort—for example, Top 10 Movies About Weathermen, or Top 100 Party Songs. Not to be confused with HTML lists, which are often used only for formatting.

Not to be confused with HTML lists, which are often used only for formatting.とわざわざ断り書きしてあるあたりに、この先ドツボの予感がプンプンとしてくる…w

さて、BreadcrumbListのプロパティーはItemListとThingのプロパティーがとれるが、ItemList関連のプロパティーに限定してみると、その構造はこんな感じになる。

  • BreadcrumbList
    • itemListElement
      • item
        • additionalType
        • alternateName
        • description
        • image
        • name
        • potentialAction
        • sameAs
        • url
      • nextItem
      • position
      • previousItem
    • itemListOrder
    • numberOfItems

ということで、この階層に従ってマークアップしてみる。 HTML的に表現しきれないかもしれないものは、便宜的にmeta要素でマークアップしてある。

元のパンくずリストは例えばこんな感じだとしたら…


<ol>
	<li><a href="example.com/" rel="home">ホーム</a></li>
	<li><a href="example.com/category/" rel="directory">カテゴリー</a></li>
	<li><a href="example.com/category/subcategory/" rel="directory">サブ・カテゴリー</a></li>
	<li>記事</li>
</ol>

それがこうなった…


<ol vocab="http://schema.org" typeof="BreadcrumbList">
	<meta property="itemListOrder" content="Ascending" />
	<meta property="numberOfItems" content="4" />
	<li property="itemListElement" typeof="ListItem">
		<meta property="position" content="1" />
		<meta property="nextItem" content="カテゴリー" />
		<span property="item" typeof="Thing">
			<a href="example.com/" rel="home" property="url">
				<span property="name">ホーム</span>
			</a>
		</span>
	</li>
	<li property="itemListElement" typeof="ListItem">
		<meta property="position" content="2" />
		<meta property="previousItem" content="ホーム" />
		<meta property="nextItem" content="サブ・カテゴリー" />
		<span property="item" typeof="Thing">
			<a href="example.com/category/" rel="directory" property="url">
				<span property="name">カテゴリー</span>
			</a>
		</span>
	</li>
	<li property="itemListElement" typeof="ListItem">
		<meta property="position" content="3" />
		<meta property="previousItem" content="カテゴリー" />
		<meta property="nextItem" content="記事" />
		<span property="item" typeof="Thing">
			<a href="example.com/category/subcategory/" rel="directory" property="url">
				<span property="name">サブ・カテゴリー</span>
			</a>
		</span>
	</li>
	<li property="itemListElement" typeof="ListItem">
		<meta property="position" content="4" />
		<meta property="previousItem" content="サブ・カテゴリー" />
		<span property="item" typeof="Thing">
			<span property="name">記事</span>
		</span>
	</li>
</ol>

ところが、typeofのスコープを持たせている中でrel="home"とかを使うと、Google先生から「そんなプロパティーはない!」と怒られたorz
Structured Data Linterでは大丈夫。

RDFa liteの仕様では「Should」として、こう規定されている。

However, even if authorized by the Host Language, the usage of rel and rev should be restricted to non-RDFa usage patterns, as defined by the Host Language.

あと、Googleだと、urlの値がURLではなくてText(nameと一緒の文字列)になっているけど、これは今後改善されるのかな?

さて、meta要素とかを取っ払って必要最小限のマークアップをするとなると、こんな感じになった。


<ol vocab="http://schema.org" typeof="BreadcrumbList">
	<li property="itemListElement" typeof="ListItem">
		<span property="item" typeof="Thing">
			<a href="example.com/" property="url">
				<span property="name">ホーム</span>
			</a>
		</span>
	</li>
	<li property="itemListElement" typeof="ListItem">
		<span property="item" typeof="Thing">
			<a href="example.com/category/" property="url">
				<span property="name">カテゴリー</span>
			</a>
		</span>
	</li>
	<li property="itemListElement" typeof="ListItem">
		<span property="item" typeof="Thing">
			<a href="example.com/category/subcategory/" property="url">
				<span property="name">サブ・カテゴリー</span>
			</a>
		</span>
	</li>
	<li property="itemListElement" typeof="ListItem">
		<span property="item" typeof="Thing">
			<span property="name">記事</span>
		</span>
	</li>
</ol>

見た目のためではなく構造化のため、ではあるが、これでもdiv厨ならぬspan厨みたいでマークアップが気持ち悪い…orz

にもかかわらず、metaもrelもとっちゃったら上下(階層)の関連性が失われてしまっている…orz

W3Cのバリデーターにかけてみたら、ol要素の直下にあるmeta要素はさすがに怒られたけど、li要素の子としては置けるっぽいので(name属性はないけどproperty属性があるので、フロー・コンテンツの中に置いてもOKってことなのかな?)、li要素の中のmeta要素は残しておく方がベターかもしれない。 (でも、自分のサイトでは今のところmeta要素ではなくrel属性の方をあえて残していたりするけど…)

続きあり

"♪僕の生き方全てが君の人生の道標になれるように (c) schemaスイッチ"へのTwitter上でのコメントやRT

8件のツイートがあります。

ツイート 1

ツイート 2

ツイート 3

ツイート 4

ツイート 5

ツイート 6

ツイート 7

ツイート 8