パンくずリストにnav要素とmicrodataを使う

セマンティックに。

nav要素

HTML5から追加された<nav>タグ。包含したHTMLタグはサイトの主要なナビゲータであることを意味する。

nav 要素を使ったセマンティックなナビゲーション - html5doctor - HTML5.JP

microdata

HTMLに埋め込むメタデータ。

ソースコード

<nav id="breadcrumbs">
    <ul>
        <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a itemprop="url" href="http://www.example.jp"><span itemprop="title">Home</span></a>
        </li>
        <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a itemprop="url" href="http://www.example.jp/blog/"><span itemprop="title">Item1</span></a>
        </li>
        <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
            <span itemprop="title">現在ページ</span>
        </li>
    </ul>
</nav>

汚い。microdataのせいでコードが汚い。

HTMLに埋め込むメタデータの形式にはいくつかある。microdata, RDFa, JSON-LD。Google的にはJSON-LDが推奨らしい。しかしJSON-LDを表記してもHTML上は表示されない。WebComponentがキーワードになりそうだがイマイチわからない。

• https://www.suzukikenichi.com/blog/google-finally-supports-breadcrumbs-with-schema-org/
• https://www.suzukikenichi.com/blog/how-to-implement-multiple-breadcrumbs-with-schema-org/

また、動的にするには以下が参考になりそう。

• 【制作Tips】CSSだけでドロップダウンメニュー | Webデザインラボ

所感

パンくずリストの作成は大変そう。発展途上なこともあり振り回されている感。一旦放置して別のことをやろう。