パンくずリスト
サイトにパンくずリストを設定します。これは、SEO 的に設置したほうがいいということです。そのために、構造化データを準備します。
google の上級者向け SEO のパンくずリストを見ると、いくつか方法があるようです。
Google では、JSON-LD を推奨しているようですが、今回は、RDFa を使ってみます。普通の HTML タグの OL だけでもいいようですが、クローラがきちんと認識できるように構造化する RDFa を使います。
HTML で構造化したリストを作成
body 内に ol タグを使ってパンくずリストを作ります。例えば、このサイトの「ラズパイで遊ぼう！」の「ソフトウェア」ページのパンくずリストは次のようになります。
<body> <div class="bread"> <ol vocab="https://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://sirius10.net/"> <span property="name">ホーム</span></a> <meta property="position" content="1″> </li> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://sirius10.net/RaspberryPi/"> <span property="name">ラズパイで遊ぼう！</span></a> <meta property="position" content="2″> </li> <li property="itemListElement" typeof="ListItem"> <span property="name">ソフトウェア</span> <meta property="position" content="3″> </li> </ol> </div> </body>
CSS で体裁を整える
このままでは、普通のリストなので、css で体裁を整えます。そのために div タグに「bread」クラスを設定しています。
.bread { background-color: #f0fff8; } .bread ol { list-style-type: none; margin: 0 0 10px 0; padding: 0; font-size: 100%; } .bread ol li { display: inline; } .bread ol li::after { content: " > “; } .bread ol li:last-child::after { content: “"; }
これで、パンくずリストになりました。