前回の構造化データのブログでつじさんは言うだけならタダとこんなことを書きました。「ん~次はこれをJSON-LDでやってみたいですね~。」ということで!やります!今回は「パンくずリスト」をJSON-LDで構造化データマークアップします。構造化データって何?という方はまずこちらから!構造化データマークアップ|SEO女子コラムパンくずリストをMicrodataでマークアップしたバージョンはこちらにあるので、ぜひこちらも見てみてくださいね!構造化データをマークアップしてみよう~パンくず編~構造化データマークアップ実践パンくずリスト編~JSON-LD~さて、それではパンくずリストを構造化データでマークアップします。今回使うシンタックスは「JSON-LD」、ボキャブラリーは「schema.org」を使用します。基礎となるパンくずはMicrodata回でも使ったものと同じものを使います。IT女子の日常ここで、Microdata回ではHTMLが必要でしたが、JSON-LDは記述としてはJavaScriptなどと同じ扱いなので、headタグ内に記述することが出来ます。そのため該当する部分のソースコードはとくに関係無いんですね。マークアップに入ります。JSON-LDの基礎として、記述をするときは必ずこの記述から入ります。type="application/ld+json">{ここに記述が入ります。}</script>これで、JSON-LDを使ったマークアップをします、という記述が完成です。次に内容となるKeyとvalueを書いていきましょう。「schema.org」を使って、「パンくずリスト」について記述をしているので、@context(どんな記述で話すか)にはschema.orgを、@type(なんの記述か)にはパンくずリストのボキャブラリーを指定します。"BreadcrumbList","itemListElement":}</script>schema.orgのパンくずリストボキャブラリーはパンくず全体をhttp://schema.org/BreadcrumbListで定義、実際のリスト部分を>http://schema.org/itemListElementを使って表すため、@typeには半角カンマを使用して2つの情報が入っています。それでは次に実際のパンくず部分の記述を書いていきましょう。パンくずリストは大抵2~いくつかの複数階層になっているはずなので、記述しないといけないデータは一つではありません。そこで、複数のデータを記述する際にはArray(アレイ)を使用します。Arrayを使用するときは[]を使用します。"SEO初心者女子がゆく"}}]}</script>少し解説を入れましょう!パンくずはitemListElementの要素になるので、{}で囲ってあります。@typeで、それがリストであることを示します。"position"にはそのリストのがどの位置にあるか...つまり何番目かを記述します。"item"にはそのリストの情報を記述するのですが、情報が複数あるので{}でまた囲っておきます。@idはどうやらパンくずで使うもののようですが、これはURLを記述する場所です。最後に"name"にはタイトルを記述。"IT女子の日常"}}]}</script>一番最下層、現在のページですね。こちらはURLにあたる@idがなくても構造化データマークアップのテストツールはクリア出来ました。]}</script>こちらで完成となります!実際にサイトのHTMLに組み込まないので、あとから編集したりするのはとっても楽なのがこのJSON-LDの特徴です。管理も一箇所で出来るので楽ですね。Googleもとっても推奨しているシンタックスだったりします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。