構造化マークアップ
セマンティックWeb
Webページおよびその記述された内容について、それが何を意味するかを表す情報（メタデータ）を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。
インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティックWebである。
引用元：http://e-words.jp/w/E382BBE3839EE383B3E38386E382A3E38383E382AFWeb.html
テキストを単なる文字とするのではなく、検索エンジンが情報としてより詳しく認識できるように意味を与える。
人を介さずにコンピュータが自律的に処理できるようにするための技術。
構造化データ
セマンティックWebを実現するための手段として、構造化データがある。
Microdata
<div itemscope itemtype="http://schema.org/Person">
<p>
私は
<span itemprop="name">おなまえ</span>
<span itemprop="nickname">にっくねーむ</span>
です。
</p>
</div>
-
itemscopedivの中に構造化データがあることを示す -
itemtypeボキャブラリーの種類を指定する -
itempropitemtypeで示された詳細情報を示す -
（
itemref離れた場所に記述されている情報とリンクする）
これらを設定することで、リッチスペニットが表示される。
（お店の星評価、パンくずリストなど）
ボキャブラリー
itemtypeで指定する値を定義する規格
どういった内容が書かれているのか、情報の種類を検索エンジンに与える
シンタックス
ボキャブラリーで値を定義し、HTMLにマークアップ する際の仕様がシンタックス
- Microdata
- RDFa
- Microgormats
- JSON-LD
などの種類があり、GoogleはJSON-LDを推奨している。
JSON-LDは他のシンタックスに比べHTML上で各要素にマークアップ する必要がなく、記述を一箇所に集めておけるため見やすく、後で修正がしやすい。
構造化テストツール
JSON-LD
<script type="application/ld+json">
{
"@content": "http://schema.org",
"@type": "Person",
"name": "おなまえ",
"url": "http://myportfolio.moo.jp/pf"
}
</script>
scriptタグ
<script type="application/ld+json"></script>で囲む。
置く場所はどこでも良い。ブラウザのレンダリングには影響せず、そのほかのコードと独立している。
{ } ( 波括弧 )
schema.orgで表現する一つのものは { で始まり } で終わる。
{ } で囲んだ一つのまとまりをJSONオブジェクトと呼ぶ。
Key: Value
JSONオブジェクトは一つまたは複数のKeyとValueのペアで構成される。
キーとバリューは「 : 」(コロン)で区切る。そして、"" （ダブルクォーテーション）で共に囲う。
頭に「@」がつくキーは特殊なキーで「Keyword」と呼ばれる。
などを覚えておく。
@content
@contentのバリューにはhttp://schema.orgを使用する。
@type
schema.orgで定義されているモノがバリューになる。
例えば、人物はPerson,イベントはEvent,製品やサービスはProductで定義されている。
ここではhttp://schema.org/Personのように完全なURLを@typeのバリューに指定することもできるが、@contentですでにhttp://schema.orgを指定しているため、@typeではPersonのみでよい。
キーとバリュー
@typeで指定したタイプで利用できるプロパティがキー。
キー（プロパティ）に対応するバリューはサイトが持つ固有の値。
キーとバリューのセットの後にまたキーが続くときは「 , 」(カンマ)で区切ること。
Embedding(エンベッディング)
バリューにJSONオブジェクトを埋め込むことができる。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Event",
"name": "CSS Nite LP36",
"startDate": "2014-09-20",
"Location":{
"@type": "Place",
"name": "ばしょばしょ",
"address": "●●区●●町1-1-1"
},
"Performer": {
"@type": "Person",
"name": "おなまえ",
"url": "http://myportfolio.moo.jp/pf"
}
}
</script>
aggregateRating（平均評価）のバリューとoffers(販売情報)で定義したJSONオブジェクトをエンベッディングする。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"name": "しょうひんめい",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5.0",
"ratingCount": "20"
},
"Offers": {
"@type": "Offer",
"price": "1000"
"priceCurrency": "JPY"
}
}
</script>
####Array
バリューに複数の値を使用する際にアレイを使う。
"Performer": ["まちこ", "さだこ", "りこ", "さえ"]
"openingHours": ["Mo-Fr 14:00-20:00", "Sa-Su 15:00-22:00"]
複数のプロパティを別途指定しても、検証ツールではエラーが出なかったとしても通常は最初しか認識されないため、複数のバリューを同じプロパティで指定したいときはアレイでひとつにまとめる。
アレイはエンベッディングでも使用する。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Event",
"name": "いべんとのなまえ",
"startDate": "2014-09-20",
"Location":{
"@type": "Place",
"name": "ばしょのなまえ",
"address": "●●区●●町1-1-1"
},
"Performer": [{
"@type": "Person",
"name": "まちこ",
"url": "http://myportfolio.moo.jp/pf"
},
{
"@type": "Person",
"name": "さだこ",
"url": "http://myportfolio.moo.jp/pf"
},
{
"@type": "Person",
"name": "りこ",
"url": "http://myportfolio.moo.jp/pf"
},{
"@type": "Person",
"name": "さえ",
"url": "http://myportfolio.moo.jp/pf"
}]
}
</script>