[Blogger] QooQのパンくずリストに複数のラベルを表示する方法（修正版）

以前QooQのパンくずリストに複数のラベルを表示する方法を解説したのですが、構造上問題があったため修正版をあげます。

また元のQooQのプロトコルの指定が古かったので同時に修正しています。

本記事ではQooQのパンくずリストを新しいものに変更し、複数のラベルを表示する方法を解説します！

以前の方法の問題点

以前の方法の何が問題だったのかを解説します。

パンくずリストとは？

そもそもパンくずリストとは、ユーザーが「今、サイト内のどの階層にいるのか」を視覚的にわかりやすく示し一つ上の階層やトップページへワンクリックで戻れるようにする「現在地マップ」のような役割を持っています。

ただし、パンくずリストには大きく分けて「ユーザーのため」と「検索エンジンのため」の２つの重要な役割があります。

① ユーザーのため

ユーザーが検索から直接目的の記事にたどり着いたとき、「このブログの他の記事も読んでみたい」と思った際、すぐに親カテゴリやホームに戻ることができます。

サイト内回遊率が上がり、ユーザーが離脱しにくくなります。

② 検索エンジンのため

検索エンジン（Google）の巡回ロボット（クローラー）は、Webサイトの構造を完璧に把握しているわけではありません。

パンくずリストを正しく設置（構造化データ化）することで、Googleに対して「このページはトップページの下にあるこのカテゴリに属しています」「このサイトはこういう階層構造になっています」というアピールができます。

以前の方法は「ユーザーのため」だけだった

以前の方法は複数のラベルが全て表示され、ユーザー（読者）に対しての問題は解決されていました。

しかし、「検索エンジンのため」という点では問題が発生していました。

先ずGoogleの仕様として、パンくずリストのpositionは、1, 2, 3……と重複せずかつ順番に連続した整数でなければなりません。

複数の要素に同じ position='2' が振られると、構造化データとしてエラーが起こります。

<b:if cond='data:label.isLast == "true"'>を削除してしまうと記事に設定されている全てのラベルがループで出力されることになり、結果としてホーム（1）のあとにカテゴリA（2）・カテゴリB（2）……のように出力され、Googleが期待するパンくずの階層構造から外れてしまうようになっていたのです。

簡単に言えば、検索エンジンからすると「パンくずリストは一本道にしなさい！」ということですね。

QooQパンくずリスト修正方法

パンくずリストに複数のラベルを表示するにあたり、細々と修正も加えたのでパンくずリストのHTMLを丸ごと変更します。

HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。

HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。

パンくずリストHTML

HTML編集でBreadcrumbListを検索します。

検索した文字を含む行の<div class='breadcrumbs' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>から</div>までを以下のHTMLに置き換えます。


        <b:includable id='mybreadcrumb' var='posts'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
    <a expr:href='data:blog.homepageUrl' itemprop='item'>
      <span itemprop='name'>ホーム</span>
    </a>
    <meta content='1' itemprop='position'/>
  </span>
  <span> / </span>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
        <!-- Google向け 最初の1つだけを構造化データとして出力 -->
        <b:loop index='i' values='data:post.labels' var='label'>
          <b:if cond='data:i == 0'>
            <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
              <a expr:href='data:label.url + &quot;?max-results=10&quot;' itemprop='item'>
                <span itemprop='name'><data:label.name/></span>
              </a>
              <meta content='2' itemprop='position'/>
            </span>
          </b:if>
        </b:loop>
        <!-- ユーザー向け 2つ目以降のラベルを構造化データなしで表示 -->
        <b:loop index='j' values='data:post.labels' var='label'>
          <b:if cond='data:j &gt; 0'>
            <span>, </span>
            <a expr:href='data:label.url + &quot;?max-results=10&quot;'>
              <span><data:label.name/></span>
            </a>
          </b:if>
        </b:loop>
      <b:else/>
        <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
          <span itemprop='name'>その他</span>
          <meta content='2' itemprop='position'/>
        </span>
      </b:if>
    </b:loop>
  <b:else/>
    <b:if cond='data:blog.pageName != &quot;&quot;'>
      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.url' itemprop='item'>
          <span itemprop='name'><data:blog.pageName/></span>
        </a>
        <meta content='2' itemprop='position'/>
      </span>
    </b:if>
  </b:if>
</div>

これでQooQのパンくずリストの修正は完了です。

パンくずリストの表示は以下のようになります。