JSON-LDで構造化データマークアップをしてみよう～パンくず編～

前回の構造化データのブログでつじさんは言うだけならタダとこんなことを書きました。
「ん～次はこれをJSON-LDでやってみたいですね～。」
ということで！やります！

今回は「パンくずリスト」をJSON-LDで構造化データマークアップします。
構造化データって何？という方はまずこちらから！
構造化データマークアップ｜SEO女子コラム

パンくずリストをMicrodataでマークアップしたバージョンはこちらにあるので、ぜひこちらも見てみてくださいね！
構造化データをマークアップしてみよう～パンくず編～

構造化データマークアップ実践

パンくずリスト編～JSON-LD～

さて、それではパンくずリストを構造化データでマークアップします。今回使うシンタックスは「JSON-LD」、ボキャブラリーは「schema.org」を使用します。

基礎となるパンくずはMicrodata回でも使ったものと同じものを使います。それがこちら。

SEO初心者女子がゆく > SEO女子のブログ > IT女子の日常

ここで、Microdata回ではHTMLが必要でしたが、JSON-LDは記述としてはJavaScriptなどと同じ扱いなので、headタグ内に記述することが出来ます。そのため該当する部分のソースコードはとくに関係無いんですね。

ではさっそくマークアップに入ります。
JSON-LDの基礎として、記述をするときは必ずこの記述から入ります。

これで、JSON-LDを使ったマークアップをします、という記述が完成です。次に内容となるKeyとvalueを書いていきましょう。「schema.org」を使って、「パンくずリスト」について記述をしているので、@context(どんな記述で話すか)にはschema.orgを、@type(なんの記述か)にはパンくずリストのボキャブラリーを指定します。こんな感じ！

schema.orgのパンくずリストボキャブラリーはパンくず全体をhttp://schema.org/BreadcrumbListで定義、実際のリスト部分を>http://schema.org/itemListElementを使って表すため、@typeには半角カンマを使用して2つの情報が入っています。

それでは次に実際のパンくず部分の記述を書いていきましょう。パンくずリストは大抵2～いくつかの複数階層になっているはずなので、記述しないといけないデータは一つではありません。そこで、複数のデータを記述する際にはArray(アレイ)を使用します。Arrayを使用するときは[]を使用します。

まず第一階層である「SEO初心者女子がゆく」部分を記述！

少し解説を入れましょう！
パンくずはitemListElementの要素になるので、{}で囲ってあります。@typeで、それがリストであることを示します。 "position"にはそのリストのがどの位置にあるか…つまり何番目かを記述します。"item"にはそのリストの情報を記述するのですが、情報が複数あるので{}でまた囲っておきます。
@idはどうやらパンくずで使うもののようですが、これはURLを記述する場所です。最後に"name"にはタイトルを記述。これで一つ分のマークアップ完了です！

二つ目以降も記述をしましょう！オブジェクトごとに半角カンマを入れる決まりがあるのでそれをつけて…

一番最下層、現在のページですね。こちらはURLにあたる@idがなくても構造化データマークアップのテストツールはクリア出来ました。今はURLの記述をするサイトも多いので、これに関してはあってもなくても、というところでしょうか？

それでは実際のタグで見てみましょう！

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "http://comic22.sakura.ne.jp/beginner-seogirl.com",
        "name": "SEO初心者女子がゆく"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "http://beginner-seogirl.com/category/blog/",
        "name": "SEO女子のブログ"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "name": "IT女子の日常"
      }
    }
  ]
}
</script>

こちらで完成となります！実際にサイトのHTMLに組み込まないので、あとから編集したりするのはとっても楽なのがこのJSON-LDの特徴です。管理も一箇所で出来るので楽ですね。Googleもとっても推奨しているシンタックスだったりします。
こうしてみてみると簡単な記述方法ですが、うーん、初心者の辻さんにはかなり難しかったです(笑)

この流れで次回以降、Microdataで記述した残り2つもJSON-LDの記述をやってみようと思います！

SEO関連のあれこれ：JSON-LDで構造化データマークアップをしてみよう～パンくず編～