This slide is writing about JSON-LD. especially product or product list. 商品や商品一覧に関するJSON-LDの書き方をgoogleのガイドラインに沿いながら解説しています。

1. JSON-LDJSON-LD
ERIKA KITADA (ERIKA KITADA ( ))@KITADA_ELLY@KITADA_ELLY

2. ABOUT MEABOUT ME
Erika Kitada(@Kitada_Elly)
普段はECサイト作ってます
マークアップやめんどうな作業の簡略化が好き

3. 北⽥は悩んでいた。
クローラーともっと仲良くなる⽅法はないかなぁ。

4. SEMANTICSEMANTIC
HTML5の詳細度の⾼いタグのおかげで、
サイトの情報をより正しく
検索エンジンに伝えられるようになった。
<article>, <header>. <footer>, <aside>, <figure>, <small>, <time>...etc

5. でも
サイトの情報をもっと
検索エンジンに正しく伝えたい。
そうだ！
構造化データを書こう！

6. BENEFITS OF STRUCTURED DATABENEFITS OF STRUCTURED DATA
【構造化データのメリット】
検索結果がリッチになる（よりページ情報がわかりやすく伝えら
れる） https://developers.google.com/search/docs/guides/search-gallery

7. ABOUT STRUCTURED DATAABOUT STRUCTURED DATA
【構造化データ】
検索エンジン御三⽅(Yahoo!, Microsoft, Google)が定義した共通
の語彙(schema.org)*
schema.orgは、⼈はpersonとか、⼈名はnameとか決められた
語彙の定義で検索の際に使われる。
schema.orgの語彙を使ってマークアップしよう！
でも3種類の書き⽅があるよ。

8. JSON-LD, MICRODATA,JSON-LD, MICRODATA, RDFaRDFa
【3種類の書き⽅】
RDFa:W3Cが作ったHTML5の拡張。HTMLタグの中に構造化
データを記述する。
Microdata:オープンなコミュニティが作った⽂法。HTMLタグ
の中に構造化データを記述する。
JSON-LD:JSONで記述する形式。ネストされたデータ項⽬が
簡単に表現できる。

9. JSON-LDJSON-LD
schema.orgを表現する⽂法は3種類あるけど、⾒た感
じGoogleはJSON-LDを推している。⾚線部分2回も推
してる。 https://developers.google.com/search/docs/guides/intro-structured-data

10. JSON-LD SAMPLEJSON-LD SAMPLE
JSON-LDは、body内のどこにでもjson形式で書ける。
たとえば下の商品*を構造化データでマークアップしてみると
(*うちの息⼦の絵を商品として500円で売るという設定。。。)

11. CASE OF MICRODATACASE OF MICRODATA
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">2つの顔でできている雪だるま</h1>
<img itemprop="image" src="https://example.com/photos/1x1/photo.jpg" alt="2つの顔
<p itemprop="description">説明：たっちゃん画伯が3歳のときに描いた絵である。これはまさかお腹
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/Aggregat
評価：<span itemprop="ratingValue">4.4</span>, <span itemprop="reviewCount">3</sp
</p>
<p itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="JPY" />
<span itemprop="price">500</span>円
<link itemprop="availability" href="http://schema.org/InStock"/>在庫あり
</p>
</div>

12. CASE OFCASE OF RDFaRDFa
⾒た感じmicrodataとRDFaの違いは、いくつかの単語が違うだ
けで書き⽅はほとんど同じ(itemtype -> typeof, itemprop,
property) なんかJSのtypeof演算⼦とかと同じで混乱しそう
<div vocab="http://schema.org/" typeof="Product">
<h1 property="name">2つの顔でできている雪だるま</h1>
<img property="image" src="https://example.com/photos/1x1/photo.jpg" alt="2つの顔
<p property="description">説明：たっちゃん画伯が3歳のときに描いた絵である。これはまさか雪だ
<p property="aggregateRating" itemscope itemtype="http://schema.org/AggregateRat
評価：<span property="ratingValue">4.4</span>, <span property="reviewCount">3</sp
</p>
<p property="offers" typeof="http://schema.org/Offer">
<meta property="priceCurrency" content="JPY" />
<span property="price">500</span>円
<link property="availability" href="http://schema.org/InStock"/>在庫あり
</p>
</div>

