こういう風な形で、色々なサイトで見かけることが多いかと思います。自分がどのあたりにいるか一目でわかるので便利ですよね。

実はそれ、情報収集ロボット（クローラー）にとっても同じなんです。パンくずリストがあることで、クローラーも効率的にサイト内を巡回できるようになります。そのため、ユーザビリティだけでなくSEOの観点からも良いとされています。

パンくずリストの形式

現行のパンくずリストには大きく3タイプあります。JSON-LD形式、RDFa形式、microdata形式の3種類で、それぞれ記述の仕方が異なります。

具体的には、JSON-LD形式は構造化データをJSON形式としてscriptタグ内に記述します。RDFa形式とmicrodata形式はどちらもHTMLのリストを使用していますが、指定の形式が少し違っています。

今回作成したパンくずリストはmicrodata形式を採用しており、最新の構造化データ形式に対応しています。Bloggerのパンくずリストについて以前調べたとき、data-vocabulary.org形式で作成しているものをよく目にしましたが、data-vocabulary.org形式は2020年4月6日以降サポートが終了しているため現在は使えません。

私自身も最初、パンくずリストについてよく知らないままdata-vocabulary.org形式のパンくずリストを作成して沼にはまった覚えがあるので、今回こうした形で記事にしました。

Blogger専用パンくずリストについて

基本情報

今回作成したパンくずリストは、Google検索デベロッパーガイドにおけるパンくずリストの記述例に準拠しています。

リストは<ol>とし、microdata形式で階層ごとに指定を行っています。

機能

パンくずリストの機能について詳しく見ていきます。

まず、今回のパンくずリストは静的ページと記事ページのみを対象にしています（アーカイブやインデックスページはパンくずリストは必要ないと判断したため除外）。

プログラムでは現在のページが静的ページか記事ページかを判断し、静的ページの場合はトップページ（HOME）を先頭にして次の階層に該当ページ、という形になっています。

<!-- 静的ページの場合 -->
<b:if cond='data:blog.pageType == "static_page"'>
  <ol class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
    <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
      <a expr:href='data:blog.homepageUrl.canonical' itemprop='item'>
        <span itemprop='name'><i class='fas fa-home'/> HOME</span>
      </a>
      <meta content='1' itemprop='position'/>
    </li>
    <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
      <span itemprop='name'><data:blog.pageName/></span>
      <meta content='2' itemprop='position'/>
    </li>
  </ol>

上記のコードで、静的ページの階層は以下のように表示されます。

投稿ページの場合は、ラベルが付いている場合と付いていない場合で処理を分けます。

<!-- 記事ページの場合 -->
  <b:if cond='data:blog.pageType == "item"'>
    <b:loop values='data:posts' var='post'>
      <!-- ラベルが付いている場合 -->
      <b:if cond='data:post.labels'>
        <ol class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
          <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <a expr:href='data:blog.homepageUrl.canonical' itemprop='item'>
              <span itemprop='name'><i class='fas fa-home'/> HOME</span>
            </a>
            <meta content='1' itemprop='position'/>
          </li>
          <b:loop index='i' values='data:post.labels' var='label'>
            <!-- <b:if cond='data:label.isLast == "true"'> -->
              <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                <a expr:href='data:blog.homepageUrl.canonical + "search/label/" + data:label.name' itemprop='item'>
                  <span itemprop='name'><data:label.name/></span>
                </a>
                <meta expr:content='data:i + 2' itemprop='position'/>
              </li>
            <!-- </b:if> -->
          </b:loop>
          <li>
            <data:post.title/>
          </li>
        </ol>

ラベルが付いている場合、通常の設定ではトップページを基準としてラベルの名前順に階層が構成されます。b:loopでラベルをすべて表示するまで階層を作り続けるイメージですね。

ラベルの表示が終わると、<data:post.title/>で記事のタイトルを最後に表示します。実際の表示は以下のようになります。

コードの途中にコメントアウトしているb:if文がありますが、これはラベル表示用のオプションです。コメントアウトを外すと、複数あるラベルのうち一番最後のものだけが表示されます。

ラベルが付いていない場合に関しては、静的ページの場合とほぼ同様です。該当するラベルがないため、間に「未分類」というカテゴリをはさんでいます。

導入方法

さて、いよいよパンくずリストの導入です。

テーマのバックアップ

最初にテーマのバックアップを取っておきましょう。

管理画面から「テーマ」→「バックアップ」を選択し、ダウンロードしてファイルを保存します。

HTMLの編集

「テーマ」→「HTMLを編集」をクリックし、編集画面を開きます。

まず、以下のコードを探してください。（「Ctrl+F」で検索すると見つけやすいです。）

<b:include data='top' name='status-message'/>

