♪僕の生き方全てが君の人生の道標になれるように (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
- item
- itemListOrder
- numberOfItems
- itemListElement
ということで、この階層に従ってマークアップしてみる。 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
asamuzaK.jp : ♪僕の生き方全てが君の人生の道標になれるように (c) schemaスイッチ ~ パンくずリストを構造化データでマークアップしてみる http://t.co/8iUNQdDdvn
ツイート 2
http://t.co/8iUNQdDdvn のチェック結果 Structured Data Linter http://t.co/RGg96XDbP7 Google Structured Data Testing Tool http://t.co/zqStOzrVqY
ツイート 3
でも Testing Tool — Google Developers https://t.co/t0S77Kz5Rq だと検証結果が右側に出てこない…orz 全部typeof="WebPage"のpropertyとしているせいかな http://t.co/8iUNQdDdvn
ツイート 4
schemaにBreadcrumbListが追加されてリストとして前後関係は表現できるようになったとはいえ、homeとかdirectory、あるいはchildのようにヒエラルキーを表すプロパティがないから悩ましいんだな、きっと… http://t.co/8iUNQdDdvn
ツイート 5
という点では、パンくずリストに関して言えば、schemaよりも、data-vocabularyを使った方がちゃんと構造を示すことができる http://t.co/8iUNQdDdvn
ツイート 6
category http://t.co/4mvfB1Vgvr を使える場所が増えて ListItem http://t.co/tk9bj9nULu でも使えるThingのプロパティーになればたぶん無問題になりそうな気がする… http://t.co/8iUNQdDdvn
ツイート 7
それとも item http://t.co/LjhOoBOxug のプロパティーとしてかな? http://t.co/8iUNQdDdvn
ツイート 8
ひょっとして炎上に便乗するチャンスだったのではないのか?(違w asamuzaK.jp : ♪僕の生き方全てが君の人生の道標になれるように (c) schemaスイッチ http://t.co/8iUNQdlCnj