13. CASE OF JSON-LDCASE OF JSON-LD
＜script>
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "2つの顔でできている雪だるま",
"image": "https://example.com/photos/1x1/photo.jpg",
"description": "説明：たっちゃん画伯が3歳のときに描いた絵である。これはまさか雪だるまのお腹の
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "3"
},
"offers": {
"@type": "Offer",
"priceCurrency": "JPN",
"price": "500",
"availability": "http://schema.org/InStock"

14. BENEFITS OF JSON-LDBENEFITS OF JSON-LD
HTMLのタグと分けて、ページの情報を設定できるのでタグが
煩雑にならない
価格など、schema.orgの定義上、⼊れ⼦になっているプロパ
ティも、jsonを⼊れ⼦で書くだけなのでわかりやすい
CMSなどで動的に書き出しやすい

15. MARK UP FOR JSON-LD#01MARK UP FOR JSON-LD#01
1. ここにアクセス
2. ページのカテゴリを選ぶ。商品ページなら「product」の
「Read the guide」をクリック
https://developers.google.com/search/docs/guides/search-gallery

16. MARK UP FOR JSON-LD#02MARK UP FOR JSON-LD#02
３. 「JSON-LD example」をクリックして、書き⽅を参考に⾃
分の作成ページの内容に合わせる

17. MARK UP FOR JSON-LD#03MARK UP FOR JSON-LD#03
４. ここにアクセスしてテストする
https://search.google.com/structured-data/testing-tool

18. IMPORTANT POINTIMPORTANT POINT
【注意点】
構造化データはガイドラインが少し厳しいので、
このガイドラインを読もう
https://developers.google.com/search/docs/guides/sd-policies

19. STUMBLED POINTSTUMBLED POINT
【つまずいた点】
⾦額の表記で⽇本円と定義するのを忘れがち
サンプルで商品画像を複数指定してたので、複数指定できると
勘違い(同じ商品のレスポンシブ画像だった。。。)
"priceCurrency": "JPN",
"price": "500"
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
]

20. 悩ましい点悩ましい点
商品詳細のマークアップはわかったけど、商品⼀覧の書き⽅がわ
からない。 ガイドラインを読むと・・・
これはなんだろう。⼀覧はダメなのかな？
（調査中。。LT⼤会に間に合わなかった。。。）

21. 後⽇談後⽇談
LT⼤会で話し合ってたら解決した(^O^)/LT⼤会で話し合ってたら解決した(^O^)/
たとえばエアコンの⼀覧に、20商品くらい掲載されていたとし
て、 20商品分のレビューや⾦額が、ずらっと検索結果に出てく
るのは現実的ではない。
googleのいう下記のガイドラインようやくハラオチ。
Don't mark up a page that describes "10 best ideas for cooking turkey," with links out to each recipe.

22. でも、「エアコン 6畳 型番01234」という⼀つの商品の、 店
別の価格⽐較といった価格コムのような⼀覧は、JSON-LDで表現
できる
そして、その下に、特定商品以外の商品⼀覧やカテゴリをマーク
アップするなって書いてあった。。。
https://developers.google.com/search/docs/data-types/product

23. 結局、商品⼀覧は「カルーセル」という区分のJSON-LDの書き⽅
が合いそうです。
https://developers.google.com/search/docs/guides/mark-up-listings

24. いきなりなまとめいきなりなまとめ
いろいろ試⾏錯誤しておりますが、
構造化データをページに設置して、 検索結果がリッチになると
ユーザーにとってもマシンリーダブル的にも
ページの内容がわかりやすくなるかと思います。
情報の優先度も考慮しつつ
今後もマークアップしていこうと思います。