スキーマ(schema.org)を使用したてパンくずリストをmicrodataマークアップする方法。
記事によって記述例が全然違うので、自分が納得のいく方法を探しました。
古い記事を参考にしすぎると今では記法が変わってエラーが出るようなもあるので注意。
schema.org については、以下のサイトでわかりやすく説明してくれています。
Googleリッチスニペット対策！初心者向けSchema.org解説！
公式ページを参考にしてみる
Schema.orgの公式サイトにある、BreadcrumbListのページを参考にしました。
こちらのページの最下部に、記述例がのっています。例によると構成は以下。
ul : type(BreadcrumbList)
li : prop(itemListElement) , type(ListItem)
a : prop(item)
span : prop(name)
meta : prop(position)
例にならって記述してみると次のような感じ。
<ul itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="リンク">
<span itemprop="name">HOME</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="リンク">
<span itemprop="name">カテゴリなど</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">現在のページ</span>
<meta itemprop="position" content="3" />
</li>
</ul>構造化データテストツールを使用して確認
スキーマの記述が正しくできているかどうかを判断するために、構造化データ テストツールを使用します。
パンくずを表示しているページのURLをコピペすると画面右側に診断結果が表示され、エラーがあればその理由なども説明してくれます。
こちらでエラーがでてなければOKです。
エラーが出る時は
上記の記述でエラーが出る時は、以下の方法を試してみてください。
① : ページ全体を囲む記述をする
私はbodyにWebpageというmicrodataをマークアップしています。
<body itemscope itemtype="http://schema.org/Webpage">② : パンくずのulタグ( olタグ )の部分に属性Breadcrumbを追加
<ul itemprop="Breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">BreadcrumListのページの、記述例の少し上に下のような記述がありました。
Instances of BreadcrumbList may appear as values for the following properties
| Property | On Types | Description |
|---|---|---|
| breadcrumb | WebPage | A set of links that can help a user understand and navigate a website hierarchy. |
WebPageの中のbreadcrumbとして使用してね、みたいなことかと。
おそらく、親の属性が決まっていない状態でBreadcrumbListを使用するとアウトっぽい。
完成系
全体像を含めると以下のように記述。
<body itemscope itemtype="http://schema.org/Webpage">
<ul itemprop="Breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="リンク">
<span itemprop="name">HOME</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="リンク">
<span itemprop="name">カテゴリなど</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">現在のページ</span>
<meta itemprop="position" content="3" />
</li>
</ul>
</body>こんな感じです。
定期的にスキーマの記法に変化がないかチェックするのを忘れずに。
