パンくずリスト

 サイトにパンくずリストを設定します。これは、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: “"; }

 これで、パンくずリストになりました。

web サイト

Posted by sirius