多くのブログで参照されている元記事はこちらです。
さらに、その元記事はこちらです。
Hoctro さん、Aneesh さん、ありがとうございます。
記事の内容は今でも使えるものなのですが、少々古く、以下の問題があります。
- 構造化データの定義が schema.org でなく、Data-Vocabulary.org になっている。
- 一般的にパンくずリストで使われるタグ
<ol><li>を使っていない。
これらの問題を修正してみます。
参考記事
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 == "static_page"'>
<li><data:blog.pageName/></li>
<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'>
<b:loop index='index' values='data:post.labels' var='label'>
<!-- b:if cond='data:label.isLast == "true"' -->
<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 == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<li>Archives for <data:blog.pageName/></li>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageName == ""'>
<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'>と 対応する をコメントアウトすればトップページに表示することができます。<!-- b:if cond='data:label.isLast == "true"' --><!-- /b:if -->の箇所をコメントインすれば、（アルファベット順で）最後のラベルのみをパンくずリストに表示できます。
（複数ラベルの場合もアルファベット順・あいうえお順となります。）
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 の構造化データテストツール でエラーがないか確認できます。
構造化データテストツールの URL には、パンくずリストが表示される記事ページを指定する必要があります。
構造化データテストを実施すると、BlogPosting に大量のエラーが見つかるかもしれません。 Structured Data testing Tool errors on Blogpost Blogger - Google プロダクト フォーラム によると、検索結果に反映したいわけでないなら気にしなくて良いようです。
修正したければ、こちらのサイトが役に立つかもしれません。
残課題
パンくずリストはアルファベット順に表示されており、実際の階層構造を表していません。
No comments:
Post a Comment