パンくずリストの構造化データを JSON-LD で書く
以前、パンくずリストを Google インデックスに認識させるため、RDFa を使って構造化しました。ところが、RDFa だと、HTMLLint がエラーとカウントするので、Google が推奨する JSON-LD に書き換えました。
HTML
HTML は ol タグで普通に書きます。「ラズパイで遊ぼう！」の「ソフトウェア」のページを例にします。
<body>
<div class="bread">
<ol>
<li><a href="https://sirius10.net/">ホーム</a> </li>
<li><a href="https://sirius10.net/RaspberryPi/">ラズパイで遊ぼう！</a></li>
<li>ソフトウェア</li>
</ol>
</div>
</body>
css は以前パンくずリストを設置したときの css のままです。
JSON-LD
構造化データは、ヘッダ部に書きました。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://sirius10.net/"
},{
"@type": "ListItem",
"position": 2,
"name": "ラズパイで遊ぼう！",
"item": "https://sirius10.net/RaspberryPi/"
},{
"@type": "ListItem",
"position": 3,
"name": "ソフトウェア"
}]
}
</script>
パンくずリストと、構造化データが別れてしまうので、二箇所をメンテしなければなりません。少し面倒になります。今風の web ページは私のように手で打ち込むのではなくプログラムで生成するので問題にはならないのでしょう。