サクラサク

パンくずリストをschema.orgでリッチスニペットにしてみました

2024年6月18日

ねぎお社長 (根岸雅之)

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によるマークアップが認識されてリッチスニペットとして表示させることができました。
テストしたページに関しては再インデックスが行われてキャッシュが更新された時点でリッチスニペットが変わっていましたので、クロール頻度が高いサイトでは修正後ほとんど時間がかからずに表示可能なのではないでしょうか。

図:google検索結果画面でのパンくずリストのリッチスニペット
googleパンくず

図:yahoo検索結果画面パンくずリストのリッチスニペット
yahooパンくず

ただし、執筆時点(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と比べて多少ややこしいです。
構造化テストツールでの確認も必ず行うようにします。
パンくず要素1つ1つについて”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の最新情報を無料のメルマガで発信中!

どなたでもお名前とメールアドレスのみで簡単に登録がいただけます!

↓↓↓メルマガ登録はコチラ↓↓↓

執筆者 / 監修者

サクラサクマーケティング
株式会社

取締役 社長

ねぎお社長 (根岸雅之)

ねぎお社長 (根岸雅之)イラスト

サクラサクマーケティング株式会社 取締役社長 COO

1980年生まれ 大学卒業後、一貫して、広告・マーケティング業界に身を置く。2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。同年10月に株式会社ブルトア(現サクラサクマーケティング株式会社)に転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。2023年には『なぜほとんどコンテンツマーケティングは失敗に終わるのか?』を執筆。ねぎお社長のSEOチャンネルをはじめ、YouTube、メルマガ、SNを通じて積極的に情報発信。

◇ 出版書籍

◇ 情報発信

◇ 掲載メディア

◇ 共催セミナー歴

  • オウンドメディアの成功事例とSEOを支える運用型広告の活用
  • 今日から始められるWebマーケティング~コンテンツマーケティングとGoogle マイビジネス~
  • GMO TECH × サクラサク共催セミナー~テクニカルSEOとコンテンツマーケ~
  • リモート環境下においても売上・利益が成長し続ける組織創りと営業戦略

関連記事

ブログ一覧

あっ!と思ったら
サクラサク
ご相談ください

まずは無料相談へのお申し込みがおすすめです。ベテランコンサルタントが直接対応いたします。

お電話でご相談の方はこちら

03-5776-2775

03-5776-2775

SEO・記事制作なら、
サクラサクにお任せください!

ご相談こちら
×