ウェブのあれこれ
ウェブを活用したいひとのためのブログ
JSON-LDで構造化データを記述しよう!
2016/02/19 SEO

JSON-LDで構造化データを記述しよう!

構造化データの記述方法には「microdata」書式以外に「JSON-LD」という方法があります。Googleでは「JSON-LD」による記述も推奨しています。

JSON-LD

JSON-LDはその名の通り、JSON形式で構造化データを記述します。JSONなのでHTMLの中では<script>タグの中で定義していきます。
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "構造化データタイプ名",
    "属性名": "属性値"
}
</script>
ポイントは<script>タグのtype属性を「application/ld+json」とすることです。
こうすることで、JSON-LDで構造化データを定義していることを示します。
このJSON-LDは基本的に1ページの中に1つとされています。

@context

「@context」には基本的に「http://schema.org」と指定します。これは、「http://schema.org」の定義に従って構造化データを記述しているということの宣言ですね。

@type

構造化データのタイプを指定します。
トップレベルのノードでは、該当のページが何について書かれたコンテンツなのかを基準に指定するとよいでしょう。

JSON-LDによる記述のサンプル

WEBサイト(TOPページ)の場合

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "https://obp-ac.osaka",
    "name": "株式会社レボルメ",
    "alternateName": "Revolme Inc.",
    "publisher":{
        "@context": "http://schema.org",
        "@type": "Corporation",
        "name": "株式会社レボルメ",
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "大阪府",
            "addressRegion": "JP",
            "postalCode": "550-0015",
            "streetAddress": "大阪市西区南堀江1-10-11 西谷ビル本館4F"
        }
    }
}
</script>

商品ページの場合

<script type="application/ld+json">
{
    "@context": "http://schema.org",
   "@type": "Product",
   "url": "https://obp-ac.osaka",
   "name": "商品の名称",
   "description": "商品の概要"
   "releaseDate": "2011-11-01"
   "image": "商品画像のURL"
   "url": "商品ページのURL"
   "offers": {
       "@context": "http://schema.org",
       "@type": "Offer",
       "price": "5000",
       "priceCurrency": "JPY"
   },
   "brand":{
       "@context": "http://schema.org",
       "@type": "Corporation",
       "name": "株式会社レボルメ",
       "address": {
           "@type": "PostalAddress",
           "addressLocality": "大阪府",
           "addressRegion": "JP",
           "postalCode": "550-0015",
           "streetAddress": "大阪市西区南堀江1-10-11 西谷ビル本館4F"
       }
   }
}
</script>

イベント情報掲載ページの場合

<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "Event",
   "url": "https://obp-ac.osaka",
   "name": "イベントの名称",
   "description": "イベントの概要"
   "startDate": "2011-11-01"
   "image": "イベント画像のURL"
   "url": "イベントページのURL"
   "offers": {
       "@context": "http://schema.org",
       "@type": "Offer",
       "price": "5000",
       "priceCurrency": "JPY"
   },
   "organizer":{
       "@context": "http://schema.org",
       "@type": "Corporation",
       "name": "株式会社レボルメ",
       "address": {
           "@type": "PostalAddress",
           "addressLocality": "大阪府",
           "addressRegion": "JP",
           "postalCode": "550-0015",
           "streetAddress": "大阪市西区南堀江1-10-11 西谷ビル本館4F"
       }
   }
}
</script>

他にも構造化データは様々!

ざっと主だった用途を挙げてみましたが、構造化データのは様々な種類が定義されているので上記以外は「http://schema.org」を参考に調べてみてください。上記例ではイベントとひとくくりにしていますが、「BusinessEvent」「SaleEvent」「SportsEvent」など個別の定義も様々ありあます。

詳しくはschema.orgのページで調べてみましょう!

1ページ1情報 の場合はJSON-LDがよい!?

該当ページが単一の情報を対象に書かれている場合はJSON-LDで記述すればHTMLタグの中にmicrodataの記述をかかなくてよくなるのですっきりしていいですね。
ただし、一覧ページや複数の情報が書かれたページの場合は各タグ構成にmicrodata形式で構造化データを記述する必要があります。

ページの構成によって使い分けが必要ですね。

Provided by Revolme inc.
revolme.co.jp