目に見えないパンくずリストを設置(blogger Template Breadcrumb)

Table of Contents

 

bloggerのブログに目に見えないパンくずリストを設置してみましょう。

超簡単！

初心者の方も気軽に安心して設置していただけます。

1 - テーマ　→　カスタマイズの横の下向きの三角形をクリック　→　HTMLを編集をクリック

2 - 最初にこのコードを検索してください。

<data:post.body/>

3 - そのコードのすぐ下に次のスクリプトを追加してください。

<script type='application/ld+json'>{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "<data:blog.homepageUrl.canonical/>"
    <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
    {
      "@type": "ListItem",
      "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
      "name": "<data:label.name/>",
      "item": "<data:label.url.canonical/>"
      <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
  ]
}</script>

保存して完了です。

リッチリザルトテスト

https://search.google.com/test/rich-results

こちらのサイトに記事ページのURLを入力しテストしてみてください。

パンくずリストが表示されれば成功です！