サイト内の居場所（現在位置？）が分かり易くなるので、本ブログにパンくずリストを設置してみました。
|
今回はこの紹介になります。
■Bloggerにパンくずリストを設置する
●設置方法
以下ではBloggerのHTMLを編集します。編集する前に復旧できるように必ず忘れずにHTMLのバックアップを取ってから行ってください。
また、このHTMLの編集について本ブロブおよび筆者は一切の責任を負いません。参考にされる方は全て自己責任で実施してください。
HTMLの編集はBlogger管理画面の『テーマ』>『▼』>『HTMLを編集』画面で行います。
|
| Blogger管理画面の『テーマ』>『▼』>『HTMLを編集』でHTMLを編集します |
・ベースとなるパンくずリストのコード
パンくずリストを設置するにはJavaScriptコードなどの記載が必要ですが、その詳細は以下のページで紹介されています。参照ください。
・本ブログのパンくずリストの仕様
本ブログでは上記のスクリプトをアレンジして、各ページに以下の仕様のパンくずリストを設置しています。
- トップページ（ホーム）：『 HOME（新着記事一覧）』
- 個別の記事ページ：『 HOME 個別記事』（※）
- 固定ページ：『 HOME ○○○○』
- （“○○○○“は固定ページのタイトル）
- ラベルのページ：『 HOME ラベル『▽▽▽▽』』
- （“▽▽▽▽“はラベル名）
- （ブロク内）検索結果のページ：『 HOME 検索結果『☆☆☆☆の検索結果』』
- （“☆☆☆☆“は検索キーワード）
- アーカイブのページ：『 HOME アーカイブ『◇◇◇◇』』
- （“◇◇◇◇“はアーカイブの年月）
※ベースとなるパンくずリストのコードでは個別記事のページにラベルと個別記事タイトルを表示する仕様なのですが、本ブログでは表示をやめました。
（本ブログはラベルを多用していて記事タイトルも長いので、パンくずリストの見た目がごちゃごちゃしそうなので😅表示はやめました。ただしSEO対策として記事タイトルはGoogle検索には認識されるように、HTML上は記載し表示のみしないように（style='display:none;'）しています。）
・本ブログのパンくずリストのコード
- コードと設置位置
上記したベースとなるパンくずリストのコードは
data:blog.pageType
タグを使って現在ページを判定していますが、このタグだと『トップページ』と『ラベル』『検索結果』の区別ができません。そこで本ブログでは
data:view
タグを使っています。
具体的な表示内容を示すコード（<b:includable
...>）は上記仕様に合致するようにしてこんな感じです。
<b:includable id='breadcrumb' var='posts'>
<!-- パンくずリスト START -->
<!-- 固定ページの場合 -->
<b:if cond='data:view.isPage'>
<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' itemprop='item'>
<i class='fa-solid fa-house'/> <span itemprop='name'>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:elseif cond='data:view.isHomepage'/>
<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' itemprop='item'>
<i class='fa-solid fa-house'/> <span itemprop='name'>HOME</span>（新着記事一覧）
</a>
<meta content='1' itemprop='position'/>
</li>
<li>
</li>
</ol>
<!-- ラベルページの場合 -->
<b:elseif cond='data:view.isLabelSearch'/>
<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' itemprop='item'>
<i class='fa-solid fa-house'/> <span itemprop='name'>HOME</span>
</a>
<meta content='1' itemprop='position'/>
</li>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<i class='fa-solid fa-tag'/> ラベル『<span itemprop='name'><data:blog.pageName/></span>』
<meta content='2' itemprop='position'/>
</li>
</ol>
<!-- キーワード検索の場合 -->
<b:elseif cond='data:view.isSearch'/>
<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' itemprop='item'>
<i class='fa-solid fa-house'/> <span itemprop='name'>HOME</span>
</a>
<meta content='1' itemprop='position'/>
</li>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<b:if cond='data:blog.pageName'>
<i class='fa-solid fa-magnifying-glass'/> 検索結果『<span itemprop='name'><data:blog.pageName/></span>』
<meta content='2' itemprop='position'/>
</b:if>
</li>
</ol>
<!-- アーカイブの場合 -->
<b:elseif cond='data:view.isArchive'/>
<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' itemprop='item'>
<i class='fa-solid fa-house'/> <span itemprop='name'>HOME</span>
</a>
<meta content='1' itemprop='position'/>
</li>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<i class='fa-solid fa-box-archive'/> アーカイブ『<span itemprop='name'><data:blog.pageName/></span>』
<meta content='2' itemprop='position'/>
</li>
</ol>
<!-- 記事ページの場合 -->
<b:elseif cond='data:view.isPost'/>
<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' itemprop='item'>
<i class='fa-solid fa-house'/> <span itemprop='name'>HOME</span>
</a>
<meta content='1' itemprop='position'/>
</li>
<!-- ラベルの排除
<b:loop index='i' values='data:post.labels' var='label'>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl + "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:loop>
-->
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<i class='fa-solid fa-newspaper'/> 個別記事 <span style='display:none;'>（ <span itemprop='name'><data:post.title/></span>）</span>
<meta expr:content='data:i + 2' itemprop='position'/>
</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' itemprop='item'>
<i class='fa-solid fa-house'/> <span itemprop='name'>HOME</span>
</a>
<meta content='1' itemprop='position'/>
</li>
<!-- 未分類の排除
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<i class="fa-solid fa-folder"></i> <span itemprop='name'>未分類</span>
<meta content='2' itemprop='position'/>
</li>
-->
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<i class='fa-solid fa-newspaper'/> 個別記事 <span style='display:none;'>（ <span itemprop='name'><data:post.title/></span>）</span>
<meta expr:content='data:i + 2' itemprop='position'/>
</li>
</ol>
</b:if>
</b:loop>
</b:if>
<!-- パンくずリスト END -->
</b:includable>
※ コード中の『<i class='…'/>』はFont Awesomeのサービスを使用したアイコンです。詳細はこちら（本ブログ内リンク）：『【Blogger備忘録】Font
Awesomeのアイコンを使えるようにする』を参照ください。）
【SEO対策のポイント】
パンくずリストがGoogle検索のリッチリザルトに正しく認識されるためのコードのポイントは以下の通りです。
- <span itemprop='name'>・・・</span>タグで囲うのはGoogle検索のリッチリザルトに認識させたいキーワードのみとしてください。
- <meta content='★' itemprop='position'/>（『★』は階層）タグでパンくずリストの階層を指定してください。
【参考：コードの設置位置（場所）】
上記のコード（<b:includable ...>）は以下のコードの上（直前）に貼り付けます。
<b:includable id='main' var='top'>
そして、パンくずリストを表示するところには以下のコード（<b:include
...>）を貼り付けます。
<b:include data='posts' name='breadcrumb'/>
本ブログの場合はこのコード（<b:include ...>）を以下のコードの下（直後）に貼り付けています（PCサイト、モバイルサイト共通です）。
<div class='blog-posts hfeed'>- CSSと設置位置
またCSSはこんな感じです。
.breadcrumbs {
list-style: none;
font-size: 14px;
color: #666;
padding: 0;
margin: 0 0 0 5px;
}
.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;
}
このコードをHTMLのCSS記載欄（以下のコードの上（直前））に貼り付けます。
]]></b:skin>
●使用感
個別記事のタイトルやラベルを表示させていないので、結果として非常にあっさりとしたパンくずリストになりました。
パンくずリストって、サイト内の居場所（現在位置）が分かれば良いと思うので、私としては丁度良いかな、と思っています😋。
|
| 本ブログに設置したパンくずリスト |
Google検索でこのパンくずリストが有効かどうかをGoogleのリッチリザルト テストで確認しました。
無事に有効なようです😋。
|
|
リッチリザルト テスト確認画面（ Google Search Console） |
ブラウザ上では表示されない記事のタイトルも無事に認識されています。
|
| リッチリザルトで記事のタイトルも認識されています |
●まとめ
HTMLの簡単な編集でパンくずリストが設置できました♪
こういった細かい修正・設定の積み重ねが、（あまり親切とは言えない😅）Bloggerを使いこなす上では必要・重要ですよね😋。
○参照サイト🔗：
本記事を書くにあたっては以下のサイトを大変参考にさせていただいています。本記事で不明な点がある場合にはぜひ参照ください。