2つあった場合はPC用とモバイル用なので、両方あるいは適用させたいどちらかのコードの上に以下のコードを配置してください。

<b:include data='posts' name='breadcrumb'/>

次に、以下のコードを探してください。

<b:includable id='main' var='top'>

このコードの上に下記コードを配置してください。

<b:includable id='breadcrumb' var='posts'>
  <!-- 静的ページの場合 -->
  <b:if cond='data:blog.pageType == "static_page"'>
    <ol class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
      <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl.canonical' itemprop='item'>
          <span itemprop='name'><i class='fas fa-home'/> HOME</span>
        </a>
        <meta content='1' itemprop='position'/>
      </li>
      <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <span itemprop='name'><data:blog.pageName/></span>
        <meta content='2' itemprop='position'/>
      </li>
    </ol>
  <b:else/>
    <!-- 記事ページの場合 -->
    <b:if cond='data:blog.pageType == "item"'>
      <b:loop values='data:posts' var='post'>
        <!-- ラベルが付いている場合 -->
        <b:if cond='data:post.labels'>
          <ol class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
              <a expr:href='data:blog.homepageUrl.canonical' itemprop='item'>
                <span itemprop='name'><i class='fas fa-home'/> HOME</span>
              </a>
              <meta content='1' itemprop='position'/>
            </li>
            <b:loop index='i' values='data:post.labels' var='label'>
              <!-- <b:if cond='data:label.isLast == "true"'> -->
                <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a expr:href='data:blog.homepageUrl.canonical + "search/label/" + data:label.name' itemprop='item'>
                    <span itemprop='name'><data:label.name/></span>
                  </a>
                  <meta expr:content='data:i + 2' itemprop='position'/>
                </li>
              <!-- </b:if> -->
            </b:loop>
            <li>
              <data:post.title/>
            </li>
          </ol>
        <b:else/>
          <!-- ラベルが付いていない場合 -->
          <ol class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
              <a expr:href='data:blog.homepageUrl.canonical' itemprop='item'>
                <span itemprop='name'><i class='fas fa-home'/> HOME</span>
              </a>
              <meta content='1' itemprop='position'/>
            </li>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
              <span itemprop='name'>未分類</span>
              <meta content='2' itemprop='position'/>
            </li>
            <li>
              <data:post.title/>
            </li>
          </ol>
        </b:if>       
      </b:loop>
    </b:if>
  </b:if>
</b:includable>

これで、パンくずリスト本体の設置は完了です。

補足ですが、上記の配置の仕方はあくまでも一例です。自分で好きな場所に設置したいという場合は、<b:include data='posts' name='breadcrumb'/>を適宜好きな場所に置き直してください。

CSSの追加

パンくずリストにCSSを追加します。

]]></b:skin>

上記のコードを探し、以下のコードと置き換えてください。

.breadcrumbs {
  list-style: none;
  font-size: 13px;
  color: #666;
  padding: 0;
  margin: 0 0 14px;
}

.breadcrumbs li {
  display: inline;
  list-style: none;
}

.breadcrumbs li:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f105';
  padding: 0 0.3em;
}

.breadcrumbs li:last-child:after {
  content: '';
}

.breadcrumbs a, .breadcrumbs a:visited {
  color: #666;
}

.breadcrumbs a:hover {
  text-decoration: none;
}

.breadcrumbs .fa-home {
  color: #87cefa;
}
]]></b:skin>

以上で、パンくずリストの導入は完了です。テーマを保存し、ちゃんとパンくずリストが表示されているか確認してみてください。

ちなみに、CSSは当ブログのパンくずリストと全く同じものです。お使いのサイトのデザインに合わせて、適宜デザインを調整するようにしてください。

注意点

今回ご紹介したパンくずリストは、記事のラベルを利用して表示しています。そのため、記事以外の部分（ヘッダーやフッターの前後など）では正しく動作しないためご注意ください。

また、パンくずリストを置いた場所によっては、サイドバーなどと高さのずれが生じることがあると思います。そうした場合、以下の記事で紹介している方法が役立ちますので是非ご確認ください。

Bloggerをもっと便利に！独自タグ活用術 | IB-Note

BloggerにはHTML編集で使える独自タグがあります。初めて目にすると面食らう独自タグですが、使い慣れると非常に便利なものです。今回は、独自タグを駆使すればこんなことができるよ～というのを使用法とともにご紹介します。

itblogger-note.blogspot.com

追記

パンくずリストを正しく設置できた場合、下の画像のようにGoogle検索の結果にもしっかりと階層が表示されます。

パンくずリストが有効かどうかについては、Google Search Consoleのリッチリザルトテストで確認できます。

上と同じ記事で試してみた結果はこちら。

何か問題がある場合はここでエラーが表示されるので、パンくずリスト導入後に一度確認してみることをおすすめします。