2014/12/16SEO

【完全解説】構造化データ(schema.org)はJSON-LDで書こう!takahiro

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

今回は構造化データの書き方(特にJSON-LD)について説明します。

この記事をすべて見て理解すれば必ずJSON-LDを書けるようになります。「構造化データって何?」って思われている方の為にも構造化データとは何かという説明も含め書いていきます。

 

「何で「JSON-LD」をオススメしてるの?」って気になる方もいると思います。

最初に言ってしまうと、JSON-LDは他の「Microdata」や「RDFa」と違い導入がかなり簡単です。

また、HTMLのソースコードも見づらく汚すことがありません。

なので僕はJSOM-LDをオススメしています。

 

では、さっそく見て行きましょう。

 

1.構造化データって何?

まず「セマンティックWeb」という概念があります。

 

 セマンティックWebとは?

Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティックWebである。

引用:http://e-words.jp/w/E382BBE3839EE383B3E38386E382A3E38383E382AFWeb.html

 

つまりgoogleなどがクローリングする際に、文章を単語としては理解しているけど、その単語が何を意味しているかまでは理解出来ていない。

だから、理解できるように製作者側でマークアップし伝えてあげて、ちゃんと単語の意味を解釈してもらえるようにしよう!というものです。

 

このセマンティックWebを実現する手段が、構造化データを用いたマークアップです。

一定の規則に従ってメタデータを付加することによって、検索エンジンは単語の意味まで理解できるようになります。

つまりユーザーが探している内容を検索エンジンが更に理解し、検索結果ページに表示できるようになりますね。

まだ、SEO的には構造化データを設定しているかしていないかでそれほど検索順位に変動はないとは思いますが、将来的には影響する可能性が高いと思っています。

 

今でも、パンくずリストなどのリッチスニペットを検索結果画面でよく見かけると思います。検索結果画面に表示されるのはパンくずリストなどがちゃんとマークアップされているからですね。

 

ただ、注意点としては後に説明するschema.orgでパンくずリストをマークアップした場合は現時点ではgoogleのリッチスニペットには反映されません。schema.orgもバージョンアップを繰り返しているため、今後反映される可能性は高いです。

また、JSON-LDで構造化データを記述した場合は、現状ではリッチスニペットとして認識されないようです。リッチスニペットをすぐにでも表示したい場合は、Microdataなどで記述するようにしましょう。

 

2.schema.orgとは?

構造化データについて調べていると必ず「schema.org」という言葉が出てくると思います。schema.orgとは検索エンジンが理解できるように定義されたボキャブラリのことです。

2014年のCSS Nightで鈴木謙一氏が言っていた例が本当に分かりやすかったです。

 

「JFK」と言う単語には「ジョン・F・ケネディ」「JFK (阪神タイガース) 」「JFK (映画)」などいろいろな意味がありますが、検索エンジンはこれを理解できていません。なので「JFK」が人名なのか、それとも映画のタイトルかなどを検索エンジンに教えて上げる必要があります。

鈴木氏ブログ:http://www.suzukikenichi.com/blog/

「人名」や「映画のタイトル」を定義しているのがボキャブラリであり、schema.orgということになります。

 

schema.orgでどのようなボキャブラリが定義されているかはschema.org公式サイトなどで確認することができます。

JSON-LDを記述するときも見ることになるので、ブックマークしておくことをオススメします。また、今後もアップデートがあるのでボキャブラリの数はどんどん増えていくと思います。

 

3.schema.orgの4種類の記述ルール

schema.orgについては前述のとおりですが、それを用いてHTML上にマークアップするには4つの記述方法があります。

  • ・Microdata
  • ・RDFa
  • ・RFDa Lite
  • ・JSON-LD

 

どの記述方法で書いても問題はありません。それぞれの記述方法を簡単に見ていってみましょう。

例えば、人物のボキャブラリをMicrodata、RDFa、JSON-LDでそれぞれ書いてみると以下のようになります。

 

Microdataの書き方

 

RDFa、RFDa Liteの書き方

 

JSON-LDの書き方

 

