JSON-LDでパンくずリストを投稿以外にも簡単に設定する方法

Google Blogger の投稿には JSON-LD のパンくずリスト(トップ > SEO対策 >  のようなメニュー)を付けましたが、それ以外の固定ページなどにはパンくずリストが付いていません。簡単にそれ以外のページにもパンくずリストを付ける方法です。

</body> の直前に以下を貼り付けます。
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageName != &quot;&quot;'>
<script type="application/ld+json">{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "<data:blog.homepageUrl/>",
        "name": "<data:blog.title/>"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "<data:blog.url/>",
        "name": "<data:blog.pageName/>"
      }
    }
  ]
}</script>
</b:if>

実際に実行してソースを見ると
<script type='application/ld+json'>{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://googlebloggertrouble.blogspot.com/",
        "name": "Google Blogger 問題解決"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://googlebloggertrouble.blogspot.com/p/sitemap.html",
        "name": "サイトマップ"
      }
    }
  ]
}</script>
こんな感じに変換されます。構造化データテストツールで BreadcrumbList が表示されれば成功です。

普通は </head> の前に書くのですが、</body> の直前に貼り付けるのはパンくずリストは2つ以上あると、1つ目の方を採用するからです。今回のパンくずリストは前回の投稿のパンくずリストと違って、何にもパンくずリストが無い場合にとりあえず付けるものなので、他で設定される場合を考えて最後にしました。

内容ですが、投稿ページの時と data:blog.pageName が無い場合(トップページなど)は何もしないという条件です。

これで固定ページやラベルページ、アーカイブページ、検索結果ページなどにもパンくずリストが設定されるようになります。
この記事のタイトルとURLをコピーする seo
seo