最近SEOエンジニアやコーダーの中で話題になりつつあるschema.orgに、JSON-LDという記述方法があるということを知ったので、今回JSON-LDを使ったschema.orgの記述方法を紹介します。

まずはじめに

schema.orgって何?という人もいるかと思うので、軽く説明すると、schema.orgを導入することで、次のようなことが可能になります。

  • 検索エンジンに対して、そのサイトの中身に記述されているコンテンツ(文字や画像等)が何を意味しているのか?を伝えることができる
  • 検索エンジンのSERP上でリッチスニペットとして表示させることができる

クローラーはどう頑張ってもプログラムですからね。機械的にしか文字列を理解することができないわけです。

例えば企業情報が掲載されているページにURLが載っていたとしても、「それが何のURLであるか」までは検索エンジンには通常理解ができません。

それを助けてあげることができるのが、このschema.orgというわけです。
また、SERP上でリッチスニペットとして表示させることもできるので、SERP上でのアピール力が強まり、CTRを向上させることができます。

schema.orgの詳しい内容については、以下のサイトでわかりやすく書かれているので、そちらを参考にして下さい。

初心者向けschema.org講座

schema.orgをJSON-LDで記述する利点

schema.orgの記述方法には、「Microdata」「RDFa」「JSON-LD」の3つがあり、現時点で最も主流なのは「Microdata」です。

Microdataはschema.orgの初期からの記述方法ということで普及していましたが、既存のソースコードを汚してしまうという欠点がありました。

そこで、2013年6月からサポートされたのがJSON-LDによる記述方法です。
JSON-LDには、現在主流であるMicrodata形式と比べて次のような利点があります。

ソースコードをシンプルにできる

Microdataでは、ソースコード内の各要素内に属性の形で追記をしなければいけませんでした。また、本来のマークアップでは必要のない箇所に対して<span>を使用する必要があったので、ソースコードが汚くなってしまいました。

JSON-LDでは、schema.orgの記述を好きな場所に一括で記述することができるので、ソースコードを汚さず、シンプルにすることができます。

CMSの場合でも使用が可能

WordPressやMobableTypeの様な高機能なCMSは問題ないのですが、HTMLを直接編集することのできないCMSでは、従来のMicrodata形式の記述はできませんでした。
しかしそういった簡易的なCMSであっても、<head>内に記述するスクリプト用のエリアは用意されていることがほとんどです。

JSON-LDであれば、そこに記述することで今までschema.orgの導入ができなかったCMSであっても、schema.orgの導入が可能です。

記述方法が簡単

Microdataによる記述では、<span>を部分的に使うことで、既存のCSSに影響が出てしまうことがあり、その辺の修正が必要でした。
また、schema.org自体に入れ子関係を持たせるには、親の要素が必要になることもあり、ソースコードの修正をせずに誰でもお手軽に導入というわけにはいきませんでした。
が、JSON-LDであれば、schema.orgの仕様について理解さえしていれば、非常にシンプルで簡単な記述ができるので、HTMLやCSSにそれほど詳しくない人であっても比較的導入が簡単です。後からの修正も簡単なのは嬉しいですね。

記述方法

JSON-LDでは、次のように記述をします。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Corporation",
"name": "LYKAON株式会社",
"telephone": "0800-200-9680",
"url": "http://www.lykaon.co.jp/"
}
</script>

scriptタグ

HTMLドキュメント内の好きな場所に

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

の記述をします。
これは、ここからここまで、JSON-LDですよということを表しています。

記述する場所はどこでも良いとのことですが、ソース内を出来るだけシンプルにするには<head>の中か、<body>の後方に記述するのが良いでしょう。

JSONオブジェクト

schema.orgで記述する内容の始まりと終わりを{}で括ります。
「ここからここまでがJSON-LDの中身ですよ」ということですね。
これを、「JSONオブジェクト」と呼びます。

KeyとValue

「:」で区切られた左側を「Key」、右側を「Value」と呼びます。
KeyとValueは「”」(ダブルコーテーション)で囲み、次の行に行く時(次のKey・Valueの記述をする時)には必ず「,」(カンマ)をつけます。
最後の行にはカンマは必要ありません。

カンマはつけ忘れてしまうことが多いので注意をしましょう。

@context

JSONオブジェクトには、まず初めに「@context」の記述を次のようにしましょう。

"@context": "http://schema.org"

これは、「schema.orgについて書きますよ」ということを表します。

@type

次に、@typeの記述を次のようにします。

【例】

"@type": "Corporation"

これは、Microdata形式で言うところのitemtypeに該当します。
schema.orgで定義される「型」をValueに記述しましょう。
今回の例では、企業情報についてを扱う「Corporation」を指定しています。

Valueに記述する型は以下のサイトから確認が出来ます。

schema.org 日本語訳 – 全ての階層

プロパティ

@contextと@typeの記述が終わったら、次は@typeで指定した「型」で使用できるプロパティをKeyに、その内容をValueに記述します。

【例】

"name": "LYKAON株式会社",
"telephone": "0800-200-9680",
"url": "http://www.lykaon.co.jp/"

「name」では企業名、「telephone」では電話番号、「url」ではサイトURLを記載します。
(続けて書く時はカンマを忘れないように!)

記入すべきプロパティはschema.orgのサイトで確認をしてください。
Corporationの場合は、次のページで確認をします。

http://schema.org/Corporation

左の灰色の、「Property」と書かれた列がプロパティです。
Corporation - schema.org 2014-10-14 13-00-11
企業情報でよく使いそうなのは企業名を表す「name」や、住所を表す「address」、電話番号を表す「telephone」、メールアドレスを表す「email」、企業ロゴを表す「logo」、企業説明を表す「description」でしょうか。

とまあ、JSON-LDでのschema.orgの記述はこんな感じです。
他にも、JSONオブジェクトに親子関係を持たせる「エンベッディング」や、Valueに複数の値を指定する「アレイ」というのがあるのですが、それはまたの機会ということに。
ひとまず今回はJSON-LDでの記述法の基本形を覚えましょう。

関連記事