パンくずリストを導入しました。
導入方法は他のブログ等で記載されているので、ここではあまり触れられていないことについて記載しておきます。
多くのブログで参照されている元記事はこちらです。
元記事は2009年に作成され、その後2012年にアップデートされているのですが、当時とは環境が変わっており、とくにBlogger の「HTMLの編集」画面の Formatter と Sanitizer により元記事のやり方では 勝手に 自動的にコードが変換されてしまうことに注意する必要があります。（エラーになるわけではないので大きな問題ではありませんが。）
b:includable の挿入場所
元記事の順番と前後しますが、最初にウィジェットタグ b:includableの挿入場所について説明します。
元記事では、<b:includable id='main' var='top'> の前に<b:includable id='breadcrumb' var='posts'> のコード を挿入するとありますが、Formatter が <b:includable id='xxx'> </b:includable>を id 順（アルファベット順）にソートしてしまいますので、<b:includable id='comment-form' var='post'> の前に挿入した方が良いです。
つまり、 正しくは『「Blog1」ウィジェットの <b:includable> の定義場所にidがアルファベット順になるように挿入する』ということになります。
検索を使う前に「ウィジェットへ移動」で「Blog1」を選択すると該当箇所を探しやすいと思います。
Blogger の HTML編集画面での検索機能の使い方
編集画面で Ctrl + F キーを押すと、右肩に Search ボックスが現れます。検索文字を入力後、Enter キーを押すたびに見つかった文字にカーソルが移動します。
HTML サニタイジングによる変換
「テーマを保存」ボタンを押すと、b:includable のスニペットは、Sanitizer により " は "e; に、» は » に自動的に変換されます。
変換後のコードは以下のとおりです。最初から変換後のコードを挿入する方が望ましいと思います。
<b:includable id='breadcrumb' var='posts'>
<!-- breadcrumb start -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<!-- b:if cond='data:label.isLast == "true"' -->
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<!-- /b:if -->
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- breadcrumb end -->
</b:includable>- Formatter が（先頭行のみ）行頭にスペース12文字のインデントを挿入するので、行頭に12文字スペースを入れています。
<b:includable></b:includable>の外にコメントしても Formatter が消してしまうので内側にコメントを記載しています。- 複数ラベルに対応するため、
<!-- b:if cond='data:label.isLast == "true"' --><!-- /b:if -->の箇所をコメントアウトしています。
最後のラベルのみをパンくずリストに表示する場合はコメントインしてください。
複数ラベルを使うと、ラベルが階層化されて表示されます。
ただし、順序はアルファベット順・あいうえお順となります。 <b:if cond='data:blog.homepageUrl != data:blog.url'>と 対応する</b:div>をコメントアウトすればインデックスページに表示することができます。- パンくずリストのつなぎ文字をGoogleの検索で表示されるのと同じ「 › 」にする場合は、
»を›に変更してください。実体参照›だと
The entity “rsaquo” was referenced, but not declared.
とのエラーが出ました。
b:include の挿入場所
表示用ウィジェットタグ <b:include data='posts' name='breadcrumb'/> は、<b:include data='top' name='status-message'/> の前に置くとありますが、
<div class='blog-posts hfeed'> の後と記載しているサイト（海外）が多いようです。<div class='blog-posts hfeed'> が閉じる </div> の前に置くとページ下部に表示できます。（両方置くことも可能です。）
さらに <b:if cond='!data:mobile'> の前に置けば、モバイル版でも表示されるようにできます。
Google 構造化データテストツール
元記事にはその後の記事（Google Breadcrumb for Blogger - Blogger Widgets）があり、そこではGoogleの構造化データテストツールでパンくずリストのテストが可能であることに触れられています。（この記事を掲載したときに元記事もアップデートしたようです。）
パンくずリストはトップページには表示されない仕組みのため、構造化データテストツールの URL には、パンくずリストが表示される記事ページを指定する必要があります。
構造化データテストを実施すると、BlogPosting に大量のエラーが見つかるかもしれません。Google プロダクト フォーラム によるとそれほど気にしなくて良いようです。
参考にさせていただきました。ありがとうございました。
ReplyDelete