2015/10/10

schema.orgがバージョンアップ。パンくずの設定が従来よりも詳細に設定可能に。

区切り線

schema.org

こんばんわ。そろそろ朝になろうとしています。

schema.orgがバージョンアップしていくつかの仕様変更があったそうです。
http://blog.schema.org/2014/12/schemaorg-v192-music-video-games-sports.html

itemtypeとしてBreadcrumbListが追加

今回、特筆すべきはBreadcrumbList・・・つまりパンくず用のitemtype(アイテム型)が追加されたことです。
今までschema.orgでパンくずリストの設定をするには「WebPage」というitemtypeの中の「breadcrumb」というitemprop(値)でしか対応できなかったので、パンくずリストとして設定するエリア内の個々の構成要素まで、あまり詳細な設定が出来ないという現状がありました。

従来の設定方法

Microdataの場合

<body itemscope itemtype="http://schema.org/WebPage">
<div itemprop="breadcrumb">
<a href="/">HOME</a> >
<a href="/glay/">GLAY</a> >
<a href="/glay/member/">メンバー紹介</a> >
<a href="/glay/member/hisashi.html">HISASHI</a>
</div>

JSON-LDの場合

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebPage",
"breadcrumb": "HOME > メンバー紹介 > HISASHI"
}
</script>

※例は僕の趣味です。

この様に、非常に簡素な設定でした。
一応、パンくずの構造を指定することはできるんですけど、これだけじゃ1つずつのページに対しての細かな指定ができないんですよね。。。

schema.orgのこの記述の仕方ではスニペットに表示されないなんて話もチラホラ聞いたりもします。

新しい設定方法

では今回新たに追加されたBreadcrumbListではどうなのかと言うと。

Microdataの場合

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/"><span itemprop="name">HOME</span></a>
	</li>
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/glay/"><span itemprop="name">GLAY</span></a>
	</li>
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/glay/member/"><span itemprop="name">メンバー紹介</span></a>
	</li>
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/glay/member/hisashi.html"><span itemprop="name">HISASHI</span></a>
	</li>
</ul>

JSON-LDの場合

    <script type="application/ld+json>
    {
     "@context": "http://schema.org",
     "@type": "BreadcrumbList",
     "itemListElement":
     [
      {
       "@type": "ListItem",
       "position": 1,
       "item":
       {
        "@id": "/",
        "name": "HOME"
        }
      },
      {
       "@type": "ListItem",
      "position": 2,
      "item":
       {
         "@id": "/glay/",
         "name": "GLAY"
       }
      },
      {
       "@type": "ListItem",
      "position": 3,
      "item":
       {
         "@id": "/glay/member/",
         "name": "メンバー紹介"
       }
      },
      {
       "@type": "ListItem",
      "position": 4,
      "item":
       {
         "@id": "/glay/member/hisashi.html",
         "name": "HISASHI"
       }
      },
     ]
    }
    </script>

この様に、「itemListElement」で全ての階層に1つずつ指定をすることができます。
URLとアンカーテキストに対しても個別に指定が可能です。
記述が少し長くなる感はあるんですが、基本的にコピペで対応できる部分なので、そう難しく考えなくても大丈夫だと思います。
どうぞ皆さん、上の記述をコピーして使って下さいw

  • このエントリーをはてなブックマークに追加

区切り線

コメントをどうぞ

メールアドレスが公開されることはありません。