LoginSignup
216

More than 5 years have passed since last update.

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

Posted at

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

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

JSON-LDの記述方法

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


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

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

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

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


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

入れ子も同様。


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

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


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

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

サイト名


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

パンくず

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

パンくず.PNG


{
  "@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階層"
      }
    }
  ]
}

検索ボックス

検索.PNG


{
  "@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"
  }
}

記事

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


{
  "@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": "記事の説明文です。"
}

評価や価格など

レビュー.PNG


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

まとめ

こんな感じですね。

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

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

今から始めるなら是非JSON-LDで!(そういう弊社はまだmicrodata+Data-Vocabulary.orgです…)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
216