Blogger パンくずリスト（構造化データ対応）の作成

English»

多くのブログで参照されている元記事はこちらです。

Breadcrumb for Blogger - Blogger Widgets

さらに、その元記事はこちらです。

Hoctro’s Archived Blog - Trang Lưu Trữ Học Trò: Archived Post: Adding a Breadcrumb Trail to your Blogger Post

Hoctro さん、Aneesh さん、ありがとうございます。
記事の内容は今でも使えるものなのですが、少々古く、以下の問題があります。

構造化データの定義が schema.org でなく、Data-Vocabulary.org になっている。
一般的にパンくずリストで使われるタグ <ol><li> を使っていない。

これらの問題を修正してみます。

参考記事

Breadcrumb | Search | Google Developers

developers.google.com

1. <b:includable> の追加

上の問題を修正した <b:includable> は以下のようになります。
なお、構造化データの形式は RDFa を採用しています。

 <b:includable id='breadcrumb' var='posts'>
<!-- breadcrumb start -->
<ol id='breadcrumb' typeof='BreadcrumbList' vocab='http://schema.org/'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <li property='itemListElement' typeof='ListItem'>
    <a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'>
    <span property='name'>Home</span></a>
    <meta content='1' property='position'/>
  </li>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <li><data:blog.pageName/></li>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- breadcrumb for the post page -->
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
          <b:loop index='index' values='data:post.labels' var='label'>
          <!-- b:if cond='data:label.isLast == &quot;true&quot;' -->
            <li property='itemListElement' typeof='ListItem'>
              <a expr:href='data:label.url' property='item' typeof='WebPage'>
              <span property='name'><data:label.name/></span></a>
              <meta expr:content='data:index + 2' property='position'/>
            </li>
          <!-- /b:if -->
          </b:loop>
          <li><data:post.title/></li>
        <b:else/>
          <li>Unlabelled</li>
        </b:if>
      </b:loop>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <!-- breadcrumb for the label archive page and search pages.. -->
        <li>Archives for <data:blog.pageName/></li>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            <li>All posts</li>
          <b:else/>
            <li>Posts filed under <data:blog.pageName/></li>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:if>
</ol>
<!-- breadcrumb end -->
</b:includable>

これを、HTML の編集 画面で <b:includable id='main' var='top'> の前に挿入します。

※念のため、編集前にバックアップを取っておくことをおすすめします。

注：

保存すると場所が変わります。<b:includable> の定義場所に id がアルファベット順になるようにソートされます。また、先頭行のみインデントされます。

<b:if cond='data:blog.homepageUrl != data:blog.url'> と対応するをコメントアウトすればトップページに表示することができます。
  の箇所をコメントインすれば、（アルファベット順で）最後のラベルのみをパンくずリストに表示できます。
（複数ラベルの場合もアルファベット順・あいうえお順となります。）

Blogger の HTML編集画面での検索機能の使い方

編集画面で Ctrl + F キーを押すと、右肩に Search ボックスが現れます。検索文字を入力後、Enter キーを押すたびに見つかった文字にカーソルが移動します。

2. <b:include> の追加

次に、表示用のウィジェットタグ

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

を <b:include data='top' name='status-message'/> の前に挿入します。

<div class='blog-posts hfeed'> が閉じる </div> の前に置くとページ下部に表示できます。
<b:if cond='!data:mobile'> の前に置けば、モバイル版でも表示できます。

3. CSS の追加

最後に、以下のような CSS を追加します。（適宜カスタマイズしてください。）

 /* breadcrumb */
ol#breadcrumb{
    font-size:13px;
    padding: 8px;
}
#breadcrumb li {
    display: inline;
    list-style-type: none;
}
#breadcrumb li:after {
    content: " > ";
}
#breadcrumb li:last-child:after {
    content: none;
}

以上で完成です。

構造化データテストツールについて

Google の構造化データテストツールでエラーがないか確認できます。

構造化データテストツール

search.google.com

構造化データテストツールの URL には、パンくずリストが表示される記事ページを指定する必要があります。

構造化データテストを実施すると、BlogPosting に大量のエラーが見つかるかもしれません。 Structured Data testing Tool errors on Blogpost Blogger - Google プロダクトフォーラムによると、検索結果に反映したいわけでないなら気にしなくて良いようです。

修正したければ、こちらのサイトが役に立つかもしれません。

doityaar: Fix Schema Errors in Blogger

www.doityaar.com

残課題

パンくずリストはアルファベット順に表示されており、実際の階層構造を表していません。

Blogger ラベル頻度順パンくずリストへ続く。

2017-12-20