• WEB

Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【JSON-LD編】

  • さむ
    さむ デザインちーむ
  • このエントリーをはてなブックマークに追加
Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【JSON-LD編】
この記事はシリーズ全3記事です。

みなさんこんにちは、デザインちーむのさむです。

前回の記事「Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【基礎編】」で、基礎は理解できたのではないでしょうか。
「セマンティックウェブ」や「Schema.org」、「ボキャブラリーとシンタックス」などなど。

今回は以上を踏まえて、実際にマークアップをしてみたいと思います。
ボキャブラリーには「Schema.org」、シンタックスには「JSON-LD」を用います。

JSON-LDとは

JSON-LDの「JSON」は「JavaScript Object Notation」(ジャバスクリプト・オブジェクト・ノーテーション)の略で、LDは「Linked Data」(リンクト・データ)の略になります。

JSON-LDはまだ新しい仕様で、W3C勧告になったのは2014年の1月。
とても簡単にマークアップできるので入門者にはピッタリですね。

「JSON」は普段プログラミングなどをされている方にはお馴染みのものですね!

schema.orgのプロパティーの選び方

では、人物の情報をマークアップするとします。

「この情報はこういうプロパティーですよ」とコンピューターに伝えるわけですので、まずはプロパティー選びから始めます。

ちなみにschema.orgはページ単位で指定します。
リッチスニペットを表示させるために行いますので、ページ単位での指定になるんですね。

では、schema.orgのサイトにアクセスします。
schema.org

続いて、Item型一覧から該当するItem型を選びます。
この中だと「Person(人)」ですね。

schema.orgのPerson

ツリー構造になっていますので、これより下の階層に該当するものがないかを確認します。

「Person(人)」で問題なさそうです。
では、「Person(人)」をクリックします。

このページが「Person(人)」で扱えるプロパティー一覧ページで、表になっています。

Personのプロパティ

この表で、左の列がProperty、真ん中の列が指定可能な種類、右の列がPropertyの説明になっています。

名前であれば「name」、画像であれば「image」というように選んでいきます。

name

image

「Expected Type」はそのプロパティーで指定できる型です。
例えば「name」であれば「text型」、「image」であれば「URL型」もしくは「ImageObject型」が指定できます。(※「image」で「ImageObject型」を指定するにはEmbedding(エンベッディング)が必要です。後ほど説明します。)

万が一、プロパティー一覧画面に進んだ際に、「More specific Types」というエリアがある場合は、その中で該当するItem型がないかを確認してください。
該当するものがある場合はそのItem型のリンクをクリックして、再度「More specific Types」があるかを確認します。

More specific Types

「More specific Types」の表記はschema.orgのトップ画面の階層とリンクしているので、トップ画面で最下層のItem型を選ばなかった場合にここの表記がでます。
「More specific Types」の表記がなくなるまで確認してください。
かならず最下層のものを選びましょう!

実はマークアップよりもここのプロパティー選定のほうがめんどいです……。

JSON-LDのマークアップ方法

プロパティー選びが分かったところで、以下の基本的なものからマークアップしてみましょう。
いよいよマークアップのスタートです。

  • 名前:NEXT太郎
  • ウェブサイト:http://www.go-next.co.jp/

上記のデータをJSON-LDでマークアップすると以下のようになります。


<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "NEXT太郎",
    "url": "http://www.go-next.co.jp/"
}
</script>

それでは細かく説明していきます。

scriptタグ

まず初めに以下を記述します。


<script type="application/ld+json">
{
}
</script>

まずは、ここからここまでがJSON-LDの記述ですよと、範囲を示します。

ここ記述はブラウザのレンダリングにはまったく影響しませんので、HTML内のどこに記述しても構いません。
head内や、body内でも構いません。
他のコードと独立して見やすいので、後からの修正も簡単ですね。
これらひとまとまりを JSONオブジェクトと呼びます。

KeyとValue

JSONオブジェクトの構成は、1つ以上のKeyとValueのペアとなります。
キーとバリューの間には区切りとして「:」(コロン)を使います。
さらに、それぞれを「”」(ダブルクォーテーション)で囲みます。


<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "NEXT太郎",
    "url": "http://www.go-next.co.jp/"
}
</script>

@context

@context のバリューには「http://schema.org」を指定し、「http://schema.orgでの定義に従って記述しますよ」という宣言をします。
つまり、@contextで、「schema.orgで記述しますよ」と検索エンジン(コンピュータ)に伝えているということです。


<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "NEXT太郎",
    "url": "http://www.go-next.co.jp/"
}
</script>

@type

@typeでは何について表現するのかを指定します。
schema.orgで定義されているモノ(アイテム)がバリューになります。

たとえば、人物は「Person」で定義されています。
イベントは、「Event」で、製品やサービスは「Product」で定義されています。

よって、「Person」や「Event」、「Product」等を@typeのバリューとして指定します。


<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "NEXT太郎",
    "url": "http://www.go-next.co.jp/"
}
</script>

“name”と”url”

残りの2つを見ていきましょう。
@typeで指定したタイプ内で、利用できるプロパティをキーに指定します。
schema.orgで利用できるプロパティ一覧は以下で確認できます。

schema.org 日本語訳
schema.org / Person

上記のサイトで確認するとPerson(人物)に使用できるものはたくさんありますね。
生年月日を表す「birthDate」や写真を表す「image」など。
「schema.org/Person」内で定義されているものであれば、ボキャブラリは何でも利用できます。
1行ずつ記述していき、順番は問いません。


<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "NEXT太郎",
    "url": "http://www.go-next.co.jp/"
}
</script>

