仕事で構造化マークアップについて学び直す必要があったので、再度学ぶついでにスライドにまとめてみました。

いわゆる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 はこんな感じのフォーマット

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