JSON-LD版!schema.orgで構造化データマークアップ

フロントエンド

まずはじめに

schema.orgではHTMLだけでは伝えることができないより詳しい情報(著者とか)を検索エンジンに伝えることができます。 またこれを行うことで検索結果ページ(SERP)上でリッチスニペットで表示がされるようになります。 どんな表示になるの? メリットは? SEOに効果はある? なんて思った方は過去にまとめた記事があるのでそちらをご覧ください。

Microdata、RDFa、JSON-LDの3つの記述方法がありますが、今回はJSON-LDでの記法を紹介します。 JSON-LDではMicrodataよりもソースを汚すことがなくよりシンプルに書くことができます。 Microdataでの記法については「ブログで使えるschema.orgの構造化データマークアップまとめ」「schema.orgで検索エンジンに正確にイベント情報を伝える」で少し紹介してますのでMicrodataがいいという方はそちらをご覧ください。

JSON-LDの基礎!

MicrodataではHTMLに直接要素に書いていくので、ソースがどんどん汚れていきます。必要のない箇所でも構造化データのためにspanなどを用意するといった必要もあったりと行数が増えたりと汚す原因になってしまいます。 その点JSON-LDは一箇所にまとめてかけるのでソースを汚すことがありません。

scriptタグ

<script type="application/ld+json">
  ~~~~~~~~~ここに記述~~~~~~~~~
</script>

JSON-LDを書きます!ということを宣言しています。 記述はどこでも可能ですが、パフォーマンスのことを考えるとbody閉じタグの直前に書くことをオススメします。

JSONオブジェクト

JSONでは波括弧({})の中にKeyとValueを指定します。「:」で区切った左側がKey、右側がValueをなります。 この波括弧({})で囲んだ1つのかたまりがJSONオブジェクトです。

一つのKeyとValueが終わり次を書く場合には「,(カンマ)」で区切ります。JSONオブジェクトないの最後の行にはカンマは必要ありません。

{
  	"@context" : "http://schema.org",
  	"@type" : "Event"
}

【@context】ではschema.orgであることを宣言します。【@type】には「Event」や「BlogPosting」など書く内容にあったものを記述します。 下記のサイトが日本語訳されていてわかりやすくオススメです。

また、JSONオブジェクトに親子関係を持たせることも可能です。

{
  	"@context" : "http://schema.org",
  	"@type" : "Event",
  	"location" : {
    		"@type" : "Place",
    }
}

複数のJSONオブジェクトを記述する場合には角括弧([])の中に記述します。

[
	{
  	 "@context" : "http://schema.org",
  	 "@type" : "Event",
  	 "location" : {
    		"@type" : "Place",
     }
   },
	{
  	 "@context" : "http://schema.org",
  	 "@type" : "Event",
  	 "location" : {
    		"@type" : "Place",
    }
   }
]

複数書く場合には各JSONオブジェクトの終わりにカンマが必要です。先ほどと同じく最後のJSONオブジェクトの場合にはカンマは必要ありません。

サイトで使える

[随時追加中!] Webサイトで使えるJSON-LDをご紹介します。

パンくずリスト

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "//kigiroku.com/",
        "name": "HOME"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "//kigiroku.com/frontend/",
        "name": "フロントエンド"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "//kigiroku.com/frontend/schema04.html",
        "name": "JSON-LD版!schema.orgで構造化データマークアップ"
      }
    }
  ]
}
</script>

イベント情報

{
    "@context": "http://schema.org",
    "@type": "Event",
    "name": "Frontend Nagoya #1",
    "description": "名古屋開催のフロントエンドに関連するWeb系の勉強会です。",
    "startDate": "2017-06-17",
    "endDate": "2017-06-17",
    "image": "https://dzpp79ucibp5a.cloudfront.net/events_banners/60762_normal_1495021015_bnr_ogp.png",
    "url": "https://frontend758.doorkeeper.jp/events/60762",
    "offers": {
        "@context": "http://schema.org",
        "@type": "Offer",
        "price": "600",
        "priceCurrency": "JPY"
    },
    "location" : {
    	"@type" : "Place",
    	"name" : "ベースキャンプ名古屋",
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "愛知県",
            "addressRegion": "JP",
            "postalCode": "450-0002",
            "streetAddress": "名古屋市中村区名駅3丁目18-5 モンマートビル5階"
        }
    }
}