それぞれ書き方が違いますが、クローラーに伝えたい内容は一緒です。

このブログの作者が「井上貴裕」という人物で、写真は「images/takahiro.jpg」にあり、更新しているサイトが「http://www.ad-library.jp」である。ということをマークアップしています。

 

schema.orgで人物についてのボキャブラリはhttp://schema.org/Personで確認できます。

今回マークアップした以外にも多くのボキャブラリが用意されています。

 

ざっと見た感じでも分かると思いますが、MicrodataとRDFa、RDFa Liteは直接HTMLのbody部分にマークアップしているのが分かるかと思います。

それとは違い、JSON-LDはbodyにマークアップすることなくマークアップされていますね。この違いはかなり大きいです。

 

MicrodataやRDFaのようにbodyにマークアップするということになると、既存のソースコードを1つひとつマークアップしていかなければいけません。また、動的URLを用いている場合は制御がけっこうめんどくさそうです。

 

それに比べJSON-LDは「script」で囲った中で構造化データを記述してあげればいいだけなので、ソースコードをそんなに汚すこと無く、また導入が簡単になっています。これこそが僕がschema.orgを導入するのにJSON-LDをオススメする理由です。

今回はJSON-LDの書き方に焦点を絞って見て行きましょう。

 

4.JSON-LDを用いたschema.orgの記述方法

先ほどの例をもとにJSON-LDの書き方を見て行きましょう。

人物をJSON-LDを用いて表現すると下のようになりました。

 

 scriptタグ

JSON-LDのは<script type=”appkication/ld+json”> </script>の中に書いていきます。

記述する場所はHTML内のどこでも大丈夫です。僕はheadに書いています。body部のコードと分かれているので見やすいし修正も簡単ですね。

scriptタグを使用していますが、何かしらのスクリプトが実行されるわけではありません。書き方なので覚えましょう。

 

{}波カッコ

schema.orgで表現する1つのモノはこの波カッコ内に書きます。

ここでいう「モノ」とは、人物・場所・評価・製品・イベントなどのことです。

また、波カッコで囲んだ1つのまとまりを「 JSONオブジェクト」 と呼びますので覚えておきましょう。

 

Key: Value

波カッコの中に書いていくのがボキャブラリであるKeyと、その値のValueです。

キーとバリューは「:」(コロン)で区切り、「”」(ダブルクォーテーション)でともに囲んで表現します。

例の1行目と2行目を見てください。

 

 

の記述があります。どちらのキーも始まりに「@」があります。@ が付いたキーは特殊なキーで、「キーワード」(keyword) と呼ばれます。

キーワードは複数ありますが、必ず覚えておく必要があるのが、上に出ている「@context」と「@type」の2つです。

 

「@context」にはschema.orgを使用するために、「http://schema.org」と記述します。「http://schema.orgの定義に従って記述します。」という宣言をここでしています。

 

「@type」には先ほど出てきた「モノ」を指定します。人物や場所などでしたね。

人物であれば「Person」、場所であれば「Place」、イベントであれば「Event」をValueには指定します。

また、Valueの指定には「http://schema.org/Person」 のように完全なURLを使用することもできます。

 

その下の行を見て行きましょう。

 

今回の例では「@type」に「Person」を指定しています。schema.orgのサイトでPersonで使えるボキャブラリを確認してみましょう。

指定できるプロパティに「name」「image」「url」があるのが分かるかと思います。

上の例ではこのプロパティを使用しているわけです。

 

その他にもメールアドレスや、電話番号を書くこともできます。書く順番については成約はないので、1行ずつ書いていきましょう。

 

 

上記の例にメールアドレスと電話番号を追加してみました。

ここで気を付けないといけないのが「, カンマ」です。「Key」と「Value」のペアがあり、それが続くのであれば「,」で区切る必要があります。

 

今回の例では縦に書いていますが、下のように並べて書くこともできます。

 

 

改行の際に「, カンマ」を使用しているわけではないので注意しましょう。また、1番最後は「,」の記述は不要です。

JSON-LDの記述は簡単ですね。

 

