仕事で構造化マークアップについて学び直す必要があったので、再度学ぶついでにスライドにまとめてみました。
いわゆるHTMLコーディングにおけるマークアップとは違うものですので、初心者の方はご注意ください。
スライド
スライドをまとめる際のメモ
以下は情報をインプットしていた際のメモです。
読み易くなってはいませんが、スライドよりも端的かもしれないため、掲載しておきますが、できればスライドを読んで欲しいです。
だいたいのことは、ここを読めばわかる
https://www.suzukikenichi.com/blog/definitive-guide-of-schema-org-using-jsonld/
構造化マークアップは通常のマークアップとは別に「『これ』は『あれ』である」というのをコンピューターに知らせる役目
『これ』とか『あれ』というのは、
- 『わがはい』は『猫』である
- 『名前』は『まだない』
- 『この店の名前』は『注文の多いレストラン』
みたいな感じ。
これらの、主語や目的語に入り得る言葉を定義しているのが、schema.org (W3Cかな?と思ったら違った。Bing、Google、Yahoo!のコラボレーションとのことで正式な標準化団体ではありません。)
同様のものとしては data-vocabulary.org があるが、こちらは開発が終了している。
(schema.orgの方が後発。Googleもschema.orgを推奨)
通常のマークアップでは「見出し」とか「リスト」であることは示せるが
「夏目漱石」が「人名」であるのか「地名」であるのか、「夏目漱石」が「どういった人物」であるのかを示すことはできない。
これを明確に指定できるのが構造化マークアップ。
マークアップ方法の概要というか結論
JSON-LD を使えばいい。W3C勧告になったのは2014年の1月。
JavaScript Object Notation Linked Data の略。
同列に扱われるのは、RDFa や microdata と呼ばれるもの。
どんな「書式」で書けばいいのかということ。
schema.orgはデータの決まり(ボキャブラリー)のことで、こちらはデータベースに近い位置付け。
概ね、JSON-LD はこんな感じのフォーマット
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "コーディングサロンパソコン",
"image": [
"https://coding-salon.pro/photos/1x1.jpg",
"https://coding-salon.pro/photos/4x3.jpg",
"https://coding-salon.pro/photos/16x9.jpg"
],
"description": "コーディングサロンパソコンは、コーディングが便利になるツールがプリインストールされたPCです",
"releaseDate":" 2019-01-01T00:00:00+09:00 "
}
</script>
HTMLに直接書けるものは、Microdata でもいいが、書けない場合、無駄にdivやspanを追加することになるので、JSON-LD は有用。
ただし、HTMLに存在しないものも書けるのでスパムも可能になってしまう。
これから始める人はJSON-LDでいい。
JSON-LDフォーマットの宣言
scriptタグでいい。type属性の意味などはいつか調べるけれど、JSON-LDを指定しているだけ。
なぜ scriptタグ なのかは少し気になる。他に適切なタグがなかったからか、scriptタグが適しているのかは不明。
schema.org(で定義されているボキャブラリー) を JSON-LD のフォーマットで指定しているという感じ
- schema.orgで表現する1つのモノは 「{」で始まり「}」で閉じる。
- JSONオブジェクトは、1つまたは複数のKey(キー) とValue(バリュー) のペアで構成されます。
- キーとバリューは「:」(コロン)で区切ります。
- そして、「”」(ダブルクォーテーション)でともに囲みます。
まぁ…普通のJSON。
配置
パフォーマンスのことを考えるのであれば、body の閉じタグの直前が良いでしょう。
キーワード?
JSON-LDでは、keyに@Context、@type、@idといったキーワードが定義できる。
キーワードは10種類以上存在するが、schema.orgで利用することになるのは、@Context、@type、@idぐらい
- schema.orgで @id が使われているのは Periodical くらい。
└パンくずで @id を使うみたいだ - つまり基本的には @Context、@type しか使わない
- @graph、@language、@reverse なんかもあるけれど、schema.orgでは使わない様子
@context
構造化マークアップの場合、@context のバリューには http://schema.org を指定。
「http://schema.org の定義に従って記述しますよ」という宣言のようなもの。
HTMLではよくあること
※というこはほぼ100% “@context”: “http://schema.org”, を最初に指定かな。
※おっと、http? https?
https://schema.org/docs/faq.html#19
これによるとどっちでもいいとのこと。文脈的には https にするのがよさそう。
@type
これで、何について表現するのかを指定する。一番肝の部分。
schema.orgで定義されているモノ(アイテム)がバリューにはいる。
“@type”:”表現するもの”
「表現するもの」に入るのは、
- 人物なら Person
- イベントなら、 Event
- 製品やサービスなら Product
という感じのものが入る。
普通は、
“@type”:”Person”
と指定するけれど、
“@type”:”http://schema.org/Person”
という指定もあり。
@context で指定済みなので省略できるという感じ。
@typeの値は勝手に自分で入れていい訳ではなく、schema.orgで定義されているということ。
その一覧は、
http://schema-ja.appspot.com/docs/full.html
ここが日本語でわかりやすいけど・・・・・膨大!!!!(&載っていないのもありそう。例えば logo とか)
大元はここ。1620個!??
https://schema.org/docs/full.html
https://schema.org/version/3.4/schema.jsonld
具体的な数はわからないけれど、後者のJSONは1620個ある。前者のリストは800個くらい。
よく使われるのはこの辺りって書いてあるけど、そうでもないと思う
https://schema.org/docs/schemas.html
一般的に使われそう(=Googleが利用している)なものはここに載っている
https://developers.google.com/search/docs/data-types/article
https://developers.google.com/search/docs/guides/mark-up-content
https://developers.google.com/search/docs/guides/search-gallery
※意外と Person が一番親で使われることはなく、 Article、NewsArticle、BlogPosting などの authorプロパティのバリューなどとして使われる様子。
※もちろんその人の紹介ページであれば Person が使われるけれど、Google的には使う場所がないっぽい。(人名検索した時に大きく出るやつは違うのかな?)
プロパティ
@type で指定したアイテムに応じて、使用できるプロパティが決まっていて、それをキーに持てる。
Person なら、「nameプロパティ」とか「urlプロパティ」とか。
“name”:”竹内直人”,
“name”:”https://capybara-design.com/”,
という感じ。(順不同)
他にも、
- 生年月日を表す birthDate
- 写真を表す image
- 勤務先を表す worksFor
などがある。
これらは、http://schema.org/Person に載っている・・・けど・・・膨大!!!!
同じプロパティを別個に複数記述すると検証ツール(後述)ではエラーが出なかったとしても、通常は最初しか認識されない。
複数の値を同じプロパティで指定したいときは配列で1つにまとめる。
これらは埋め込み・もしくは入れ子にすることができる
イベントの中の「講演者」や「会場」などを更に構造化マークアップすることが可能
具体的にどのページに書けばいいの?
といった疑問を少し解消してくれるかもしれないリンク。
https://developers.google.com/search/docs/guides/sd-policies
https://webtan.impress.co.jp/e/2017/12/18/27557