Google 構造化データについてリッチスニペット、構造化マークアップ手順についてまとめています。 そもそも構造化データは、テキストデータに明確に意味を持たせようという試みです。 リッチスニペットを強化することで、Googleでの検索結果のカスタマイズが行えます。 それによって、ユーザの利便性もあがり、クリック率が上がっる要因にもなります。 そして、構造化マークについても説明しています。 構造化マークは指定のタグを打ち込む必要があり、かなり手間がかかる印象です。 Googleなどのツールを活用して効率よくコーディングを行いたいところです。

1. 1
構造化データ – Structured Data

2. 検索エンジンはキーワードの意味がわからない？？
2

3. レストランの場合
3
4つ星 評価 ratingValue
単語の意図を考えて、意味付けしたいタグを指定する。
(03)-2311-2222 電話 telephone
(月)10:00-20:00 営業時間 openingHours
1000円-2500円 価格帯 lowPrice, highPrice

4. 4
リッチスニペット
検索結果の装飾。現時点で構造化タグの効果が確認できる機能。

5. 5
<dt itemprop="aggregateRating" itemscope
itemtype="http://schema.org/AggregateRating"><span itemprop="ratingValue">3.65</span>点/<a
href="/userreview/tymv/id344646/" itemprop="url"><span itemprop="reviewCount">609</span></a>
件</dt>
http://info.movies.yahoo.co.jp/detail/tymv/id344646/
リッチスニペットが表示される仕組み
次の３つの文法で表現する！！
itemscope： タグ（dt）内のコンテンツがアイテムであることを示す。
itemtype： アイテムに大枠の分類（種別）を与える
itemprop： アイテムに意味を与える

6. 6
https://support.google.com/webmasters/answer/99170?hl=ja
どんなリッチスニペットがあるのか？
2013年10月時点 Googleがサポートしているリッチスニペット
構造化タグは非常にたくさんあるため、優先順位をつけるなら、リッチスニペットに対応してい
るタグから実践していくのがベター。（個人見解）
https://support.google.com/webmasters/answer/146645レビュー
人物 https://support.google.com/webmasters/answer/146646
商品 https://support.google.com/webmasters/answer/146750
表示される項目：
レビューの評価、本文、書いた人、etc。
表示される項目：
名前、画像、肩書き、職種、ニックネーム、
etc。
表示される項目：
商品名、価格帯、レビューの件数、評価、
カテゴリー、最低価格、最高価格
組織 https://support.google.com/webmasters/answer/146861 表示される項目：
会社の名前、住所、電話番号、
etc。不明・・・。探してもでてこなかった・・・(＠_＠;)

7. 7
レシピ https://support.google.com/webmasters/answer/173379
表示される項目：
キャッチ画像、レビュー、調理時
間、分量、材料、etc。
イベント https://support.google.com/webmasters/answer/164506
表示される項目：
イベント名、日付、カテゴリ、場所
（緯度、経度）、キャッチ画像
音楽 https://support.google.com/webmasters/answer/1623047
表示される項目：
曲名、再生時間、再生用URL、
購入用URL、再生回数
パンくずリスト https://support.google.com/webmasters/answer/185417?hl=ja
表示される項目：
パンクズリスト

8. 8
itemscope： タグ内のコンテンツがアイテムであることを示す。
itemtype： アイテムに大枠の分類（種別）を与える
itemprop： アイテムに意味を与える
構造化マークアップ手順
重要なのは、次の３つの文法！！

9. 9
http://schema-ja.appspot.com/docs/full.html
以下のページからページ検索で、「求人」と検索して「JobPosting（求人情報）」を見つ
けて、クリック！
求人情報を例として、マーク手順を説明します。
ファイルは、index.html を使用します。
手順１．求人サイトなので、求人用のschemaを探す。

10. 10
itemtype で使います。
Schema.org と構造化タグとの関係
itempropで使います。
Schema.orgで閲覧できる情報と、実際にhtmlへ埋め込む構造化タグとの関係です。
itemtypeには、 Schema.orgで各アイテムの分類となるページURLを指定します。
itempropには、itemtypeで指定されたページで記載されている、Propertyを指定します。このPropertyが
単語の意味を決定づけます。

11. 11
[変更前]
<div class="container">
<h1>求人サイト</h1>
:
手順2．itemtype を記述する
[変更後]
<div class="container"
itemscope itemtype="http://schema.org/JobPosting" >
<h1>求人サイト</h1>
:
</div>
itemscope は、<div></div> の範囲で、
「これから構造化タグを使います！」という宣言。
index.html に記述してください。
itemtype は、「これから求人情報を説明します！」という宣言。
また、「http://schema.org/JobPostingで指定されている
ページのプロパティを使っていきます！」という宣言。

12. 12
手順3．基本給をマークアップする。
[変更前 ]
<div class="container">
<h1>求人サイト</h1>
<h2>基本給：20万円</h2>
:
[変更後]
<div class="container"
itemscope itemtype="http://schema.org/JobPosting" >
<h1>求人サイト</h1>
<h2>基本給：<span itemprop="baseSalary" >20万円</span></h2>
:
</div>
itempropは、単語の意味付けします。指定する値は、
itemtypeで指定したページ（ http://schema.org/JobPosting ）のプロパティ
（Property）のbaseSalary（基本給）を指定。
span はＨＴＭＬタグで、見た目は変化しませんが属性を指定する
際に使用します。<h2></h2>などのブロックの中で使えます。

13. 14
[変更後]
<div class="container" itemscope itemtype="http://schema.org/JobPosting" >
：
<h2>勤務地：
<span itemprop="jobLocation" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">東京都中央区京橋</span>
</span>
</span>
</h2>
：
[変更前]
<div class="container">
：
<h2>勤務地：東京都中央区京橋</h2>
: