schema.orgのパンくずリストにGoogleが対応

嬉しいニュースが入ってきました。
昨年末からschema.orgがサポートを始めたボキャブラリ「BreadcrumbList」を、Googleがサポートを開始したとのことです。

これまでは、このブログのパンくずリストでも採用しているData-Vocabulary.orgによるマークアップがGoogleにサポートされていたのですが、今後はschema.orgに取って代わっていくことになりますね。

構造化マークアップは効果が目に見えにくいとのこともあってまだまだSEO業者の中でも多くは普及していませんが、これによって少しは普及してくれるでしょうか。

マークアップ例

このサイトのサイト構造を例に、パンくずリストをマークアップしてみましょう。

素のHTML

<ul>
	<li><a href="https://www.seo-pro.jp/">HOME</a></li>
	<li><a href="https://www.seo-pro.jp/seo/">SEOブログトップ</a></li>
	<li><a href="https://www.seo-pro.jp/whole/">SEO対策全般</a></li>
	<li><a href="https://www.seo-pro.jp/seo/whole/post-1339/">被リンクによるSEO効果の検証</a></li>
</ul>

microdataでマークアップ

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="https://www.seo-pro.jp/"><span itemprop="name">L.SEARCH</span></a>
	<meta itemprop="position" content="1" />
	</li>

	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="https://www.seo-pro.jp/seo/"><span itemprop="name">SEOブログトップ</span></a>
	<meta itemprop="position" content="2" />
	</li>

	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="https://www.seo-pro.jp/seo/whole/">SEO対策全般</a>
	<meta itemprop="position" content="3" />
	</li>

	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="https://www.seo-pro.jp/seo/whole/post-1339/">被リンクによるSEO効果の検証</a>
	<meta itemprop="position" content="4" />
	</li>
</ul>

ulタグで「BreadcrumbList」の指定をして、liタグに対してはListItemをエンベッドしています。

JSON-LDでマークアップ

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://www.seo-pro.jp/",
        "name": "L.SEARCH"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://www.seo-pro.jp/seo/",
        "name": "SEOブログトップ"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "https://www.seo-pro.jp/seo/whole/",
        "name": "SEO対策全般"
      }
    },
    {
      "@type": "ListItem",
      "position": 4,
      "item":
      {
        "@id": "https://www.seo-pro.jp/seo/whole/post-1339/",
        "name": "被リンクによるSEO効果の検証"
      }
    }
  ]
}
</script>

JSON-LDに関しては、上記の記述をほぼほぼコピペで大丈夫じゃないでしょうか。