Embedding(エンベッディング)

ここまで、JSON-LDの書き方の基礎をおさえてきました。ここからは応用とまではいきませんが、覚えておいたら使えるテクニックになります。

 

まず出てくるのがEmbedding(エンベッティング)です。

JSONオブジェクトに親子関係を持たせることができます。

 

例えば、会社概要をJSON-LDで記述するとします。

強引ではありますが、簡単な会社概要の下に「employee 従業員」として「井上貴裕」を記述しています。

employeeのバリューとして記述している「井上貴裕」は先ほど、Personでも記述していました。

この「井上貴裕」についてさらに細かく説明したい場合に、Embeddingを用いて親子関係を作ります。

 

先ほどPersonで記述していた内容が

になるので、これを「employee」のValueとして埋め込んでいきます。

 

 

このように記述することで、「井上貴裕」が単なる文字であったのが、どのような人物なのかクローラーに伝えることができます。

人物や商品、場所などがValueにある場合などにそれを詳細に説明することができるので、活用場面は多いと思います。

 

1つのJSONオブジェクトを作成したときに、その中にあるValueはさらに詳細に説明することができるかどうか考えてみましょう。

説明できる場合は、親子関係をEmbeddingで作って説明してあげましょう。

 

Array(アレイ)

ArrayはValueに複数の値を持たせる時に使います。

例えばさっきの会社概要で従業員を複数人記載したい場合などは次のように書きます。

Valueに複数の値を入れるときは、「[] 角カッコ」でくくります。

それぞれの値は「, カンマ」で区切ります。

 

また、サービス業の営業時間などで土日で営業時間が異なる場合などにも使えます。

上記の様に書けば、平日は10:00〜20:00、土日は9:00〜23:00が営業時間ということになります。

 

もちろん前述したEmbeddingを使用した親子関係も作れます。

 

なんだかコードが長くなって分かりにくいと思うかもしれませんが、書いてあることは単純です。

「, カンマ」「{} 波カッコ」「[] 角カッコ」の位置に気をつけて記述しましょう。

 

5.JSON-LD記述確認(テスト)方法

ここまではJSON-LDの書き方を見てきました。最後に書いたコードがちゃんとクローラーに読み取られているか確認しましょう。

Googleは構造化データのマークアップを確認する方法を3つ提供しています。

 

メールマークアップテスター

 

どのツールも基本的にテスト内容は一緒ですが、各ツールで一部サポートしきれていないボキャブラリーがある場合があるようです。

 

6.その他の記述例

その他のボキャブラリなどの記述例もschema.org公式サイトで公開されていますので、それを参考に書いてみてもいいかもしれません。

 

今回説明した人物のボキャブラリの記述例であれば、http://schema.org/Personを開いてサイトの1番下を見てみてください。

 

json-ld02

 

「Examples」の箇所に「JSON-LD」についての書き方の例が記載されています。

 

7.まとめ

今回は構造化データ(schema.org)について、その概要と「JSON-LD」での書き方の説明をしました。

まだ構造化データに手をつけていない場合に参考にしていただければと思います。

 

「JSON-LD」で記述する際の注意点として、先にもあげましたが「現時点ではgoogleのリッチスニペットに対応していない」ということは頭の端に置いておいてください。早期に対応されることを願いましょう。

また、「schema.org」では現状では、パンくずリストのマークアップができないということも抑えておきましょう。

 

直接マークアップするMicrodataやRDFaとは異なり「JSON-LD」はコード的に独立しています。ブラウザ上に表示されないからといって不正な情報を検索エンジンに見せるようなことがないようにしましょう。せっかく素晴らしい機能なのにgoogleがスパムと認識すれば、記述した「JSON-LD」のコードが不要なものとなってしまいます。ブラックハットなどのツールにならないことを祈ります。

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

この記事の著者

takahiro

takahiroWebデザイナー/ディレクター

Skill:HTML,CSS,PHP,WordPress,Photoshop

WEBサイト制作/運用/コンサルティング
たまにカメラとかもやってます。

この著者の最新の記事