hbsnow.dev

JSON-LD による構造化データ

amp

JSON-LD とは、Linked Data を JSON で記述するための軽量シンタックスです。Google は構造化データを、 JSON-LD での記述を推奨しています。

JSON-LD の keywords

JSON-LD にはいくつかの keyword がありますが、ここで紹介しているのは AMP で必要になる keyword のみに限定しています。その他の keyword についてはJSON-LD の SPEC にて確認できます。

@context

@context は JSON-LD 全体で使用される省略名を定義するために使用します。

例えば、次の JSON-LD は同じ長い文字列が繰り返し出現しています。

{
  "http://schema.org/name": "Jhon Doe",
  "@type": "http://schema.org/Person"
}

これは @context を使用することで、シンプルに記述できます。

{
  "@context": {
    "name": "http://schema.org/name",
    "Person": "http://schema.org/Person"
  },
  "@type": "Person",
  "name": "Jhon Doe"
}

ここでの name や Person は term と呼ばれ、識別子を短い記法で表現できるようになります。

また、次のように記述できます。

{
  "@context": {
    "schema": "http://schema.org/"
  },
  "@type": "schema:Person",
  "schema:name": "Jhon Doe"
}
{
  "@context": {
    "@vocab": "http://schema.org/"
  },
  "@type": "Person",
  "name": "Jhon Doe"
}

この例のように term の定義が 1 つであれば、@vocab を使用さらに簡略化して書くこともできます。

{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Jhon Doe"
}

逆に複雑であれば、これらの定義を外部ファイルにできます。

{
  "@context": "http://example.org/contexts/person.jsonld",
  "@type": "Person",
  "name": "Jhon Doe"
}
{
  "@vocab": "http://schema.org/"
}

@type

node あるいは typed value の型を指定するときに使用します。

node 型は人物や場所、イベント、Web ページなどの記述されているものの型を指定し、typed value 型は整数や浮動小数点数、または日付など特定の値のデータ型を指定します。

@id

IRI や blank node identifier (_: ではじまる文字列) を用いて一意に識別するために使用します。

先ほどの例では Jhon Doe という人物が複数いた場合、それがどの Jhon Doe なのかがわかりません。

{
  "@context": "http://schema.org",
  "@type": "Person",
  "@id": "https://example.org/jhon_doe",
  "name": "Jhon Doe"
}

この例ではサイトの URL を追加することで、人物を一意に特定しています。

AMP で使用する場合のサンプル

AMP で JSON-LD を使用する場合には、いくつかの記述が必須となる項目があり、構造化データの記事で確認できます。

ブログ記事

{
  "@context": "http://schema.org",
  "@type": "http://schema.org/BlogPosting",
  "mainEntityOfPage": {
    "@type":"BlogPosting",
    "@id":"https://example.com/blog/"
  },
  "headline": "サンプル",
  "image": [
    "https://example.com/blog/example/assets/image@1x1.png",
    "https://example.com/blog/example/assets/image@4x3.png",
    "https://example.com/blog/example/assets/image@16x9.png"
  ],
  "publisher": {
     "@type": "Organization",
     "name": "My Sample Website",
     "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/assets/logo.png",
      "height": 60,
      "width": 600
    }
  },
  "datePublished": "2017-11-12",
  "dateModified": "2017-11-21",
  "author": "Jhon Doe",
  "description": "サンプルページです。"
  }
}

image には次の条件があります。

内容制限
幅1200px 以上
画像形式jpg, gif, png

また最良の結果を得るためには width * height の結果が 800000 以下となる、縦横比 16:9, 4:3, 1:1 の複数の高解像度画像を複数用意する必要があります。

publisher は Organization しか指定できません。よって個人ブログのような場合には name にサイト名、logo にはバナーなどを入れるしかないように思えます。

logo にも、 image と同じように条件があります。

内容制限
幅600px 以下
高さ60px 以下
画像形式jpg, gif, png
背景色白、あるいは明るい色

また、ここに指定される画像は文字商標やロゴであって、アイコンではないことに注意が必要です。

mainEntityOfPage, dateModified, description は recommended であり必須になっていません。

バリデーション

Google 構造化テストツール では実際にサイトで利用するときにエラーがないかの確認をできます。

参考