JSON-LDでパンくずリストを簡単に設定する方法
Google Blogger ではパンくずリスト（トップ > SEO対策 > のようなメニュー）が用意されていません。パンくずリストがあると、読者はどのカテゴリーの話題なのか分かり、すぐにリンク先に行けるので便利です。
Google Blogger ではカテゴリーではなくラベルが用意されていますが、カテゴリーの方が分かりやすいので、ラベルをカテゴリーとして使います。
Google Blogger の公式テーマを使って構造化データテストツールを使うと、hatom という構造化があります。中身はラベルの一覧ですが、これは SEO 効果があるのかよく分かりません。ラベルをたくさん貼るイメージなのでこうしているのでしょう。
カテゴリーとして使ってパンくずリストを構造化データとしてJSON-LD で登録すると、SEO 効果があります。Google の検索結果の表示が変更されます。
・パンくずリスト登録なし
・パンくずリスト登録あり
このように長い URL がカテゴリーの文字に変更され何の話題か分かりやすくなり、クリックされやすくなります。
ラベルを取得している部分（data:label.name があるあたり）に以下の JSON-LD を貼り付けます。
実際に実行してソースを見ると
構造化データテストツールで BreadcrumbList が表示されれば成功です。日本語の文字は違う文字列に変換される場合がありますが、Google の検索結果には日本語で表示されます。
Google Blogger ではカテゴリーではなくラベルが用意されていますが、カテゴリーの方が分かりやすいので、ラベルをカテゴリーとして使います。
Google Blogger の公式テーマを使って構造化データテストツールを使うと、hatom という構造化があります。中身はラベルの一覧ですが、これは SEO 効果があるのかよく分かりません。ラベルをたくさん貼るイメージなのでこうしているのでしょう。
カテゴリーとして使ってパンくずリストを構造化データとしてJSON-LD で登録すると、SEO 効果があります。Google の検索結果の表示が変更されます。
・パンくずリスト登録なし
JSON-LDでパンくずリストが用意されてない問題 | Google Blogger 問題解決
https://googlebloggertrouble.blogspot.com/2019/04/json-ldbreadcrumblist.html
https://googlebloggertrouble.blogspot.com/2019/04/json-ldbreadcrumblist.html
・パンくずリスト登録あり
JSON-LDでパンくずリストが用意されてない問題 | Google Blogger 問題解決
https://googlebloggertrouble.blogspot.com › SEO対策
https://googlebloggertrouble.blogspot.com › SEO対策
このように長い URL がカテゴリーの文字に変更され何の話題か分かりやすくなり、クリックされやすくなります。
ラベルを取得している部分（data:label.name があるあたり）に以下の JSON-LD を貼り付けます。
<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:label.url/>?max-results=10",
"name": "<data:label.name/>"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "<data:blog.url/>",
"name": "<data:blog.pageName/>"
}
}
]
}</script>
"@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:label.url/>?max-results=10",
"name": "<data:label.name/>"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "<data:blog.url/>",
"name": "<data:blog.pageName/>"
}
}
]
}</script>
実際に実行してソースを見ると
<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/search/label/SEO対策?max-results=10",
"name": "SEO対策"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "https://googlebloggertrouble.blogspot.com/2019/04/json-ldbreadcrumblist.html",
"name": "JSON-LDでパンくずリストが用意されてない問題"
}
}
]
}</script>
こんな感じに変換されます。<data:label.url/>?max-results=10 の部分は、ラベルを10件ずつ表示したいので ?max-results=10 にしていますが、表示件数にこだわらないなら<data:label.url/>だけでいいです。"@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/search/label/SEO対策?max-results=10",
"name": "SEO対策"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "https://googlebloggertrouble.blogspot.com/2019/04/json-ldbreadcrumblist.html",
"name": "JSON-LDでパンくずリストが用意されてない問題"
}
}
]
}</script>
構造化データテストツールで BreadcrumbList が表示されれば成功です。日本語の文字は違う文字列に変換される場合がありますが、Google の検索結果には日本語で表示されます。
seo