Googleがschema.orgによるパンくずリストの構造化のサポートを始めました。
Googleの開発者向けサイトも2015年6月25日付けで更新され、マークアップ例が公開されています。
これにより、schema.orgでもパンくずリストのリッチスニペット表示が可能になったはずです。
Breadcrumbs | Structured Data | Google Developers
schema.orgのパンくずリストをようやくGoogleがサポート開始 – 海外SEO情報ブログ
早速schema.orgを使ってマークアップを試してみたところ、リッチスニペットとして表示させることができました。
microdataを用いてもJSON-LDを用いても可能でしたのでご紹介します。
schema.orgを用いたマークアップでパンくずリストのリッチスニペット表示ができました
結論としては、JSON-LDを使っても、microdataを使っても、schema.orgによるマークアップが認識されてリッチスニペットとして表示させることができました。
テストしたページに関しては再インデックスが行われてキャッシュが更新された時点でリッチスニペットが変わっていましたので、クロール頻度が高いサイトでは修正後ほとんど時間がかからずに表示可能なのではないでしょうか。
ただし、執筆時点(2015年6月29日)で、googleでもyahooでも問題点があります。
googleについては、リンクになっているはずのパンくず要素がリンクになっていません。
yahooについては、ご覧のとおり、余計なTOP要素が表示されてしまっています。
これらの問題は従来のdata-vocabulary.org/microdataを用いたパンくずリストでも起こっているようで、schema.orgに限ったものではないようです。
とはいえ表示できるようになったことは確かです。どのようにマークアップするのか、簡単にご紹介します。
schema.org/JSON-LDによるパンくずリストのマークアップ
schema.orgとJSON-LDの組み合わせを用いた記述は今後主流になってくると思われますので押さえておいたほうがよいかと思います。
JSON-LDは<script>タグの中にマークアップを記述します。
このタグはソース内のどこに置いてもよいことになっていますので、<head>内に記述するとか、<body>のはじめに記述する等統一したほうがよいでしょう。
以下のページをマークアップした例をご紹介します。
https://www.brain-solution.net/about/office/
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://www.brain-solution.net/",
"name": "TOP"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://www.brain-solution.net/about/",
"name": "会社案内"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "https://www.brain-solution.net/about/office/",
"name": "オフィス紹介"
}
}
]
}
</script>
基本的にはコピペでいけてしまうくらい簡単です。
流用する場合は赤字部分を入れ替えたり要素を増やしたりすればOKです。
アップ前に必ず構造化テストツールで正しくマークアップできているか確認します。
なお、”position”はパンくず要素の順番、”@id”は各要素のURL、”name”はタイトルを示しています。
schema.org/microdataによるパンくずリストのマークアップ
JSON-LDと異なり、microdataはソースのパンくずリスト部分を直接マークアップします。
ただし、パンくずリスト要素の順番を示す”position”はmetaタグを用いてマークアップします。
以下のページをマークアップした例をご紹介します。
https://www.brain-solution.net/about/strong/
<div id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/"><span itemprop="name">TOP</span></a>
<meta itemprop="position" content="1" />
</span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/about/"><span itemprop="name">会社案内</span></a>
<meta itemprop="position" content="2" />
</span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">ブレインネットの強み</span></div>
<meta itemprop="position" content="3" />
</span>
こちらも基本的には定型でいけますが、JSON-LDと比べて多少ややこしいです。
構造化テストツールでの確認も必ず行うようにします。
パンくず要素１つ１つについて”ListItem”のitem(URL),name,positionをマークアップしています。
まとめ
ひとまずschema.orgを用いて、JSON-LDを用いてもmicrodataを用いてもパンくずリストをリッチスニペットとして表示させることができました。
これまでパンくずリストに関しては、Googleがschema.orgに対応していませんでした。
Googleがschema.orgとJSON-LDによるマークアップを推奨してきたにもかかわらず、パンくずリストについてはサポートされていないということで、data-vocabulary.orgにてマークアップしているサイトを多く見かけます。
弊社としてもお客様にパンくずリストのマークアップは、data-vocabulary.orgとmicrodataを組み合わせて記述することをご提案していました。
（このブログのパンくずリストもdata-vocabulary.orgとmicrodataでマークアップされています）
今回サポートが開始されたことで、構造化マークアップの記述はschema.org/JSON-LDへ統一化される動きが加速するのではないでしょうか。ただ、現在すでに旧来の方法でマークアップしている場合はマークアップし直す必要はないと考えています。
また、エラーなのか仕様なのかわからない部分が残っていますので、まだマークアップを行っていない方はこうした問題点が解消されてからでもいいかもしれません。
最新の構造化データの状況について
上記の見解は2016年時点のものですが、2020年現在ではschema.orgでの記述が推奨されておりdata-vocabulary.orgのサポートは終了しました。
そのため、もし切り替えが済んでいないサイトは早めの切り替えを推奨いたします。
このようにSEO関連の情報は日々アップデートされていきます。
サクラサクラボではこうしたSEOの最新情報を無料のメルマガで発信中！
どなたでもお名前とメールアドレスのみで簡単に登録がいただけます！
↓↓↓メルマガ登録はコチラ↓↓↓
