【最新】Blogger専用パンくずリストを作ってみました
QooQのようなテンプレートは最初から導入されているようですが、デフォルトではBloggerにパンくずリストは存在しません。Bloggerシンプルすぎ疑惑。
というわけで、テーマをいじりながら色々と情報を集め、Blogger専用のパンくずリストを作ってみました。テーマをフルカスタマイズしている人はぜひ参考にしてみてください。
今回の記事では、作成したパンくずリストの機能や導入方法についてご紹介します。
そもそもパンくずリストって？
パンくずリストというのは、サイト内の階層構造を示すリストのことです。
こういう風な形で、色々なサイトで見かけることが多いかと思います。自分がどのあたりにいるか一目でわかるので便利ですよね。
実はそれ、情報収集ロボット（クローラー）にとっても同じなんです。パンくずリストがあることで、クローラーも効率的にサイト内を巡回できるようになります。そのため、ユーザビリティだけでなく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のリッチリザルトテストで確認できます。
リッチリザルトテスト - Google Search Console上と同じ記事で試してみた結果はこちら。
何か問題がある場合はここでエラーが表示されるので、パンくずリスト導入後に一度確認してみることをおすすめします。
そこでパンくずリストを作成しようとしていますが、本サイトにある「」や「」のコードが私のサイトにありません。もしかしたら削除すると森で無かったが、今まで色々HTMLのソースコードをカスタマイズしたときにでも自分が間違って削除指定待ったかもしれません。
お手数ですが上記2つのコードの前後のコードをそれぞれ参考に教えて頂くと助かります。
無理ならば、諦めますので連絡をお願いします。
」や「」のコードが見つかりません。
呼び出される側のパンくずリスト本体部分
<b:includable id='breadcrumb' var='posts'>
...
</b:includable>
は、投稿セクションのデータを利用するため<b:includable id='main' ...>等で始まる投稿セクション内にあればどこに設置しても大丈夫です。他の<b:includable>タグと同じような形で設置してください。
呼び出し側
<b:include data='posts' name='breadcrumb'/>
は、呼び出したい場所（例：記事の上部など）に設置してください。私（オリジナルテンプレート）の場合は参考画像のように設置しています。
分かりにくいかもしれませんが、少しでも参考になれば幸いです。
お忙しいところ、ありがとうございます。
確認してみます。
すみません、またまた追加で下記1点質問があります。
お手数ですが、ご都合の良いとき返信いただけると助かります。
よろしくお願いします。
●質問
「リッチリザルトテスト」を実施した結果「5 件の有効なアイテムを検出しました」と表示されましたが
これは、正常にパンくずりすとが設定されたと言うことでしょうか。
ちなみに、自分のブログ上には、何もパンくずらしきものは表示されていません。
それに、投稿ページは5件ですがラベルは8項目のラベルがあります。
また、パンくずのプログラミングがわからなかったので、各ページ。ラベル、投稿ページにリンクを貼りました。
ご質問の件ですが、有効なアイテムの検出数だけではパンくずリストが正しく設定されているかどうかはわかりません。（パンくずリストではない）BloggerテーマデフォルトのJSON-LD形式の構造化データが検出されているだけの可能性もあります。
本記事通りにパンくずリストを正しく設定できている場合、結果の詳細部分で以下の画像のようにBreadcrumbListと表示されているはずです。
リッチリザルト画像
※ただリンクを貼るだけでは、本記事で言及している構造化データとしてのパンくずリストにはなりません。
回答ありがとうございました。
そこで，一点教えて頂きたいところがありましてコメント致しました。私の場合，初心者のためテーマに「simple］を使っています。それで，スマホで表示する場合は，data:blog.homepageUrlの値の最後に，Bloggerが「？ｍ＝１」を付けてまいります。
そうすると，パンくずリストのラベルのhref文の途中に「？ｍ＝１」が入り，意図しない検索になってしまいます。直接data:blog.homepageUrlにＵＲＬを書き込んでおく方法もありますが，他に何か良い方法がありましたらご教示頂けませんか。
以下が申し上げているコード部分になります。
a expr:href='data:blog.homepageUrl + "search/label/" + data:label.name' itemprop='item'
不躾ですが，なにとぞよろしくお願いします。
コメントありがとうございます。
ご質問の件ですが、モバイル表示でも「?m=1」が追加されないよう該当部分のコードを修正しました。（data:blog.homepageUrl → data:blog.homepageUrl.canonical）
修正後の現在のコードで再度動作確認いただけますでしょうか。
何か問題があればお知らせください。
よろしくお願いいたします。
ありがとうございます。早速やってみました。Goodです。
驚きです。こんなメソッドがあるとは知りませんでした。私は，大型コンピュータのプログラミングを長らくやっていましたので，Ｗｅｂ系は昨年から始めたところです。
大変，お世話になりました。ありがとうございます。今後ともよろしくお願いします。
コメントを書き込む