JSON-LDを使って構造化データを記述するには？書き方の基本と注意点

JSON-LDの基本事項

JSON-LDには、ほかのシンタックスとどのような違いがあるのでしょうか。JSON-LDを使って構造化マークアップするメリットとともに、解説します。

JSON-LDとは？

構造化データの記述に使用するシンタックスの一つです。2014年1月にW3C（World Wide Web Consortium）の勧告を受けており、Googleが利用を推奨しています（2018年2月時点）。
シンタックスには、ほかにMicrodataやRDFaがあり、どちらも構造化したい部分に直接マークアップする形式です。schema.orgを利用した構造化データの内容は、JSON-LDなどのシンタックスを使って、検索エンジンに理解させることができます。

JSON-LDで構造化データを書くメリット

ページのどこにでも記載ができる

MicrodataやRDFaは構造化データにしたい部分に直接記述していくため、HTMLが複雑になりがちです。一方、JSON-LDは記載する場所に制限がないため、ほかのコードと分けてマークアップすることができます。

既存のコードを書き換えることなくマークアップできる

すでにMicrodataなどで書いたHTMLに、追加で構造化データをマークアップしたいとき、JSON-LDを使用すれば、既存のコードを崩すことなく記述が可能です。
誤って既存のコードを書き換えてしまい、エラーになるような手間も回避できるでしょう。

HTML要素が不要になる

Microdataは該当するHTML要素を利用する必要がありますが、JSON-LDは<script>内に指定することが可能です。構造がすっきりしているため、メンテナンスやトラブルシューティングが行いやすいというメリットもあります。

JSON-LDの書き方

ここでは、JSON-LDを利用した構造化マークアップの方法をご紹介します。複雑そうに見えるかもしれませんが、構成をブロックごとに分けてみるとわかりやすいでしょう。

JSON-LDを使った構造化マークアップ例

パンくずリスト（BreadcrumbList）

パンくずリストの構造化マークアップは検索結果にも表示されます。

記事（Article）

AMPページに構造化データをマークアップすることで、カルーセル内に記事が表示される検索クエリもあります。

商品（Product)

Productの構造化データをマークアップすると、検索結果内に商品の評価や値段、在庫状態を表示することが可能です。

JobPosting

アメリカで導入されているGoogle for Jobsのエンリッチ検索は Job Postingの構造化データで表示可能です。

レシピ（Recipe）

レシピの構造化データをマークアップすると、調理時間やカロリーなどの情報が検索結果に表示されます。

JSON-LDの構造

JSON-LDフォーマットの宣言

構造化データの記述は、まずどのようなルールでマークアップするかを宣言します。JSON-LDを使用する場合は、<script type=”application/ld+json”>から始まり、構造化マークアップしたいデータをすべて記述した後に</script>で閉じます。

JSONオブジェクト

JSONオブジェクトとは、宣言文の間にある、「{ }（波括弧）」で囲んだまとまりのことです。keyとvalueによるペアによって構成され、記述の際はそれぞれを「”（ダブルクォーテーション）」で囲み、互いを「:（コロン）」でつなぎます。JSONオブジェクトを構成するkeyとvalueのペアは、一つだったり、複数だったりします。keyとvalueのペアを続けて並べる際は「,（カンマ）」を使って間を区切りましょう。keyが続かないとき（最後）は打たないように気をつけてください。

なお、keyはボキャブラリーのプロパティ（属性）を、valueは値を指し、「”key”: “value”」の形式で記載します。上記の記述例では、@context、@typeなどがkeyに当たり、http://schema.org、BreadcrumbListなどがvalueです。

keyの中でも、@contextや@typeなど、「@」の付くものはキーワードと呼ばれます。@contextは構造化データがどのような定義（ボキャブラリー）に基づくかを指定するものです。@typeでは、構造化するアイテムのタイプを指定します。どちらも構造化マークアップの際に必ず使用するキーワードです。近年はschema.orgを利用した構造化マークアップが主流となっており、Googleが推奨しているボキャブラリーでもあります。そのため、@contextのvalueは基本的にhttp://schema.orgを指定します。

また、上記の例では、さらに詳しく構造化するために、valueにJSONオブジェクトを埋め込み、親子関係を設定している箇所があります。これを「Embedding（エンベッディング）」と言います。書き方は、親子にしたいkeyのvalueに「{ }」を作り、タイプを指定したら、必要なkeyとvalueのペアを入力していくだけです。

JSONオブジェクトが完成したら、最後にスクリプトタグで閉じることを忘れないようにしましょう。

JSON-LDによる構造化マークアップの検証方法

構造化マークアップが完了したら、きちんと記述されているかを確認しましょう。検証には、構造化データテストツールを利用するのがおすすめです。タグをそのまま貼り付けるか、URLを入力して検証します。

検証の結果、もしエラーがあれば、宣言文やkey、valueに抜けはないか、コードに誤字脱字はないかなど、エラー部分を探して修正しましょう。もし内容に誤りがない場合は、まだクローリングされていない可能性もあります。その際は少し時間を置くと、エラーが解消されることがあります。

画像出典：構造化データテストツール

JSON-LDを書く際の注意点

構造がシンプルでマークアップしやすいJSON-LDにも注意点はあります。以下の点に気をつけて、使用しましょう。

JSON-LDのデメリットを理解する

MicrodataやRDFaと違ってコードを分けられるJSON-LDは、その分テキスト量が多くなってしまうことがあります。特に、モバイル回線を利用するユーザーは表示速度が遅くなる可能性があり、注意が必要です。

また、JSON-LD内に記述した内容はブラウザに表示されることがありません。そのため、実際の内容とは異なる構造化マークアップを施すこともできます。ただし、リッチスニペットの品質ガイドラインに反するとスパム認定を受けることもあるので、ページの内容に沿った記述を行うように心がけましょう。

加えて、リッチスニペットの中には、Googleがまだ対応中のものもあります。例として挙げられるのが、ソフトウェアアプリケーションのリッチスニペットです。

構造化データにおいて、リッチスニペットの表示は大きなメリットとなっています。しかし、中には実装されていないタイプもあり、Googleが今後対応していく可能性があるという点は念頭に置いておきましょう。

目的・環境に合ったシンタックスを選ぶ

シンタックスにはそれぞれメリット、デメリットがあるので、メリットを最大限享受できるものを選択しましょう。選び方には、次のようなポイントがあります。

• コーディングやメンテナンスがしやすいもの
• 自身のサイト環境と相性が良いもの
• 構造化データを反映させたい検索エンジンに対応しているもの
• サイトに合ったリッチスニペットが表示できるもの

また、シンタックスはいくつか組み合わせることもできるため、場合によっては使い分けを選択肢に入れても良いでしょう。ただし、複数の方法で構造化マークアップする場合は、それぞれで伝えている内容が異ならないように注意が必要です。

構造化データにはJSON-LDが最適

Webサイト上のコンテンツを構造化マークアップすると、検索エンジンに内容を伝え、リッチスニペットやリッチカードを表示させることができます。検索結果上の表示方法を最適化すると、ユーザーのクリック率の向上も見込めます。
これから構造化データを導入しようとしている方は、JSON-LDを使った構造化マークアップに取り組んでみてはいかがでしょうか。