「,」 カンマ

「キー: バリュー」のペアがあり、さらにその次に再度キーが続くときにだけ、バリューのあとにカンマを記述します。
ここで注意が必要です。

改行するときにカンマを記述しているのではないのです!
よって最後の行にはカンマは記述していないですよね。
スクリプトを書いてるとき等にやりがちなミスです、、、。

基本を踏まえた簡単な例

では、基本的な内容は説明しましたので、以下のものをschema.org+JSON-LDで表現してみましょう。

  • 会社名: 株式会社Go-Next
  • 電話番号: 03-5436-4557
  • URL: http://www.go-next.co.jp/
  • 創設者: NEXT太郎

会社組織は、「http://schema.org/Corporation」で定義されています。
会社名は「name」で、電話番号は「telephone」、サイトURLは「url」、創設者は「founder」で指定します。

次のようになります。


<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"Corporation",
    "name":"株式会社Go-Next",
    "telephone":"03-5436-4557",
    "url":"http://www.go-next.co.jp/",
    "founder":"NEXT太郎"
}
</script>

いかがですか?
何となく分かってきました???

Embedding(エンベッディング)

次に、ちょっと複雑なことをやってみたいと思います。
バリューにJSONオブジェクトをさらに埋め込む「Embedding(エンベッディング)」の説明をします。


<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"Corporation",
    "name":"株式会社Go-Next",
    "telephone":"03-5436-4557",
    "url":"http://www.go-next.co.jp/",
    "founder":"NEXT太郎"
}
</script>

上記の「founder」のバリューとして指定している「NEXT太郎」は、「http://schema.org/Person」で人物として以下のように表現できました。


<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "NEXT太郎",
    "url": "http://www.go-next.co.jp/"
}
</script>

上記のJSONオブジェクトをNEXT太郎の代わりに「founder」のバリューとして埋め込みます。


<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"Corporation",
    "name":"株式会社Go-Next",
    "telephone":"03-5436-4557",
    "url":"http://www.go-next.co.jp/",
    "founder": {
                    "@type": "Person",
                    "name": "NEXT太郎",
                    "url": "http://www.go-next.co.jp/"
               }
}
</script>

このようにすることにより、founder(設立者)をより詳しく表現することができるのです。
カンマの記述にも注意です。
より詳細に伝えてあげたほうが、検索エンジンに優しいですね。

Array(配列)

もう一つ、覚えておきたいテクニックがあります。
それがArray(配列)です。

この記述を使用することにより、バリューに複数指定することができるのです。
先ほどの例で、設立者が複数いた場合等に利用できます。


"founder": ["NEXT太郎", "五反田次郎", "構造化やる子"]

プログラムなんかで良く使う配列の書き方ですね。
「[]」でくくって、区切りには「,」を記述しそれぞれのバリューを「””」で囲みます。
複数ある時はこのように配列でまとめて書かないと、最初のバリューしか認識しないようです。

そしてArray(配列)をエンベッディングでも使うことができます。
以下のような記述です。


<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"Corporation",
    "name":"株式会社Go-Next",
    "telephone":"03-5436-4557",
    "url":"http://www.go-next.co.jp/",
    "founder": [{
                        "@type": "Person",
                        "name": "NEXT太郎",
                        "url": "http://www.go-next.co.jp/"
                },
                {
                        "@type": "Person",
                        "name": "五反田次郎",
                        "url": "http://www.example.com"
                },
                {
                        "@type": "Person",
                        "name": "構造化やる子",
                        "url": "http://www.example.com"
                }]
}
</script>

ここでもカンマの記述に注意が必要です。
少し複雑になりますので間違いやすいですね。

マークアップの解説は以上で終了になります。
それほど難しくはないですよね。

マークアップのテストツール

ここまでできたら、マークアップが正しくできてるかを確認する必要があります。
Googleが提供しているツールでマークアップが正しいものかどうかをチェックする事ができます。
Structured Data Testing Tool

使い方は簡単で、画面左側にソースを貼り付けます。(左上の「URLを取得」からサイトのURLを入力して確認することも可能)

Structured Data Testing Tool

右上の検証ボタンを押すと、右側に結果が表示されます。

Structured Data Testing Tool

「問題ありません」と表示され、内容が表示されていれば成功です!
みなさんはいかがでしたか?

右側に表示されているのが、検索エンジンが理解した内容ということです。

まとめ

最後にまとめてみます。

  • JSON-LDはまだ新しい仕様
  • scriptタグでJSON-LDの記述ですよと、範囲を示す
  • JSONオブジェクトの構成は、1つ以上のKeyとValueのペア
  • @contextで、「schema.orgで記述しますよ」と検索エンジン(コンピュータ)に伝える
  • @typeで何について表現するのかを指定する
  • @typeで指定したタイプ内で、利用できるプロパティをキーに指定
  • 「Embedding(エンベッディング)」や「Array(配列)」などがある
  • 「Testing Tool」でマークアップの確認をする

JSON-LDは他の記述と独立させることができるので、とても見通しの良いシンタックスです。
しかし、現在はJSON-LDの記述がリッチスニペットに表示されることはありません。
もしかしたら、将来的に表示されるかもしれません。

JSON-LDの情報を利用したアプリなども出てくる可能性もあります。
そういった点も加味すると今後、必須の知識となるかもしれません。

次回は「Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【Micro-data編】」です!

Micro-dataはリッチスニペットに対応しているので、とても有効性のあるものになります。
次回で最後となりますので、みなさんお楽しみに!

この記事はシリーズ全3記事です。
このエントリーをはてなブックマークに追加

さむが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