パンくずリストを作る（HTML）

パンくずリストを入れるとアクセシビリティの向上になって…
とかいうことは聞いていたので、初めて実装してみた。

１）SEOとの関係

調べてみると、まず「パンくずリスト」に
「SEO」がキーワードとしてくっついてくるのがよく分からず。

パッと見たところでは

パンくずリストは「そのページに至るまでの足跡」であって
コンテンツそのものではないから、検索エンジンでひっかかってしまうと
逆に都合が悪い。
（なので、SEOと売り出したいコンテンツとの関係性を
　整理して考える必要がある）

なるほど!!!

２）「構造化して記載する」ということ

「構造化」も、やたらキーワードとして挙がっていた。

先の（１）にも関係して、検索エンジンが「これはパンくずリストなんだ」
ということを理解できるような仕組み（＝構造化した内容）で
パンくずリストをHTMLファイルに書いていく必要がある。

なるほど!!!

構造化して書く方法、代表例では

・Microdata
・RDFa
・JSON-LD

とのこと。
今回は「JSON-LD」でTry!!!

 <!--　パンくずリスト　-->
   <script type="application/ld+json">
       {
       "@context": "http://schema.org",
       "@type": "BreadcrumbList",
       "itemListElement":
       [
           {
           "@type": "ListItem",
           "position": 1,
           "item":
           {
               "@id": "../MR000x/MR0001.html",
               "name": "Menu"
           }
           },
           {
           "@type": "ListItem",
           "position": 2,
           "item":
           {
               "@id": "../MR0010/MR0010.html",
               "name": "Certification"
           }
           }
       ]
       }
   </script>    

こんな感じで一通り書いて、Googleの「構造化データ テストツール」
でテスト。
（https://search.google.com/structured-data/testing-tool/u/0/）

「エラーなし」「警告なし」でOK…と。

ここで気がついたこと…

別にWebサイト上に公開するページを作っていた訳ではないため、
検索されることもなく…。

このコードを書いたからといって、HTML上に
なにか表記されるわけでもないので、特に日の目を見ず。
（＝お疲れさまでした。）

くっ…（調査不足）

３）HTMLで記載する

気を取り直して、実際にパンくずリストとして画面上に表示する階層を
「ul」タグを使って記載。

<nav class="breadcrumbs">
       <div class="breadcrumbs">
           
           <ul class="breadcrumbs">
               <li class="breadcrumbs"><a class="breadcrumbs" href="..\MR000x\MR0001.html" title="Top">Top</a></li>
               <li class="breadcrumbs"><a class="breadcrumbs" href="#!"  title="Certification">Certification</a></li>
           </ul>

       </div>  
   </nav>

突貫工事で作ったので、class名が全部「breadcrumbs」
になってしまったけど、まぁいいや…。

CSSでアイコンや間隔を整えて、仕上げ。

【出典】
https://webliker.info/29643/

https://seolaboratory.jp/92481/

https://webliker.info/94182/#toc_11