ブログ

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

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へ統一化される動きが加速するのではないでしょうか。ただ、現在すでに旧来の方法でマークアップしている場合はマークアップし直す必要はないと考えています。
また、エラーなのか仕様なのかわからない部分が残っていますので、まだマークアップを行っていない方はこうした問題点が解消されてからでもいいかもしれません。

◇この記事もおすすめ!
・SEO対策(検索エンジン最適化)とは~上位表示を実現する為のSEOとは?Googleの本質を理解し、自社サイトを強化する





■関連情報:サクラサクマーケティングのSEOコンサルティングサービス
中小・ベンチャー企業の売上をサポートするSEO対策低価格・高品質なSEOコンサルティング

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

執筆者:笹本 雅人

記事一覧

SEOシニアコンサルタント

2013年株式会社ブレインネットに入社し、会社合併を経てサクラサクマーケティング株式会社に合流した後も現在に至るまでSEOコンサルタントとして大小問わず様々なクライアントの集客向上に貢献。

特にシステム開発がからむSEOを得意としているほか、自社メディアのブログの作成・監修を行い、数多くのキーワードで上位表示を達成している。



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. 弊社社長、根岸がSEOの漫画になりました!

    マンガマーケティングの領域において3000件近くの実績を誇る 株式会社シンフィールドさんとの コラボレーション企画で、弊社社長の根岸のインタビューを漫画にして頂きました。 弊社同様、マンガを作成頂きたい方は、こちらからお […]...

    1. Google検索品質評価ガイドラインの要約とSEOへの活用方法

      Googleの検索品質評価ガイドラインとは、Googleが自身の検索エンジンの品質を評価するために、外部の品質評価者に向けて評価方法を説明した資料のことです。 検索品質評価ガイドラインには、Googleがどのようなページ […]...

      1. サクラサクラボ8月のツイートまとめ

        当サイトのツイッターアカウント(@sakurasakulabo)のツイートから、8月のイベントを振り返ります。 ツイッターのフォローはこちらからお願いします。 Follow @sakurasakulabo 目次 8月の変 […]...

おすすめコンテンツ

  1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

    ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

    1. SEO対策(検索エンジン最適化)とは~Googleで上位表示を実現する方法

      目次 1. SEO(Search Engine Optimization:検索エンジン最適化)とは 2. SEOの現在(検索エンジン最適化≒Google最適化) 3. Google Search Consoleの活用とS […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP