Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

検索結果でパンくずや評価などのリッチスニペットを表示させる、構造化マークアップ。
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です…)

narumana
a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした