Google推奨「JSON-LD」で構造化マークアップ

検索結果でパンくずや評価などのリッチスニペットを表示させる、構造化マークアップ。
Googleはこれまでmicrodataでの記述を推奨していましたが、現在JSON-LDを推奨していますね。

ということで、JSON-LDを使って構造化マークアップしてみました。
shema.orgを使ってます。

# JSON-LDの記述方法

下記が基本の形です。
このscriptタグの中にまとめて書きます。
HTML内どこに置いてもOK。

<pre>
&lt;script type="application/ld+json"&gt;
{ 
  "@context": "http://schema.org/", 
  "@type": "####" 
} 
&lt;/script&gt;
</pre>

@####というkeyは主に3つです。

| key        | value |
|:-----------|:------|
| `@context` | http://schema.org |
| `@type`    | WebSiteやArticle、Personなど |
| `@id`      | あまり使わないようですが、パンくずで使います |

keyとvalueを1セットとし、複数ある場合は,（カンマ）を間に入れます。
間に入れるので、最後は入れてはいけません。

<pre>
{
  "@context": "http://schema.org/", 
  "@type": "####",
  "key": "value",
  "key": "value"
}
</pre>

入れ子も同様。

<pre>
{
  "@context": "http://schema.org/", 
  "@type": "####",
  "key": "value",
  "key": {
 　 "@type": "####",
    "key": "value",
    "key": "value"
  }
}
</pre>

arrayの場合は[ ]で囲みます。

<pre>
{
  "@context": "http://schema.org/", 
  "@type": "####",
  "key": "value",
  "key": [
    {
      "@type": "####",
      "key": "value",
      "key": "value"
    }, {
      "@type": "####",
      "key": "value",
      "key": "value"
    }
  ]
}
</pre>

こんな感じです。簡単ですね。
では、実際に構造化マークアップしてみたらどうなるか、やってみます。

# サイト名

<pre>
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "name": "サイト名",
  "url": "https://site-name.jp/"
}
</pre>

# パンくず

以前はshema.orgではできなかったのですが、OKになりました。

![パンくず.PNG](https://qiita-image-store.s3.amazonaws.com/0/146957/574f3182-ad04-4045-f434-b7606711ac16.png)

<pre>
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://site-name.jp/",
        "name": "TOP"
      }
    }, {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https://site-name.jp/2/",
        "name": "第2階層"
      }
    }, {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://site-name.jp/3/",
        "name": "第3階層"
      }
    }
  ]
}
</pre>

# 検索ボックス

![検索.PNG](https://qiita-image-store.s3.amazonaws.com/0/146957/2c2ff792-eaab-5759-b077-4038484d814b.png)

<pre>
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://site-name.jp/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://site-name.jp/search?q={query}",
    "query-input": "required name=query"
  }
}
</pre>

# 記事

AMPページの場合は、ほとんどの項目が入力必須です。

<pre>
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://site-name.jp/article/"
  },
  "headline": "記事タイトル",
  "image": {
    "@type": "ImageObject",
    "url": "https://site-name.jp/thumbnail.png/",
    "height": 800,
    "width": 800
  },
  "datePublished": "2016-12-06T00:00:00+08:00",
  "dateModified": "2016-12-06T00:30:00+08:00",
  "author": {
    "@type": "Person",
    "name": "narumana"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Hikkoshi Samurai",
    "logo": {
      "@type": "ImageObject",
      "url": "https://site-name.jp/logo.png",
      "width": 600,
      "height": 60
    }
  },
  "description": "記事の説明文です。"
}
</pre>

# 評価や価格など

![レビュー.PNG](https://qiita-image-store.s3.amazonaws.com/0/146957/9a556c79-2bb9-6a11-eb77-496966d1f22f.png)

<pre>
{
  "@context": "http://schema.org/",
  "@type": "Restaurant",
  "name": "うどん",
  "description": "うどん屋さんです。",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "3.6",
    "bestRating": "5",
    "ratingCount": "153"
  }
}
</pre>

# まとめ

こんな感じですね。

JSON-LDは書き方さえ覚えてしまえば、microdataと違って、スクリプトにまとめて記述するので、HTMLはすっきりするし、メンテナンス性も良さそうです。
Googleの[構造化データテストツール](https://search.google.com/structured-data/testing-tool)を使えば、エラーもわかるので、そんなに難しくはないと思います。

ただ、構造化マークアップは、現段階でSEOへの影響はないと言われていますので、やれたらやっとく、くらいでいいのかもしれません。
少なくともクリック率には影響があると思うので、リッチスニペットには対応しておくといいかもですね。

今から始めるなら是非JSON-LDで！（そういう弊社はまだmicrodata＋Data-Vocabulary.orgです…）

- [Google 構造化データに関するガイドライン](https://developers.google.com/search/docs/guides/intro-structured-data)
- [Google 構造化データテストツール](https://search.google.com/structured-data/testing-tool)
- [shema.org 日本語版訳](http://schema-ja.appspot.com/)