Sep. 4th,2018
構造化データ
“セマンティックウェブ”とは？
“セマンティックウェブ(semantic web)”とはウェブページなどのウェブ上の情報にメタデータを付けることでコンピューターによってより効率的に情報を認識できるようにする構想で、1998年に提唱されました。
ウェブ上にはあらゆるデータがそれぞれのウェブサイトに掲載されています。また、それぞれのウェブサイトはハイパーリンクによってそれぞれ結びつけられていて人間のユーザーはウェブページ間を移動してそれぞれのウェブサイトで読んだ情報を“処理”することができます。しかし、コンピューターには「これは画像である」「これはテキストある」ということはわかりますが、何の画像なのか、何について書いてあるのかなど明確に認識することができません。“セマンティックウェブ”ではメタデータを付けることでコンピューターはこれらの情報の意味を明確に認識することができます。
また、人間のようにウェブサイトを跨いだ情報の関係性を認識したり、関連付けたりすることもできません。“セマンティックウェブ”では別々のウェブサイトにある情報を関連付けて結びつけることができます。
例えば以下のような文章が書かれたウェブサイトがあるとします。
清少納言は女流歌人で枕草子を書きました。
全く別のウェブサイトには以下のような文章が書いてあります。
清少納言は平安京に住んでいて本名は清原諾子です。
“セマンティックウェブ”ではこれらの情報を結びつけて以下のような情報をコンピューターも読み取ることができます。
本名が清原諾子の清少納言は平安京に住んでいる女流歌人で枕草子を書いた。
このようにしてコンピューターによる情報の可読性を高めることでウェブ上をコンピューターが利用できる一つのデータベースとすることが“セマンティックウェブ”の大きな目的です。
“セマンティックウェブ”は検索エンジン、検索クローラーによるウェブページの可読性も高め、人間のユーザーもより必要とする情報にアクセスしやすくします。“セマンティックウェブ”を実現するための手段の一つが“構造化データ”です。
“構造化データ”とは？
“構造化データ(structured-data)”とはウェブページ上にあるコンテンツにメタデータを与え、ブラウザや検索エンジン、検索クローラーなどのコンピューターがウェブページのコンテンツを認識しやすくするためのマークアップのことです。
例えば、ある創作物について書いてある文章で「著者の名前」「編集者の名前」「出版者の名前」といろいろな人物の名前が書いてあったり、「最初に出版された日付」「編集された日付」などといろいろな日付が書いてあったりしてもそれらをコンピューターが認識するのは困難です。しかし、“構造化データ”のマークアップにより、「著者の名前」「編集者の名前」「出版者の名前」や「最初に出版された日付」「編集された日付」などと細かく意味を示すことができ、より明確に文章の内容を認識してもらうことができます。
“構造化データ”はコンピューター向けのものなのでブラウザでウェブページを見る人間のユーザーには表示されません。
“構造化データ”の恩恵
“構造化データ”をマークアップしてウェブページの製作者が得られる恩恵のもっとも大きなものは検索エンジンでの検索結果の最適化です。“構造化データ”によって検索エンジンの情報を集める検索クローラーはウェブサイトの情報をより容易に認識することができ、その結果より適切な検索結果が表示されるようになります。
検索エンジンがより明確にウェブサイトの情報の意味を認識することで、ウェブサイトが検索された時に“リッチスニペット(rich snippet)”が表示されるようになります。
“リッチスニペット”は検索エンジンで通常表示されるウェブページのタイトルや内容を抜粋したテキストだけの検索結果ではなく、それらに加えて画像や価格、評価などを合わせて表示する検索結果のことです。
“リッチスニペット”は“構造化データ”のマークアップをしていれば絶対表示されるわけではなく、ガイドラインに沿っていること、コンテンツとの関連性、コンテンツのクオリティなどの条件を満たす必要があるということに注意する必要があります。
“構造化データ”をマークアップすることは検索結果での表示順位には影響しないとされていますが、より目を引きやすくなることでクリックされやすくなる可能性があるのでSEOでは“構造化データ”のマークアップが重要視されています。
“構造化データ”の“シンタックス”
“シンタックス”とはプログラミング言語などで定められた構文規則のことで“文法”とも呼びます。コンピューターにデータを認識してもらうためには決められたルールに沿って記述しなければいけませんが、この“ルール”が“シンタックス”です。“構造化データ”をマークアップするための“シンタックス”は主に以下の3つが使用されています。
- microdata
- HTMLの要素に直接“構造化データ”をマークアップします。HTMLで定義された属性を使用します。
- RDFa
- HTMLの要素に直接“構造化データ”をマークアップします。記述の仕方は“microdata”に似ていますが、RDFaで定義された属性を使用します。
- JSON-LD
- HTMLの“script”要素の中に“JSON(JavaScript Object Notation)”形式で記述します。“microdata”や“RDFa”とは異なり、コンテンツと構造化データを別々に記述します。
“シンタックス”は併用することができます。なので直接構造化データをマークアップできる要素がある箇所は“Microdata”で、“div”要素や“span”要素など余計なタグを付け加えないとマークアップできない個所は“JSON-LD”でというマークアップの仕方もできます。
“構造化データ”の“ボキャブラリー”
構造化データは“プロパティ名”という決められた単語を指定して意味を付けていきますが、この“プロパティ名”を定義する“辞書”のようなものが“ボキャブラリー(vocabulary)”です。
ウェブ上には“data-vocabulary.org”、
“ボキャブラリー”によって定義された“プロパティ名”はウェブ上での共通のラベルのようなもので、同じ“ボキャブラリー”を使用していればたとえ違うウェブサイトであったとしても“プロパティ名”は同じ意味を持ちます。例えば“familyName”の“プロパティ名”が付けられた情報は“schema.org”の“ボキャブラリー”を使用したウェブサイトであればどのウェブサイトにその情報があっても“人の名字”を意味します。
また、全く同じ情報に同じ“プロパティ名”が付けられていればその情報はどのウェブサイトにその情報があったとしても“同じ情報である”として認識されます。
“schema.org”とは？
“schema.org”は大手検索エンジンのGoogle、Yahoo!、Microsoft(bing)が策定を進めている構造化マークアップのための共通規格です。現在最も使用されている構造化マークアップのための“ボキャブラリー”で、大手の検索エンジンではサポートされています。
もともとGoogleは“data-vocabulary.org”という“ボキャブラリー”を独自に策定していましたが、“schema.org”に参加したことで“schema.org”にその機能を引き継いでいます。
“schema.org”はさまざまな“ボキャブラリー”が定義されていて、構造化マークアップしたいコンテンツの種類によって選ぶことができます。この種類は“タイプ(Type)”で表します。600あまりの“タイプ”があり、“タイプ”ごとに使用できる“プロパティ名”が定義されています。
一番大まかな“タイプ”は“Thing”(“http://schema.org/Thing”)で、“モノ”について構造化マークアップするのに使用できる“プロパティ名”が定義されています。
“Thing”の下には“CreativeWork”
下位の“タイプ”ではその上位の“タイプ”で定義されている“プロパティ名”を使用できます。例えば“Book”ではその上位の“CreativeWork”とさらにその上位の“Thing”で定義された“プロパティ名”も使用することができます。
JSON-LD
“JSON”とは？
“JSON(Javascript Object Notation)”とはJavascriptの中でデータを表現するための記述方法(“データフォーマット”)です。
“JSON”は同じくデータフォーマットであるXMLに比べて記述が簡潔で、コンピューターだけでなく人間への可読性も高いことが特徴です。
以下はあるデータをXMLの形式で記述したものです。
<members>
<member>
<id>0966</id>
<name>清原諾子</name>
<penname>清少納言</penname>
<department>内裏</department>
</member>
<member>
<id>0970</id>
<name>藤原香子</name>
<penname>紫式部</penname>
<department>内裏</department>
</member>
</members>
同じデータをJSONの形式で記述すると以下のようになります。
[
{
"id":"0966",
"name":"清原諾子",
"penname":"清少納言",
"department":"内裏"
},
{
"id":"0970",
"name":"藤原香子",
"penname":"紫式部",
"department":"内裏"
}
]
“JSON”では“キー(key)”とコロン(“:”)を挟んだその“値(value)”のペアを並べていくことで表のようにデータを表現します。マークアップ言語ではないのでXMLで必要な終了タグが必要ないので見た目はとてもシンプルです。
“JSON”はJavascriptをベースとしていますが、Javascript専用のデータフォーマットではなく、C言語やPerl、PHPなど多くのプログラム言語で使用することができます。
“JSON-LD”とは？
“JSON-LD(Javascript Object Notation for Linked Data)”とは“JSON”形式で“Linked Data(LD)”を記述するための規格です。
“Linked Data”はウェブ上にあるデータをコンピューターが認識できる形式で共有し、相互につなげるための技術で、“セマンティックウェブ”実現のための重要な技術です。
“JSON-LD”はW3Gによって仕様が策定され、2014年に勧告されました。
Googleは現在“JSON-LD”での構造化マークアップを推奨しています。
“JSON-LD”と“Microdata”の比較
前述したように構造化データを記述するためのシンタックスにはJSON-LD以外にも“Microdata”や“RDFa”などがあります。ここではJSON-LDと“Microdata”の記述方法を比較します。
以下のコードはある文章を“Microdata”の形式で構造化マークアップした例です。
<div itemscope itemtype="http://schema.org/CreativeWork">
<p itemprop="description">
下に書かれている文章は<time datetime="1001" itemprop="dateCreated">長保3年</time>に<span itemprop="locationCreated">平安京</span>で書かれたとされる“<span itemprop="name">枕草子</span>”という<span itemprop="genre">随筆</span>の一節です。
<span itemscope itemprop="author" itemtype="http://schema.org/Person">
“枕草子”は<span itemprop="name">清少納言</span>という平安時代の<span itemprop="jobTitle">女流歌人</span>により執筆されました。“清少納言”はペンネームのようなもので本当の名前は<span itemprop="familyName">清原</span><span itemprop="givenName">諾子</span>であったと言われますが諸説あります。清少納言は<span itemprop="colleague">紫式部</span>とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</span>
</p>
<blockquote itemprop="text">
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
</div>
“Microdata”はHTMLの仕様で定義された属性を直接HTMLの要素に指定してマークアップしていきます。
以下のコードは同じ文章の構造化データをJSON-LDで記述したものです。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "CreativeWork",
"name":"枕草子",
"dateCreated":"1001",
"locationCreated":"平安京",
"genre":"随筆",
"author": {
"@type": "Person",
"name":"清少納言",
"familyName":"清原",
"givenName":"諾子",
"jobTitle":"女流歌人",
"colleague":"紫式部"
},
"text":"夏は夜月のころはさらなり、闇もなほ、蛍の多く飛びちがひたるまた、ただ一つ二つなど、ほのかにうち光て行くもをかし雨など降るもをかし"
}
</script>
<p>
下に書かれている文章は<time datetime="1001">長保3年</time>に平安京で書かれたとされる“枕草子”という随筆の一節です。 “枕草子”は清少納言という平安時代の女流歌人により執筆されました。“清少納言”はペンネームのようなもので本当の名前は清原諾子であったと言われますが諸説あります。清少納言は紫式部とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</p>
<blockquote>
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
JSON-LDでは“script”要素の中にすべての構造化データを記述するので文章自体のコードに手を加える必要がありません。
裏を返せば、JSON-LDでは同じ内容をHTMLの本文とJSON-LDで二度書かなければならないのでそれぞれ一長一短あります。
マークアップする
JSON-LDを記述するルール
“script”要素
JSON-LDは“script”要素の中に記述していきます。“type”属性に指定するMIMEタイプは“application/ld+json”です。
配置する場所は“script”要素が配置できる場所であれば文書内のどこでも大丈夫です。ただし、文書の中に記述しなければならず、外部ファイルにして“src”属性で読み込むことはできません。
“script”要素の中に記述しますがスクリプトが実行されるわけではありません。また、ブラウザには表示されず、人間のユーザーには見えません。
<script type="application/ld+json">
</script>
オブジェクト
“{”と“}”で囲まれた部分は“オブジェクト”と呼ばれます。
構造化データを記述するJSON-LDでは“オブジェクト”はある一つの物事についての構造化データの“かたまり”を表します。
<script type="application/ld+json">
{
}
</script>
キーと値
“オブジェクト”は1つ以上の“キー(key)”と“値(value)”のペアから成ります。“キー”と“値”はそれぞれ“"(ダブルクォーテーション)”で囲みます。
“キー”と“値”は“:(コロン)”を挟んで記述し、複数のペアを記述する場合はカンマ(“,”)で区切って記述します。
"familyName":"清原",
"givenName":"諾子"
“オブジェクト”の最初には先頭に“@(アットマーク)”がついた特殊な“キー”である“キーワード(keyword)”を記述します。JSON-LDの“キーワード”は17種類ありますが、構造化データを記述するのに使用されるのは“@context”、“@type”と“@id”の3つです。
“Context(コンテキスト)”には“文脈”などの意味がありますが、“@context”で“http://schema.org/”の“文脈”を使用して構造化データを記述することを宣言します。
"@context": "http://schema.org/"
次に“@type”で何についての“オブジェクト”なのかを示します。ここでは“@context”で指定した“http://schema.org/”のどの“ボキャブラリー”(“タイプ”)を使用するのかを指定します。
"@type": "Person"
“キーワード”で“ボキャブラリー”を指定した後は、それで定義された“プロパティ名”を“キー”にして“値”を記述していきます。“値”は構造化マークアップしたいウェブサイトのデータです。“値”はテキストである場合が多いですが、“プロパティ名”ごとに指定できるに“値”が決められていて、“プロパティ名”によってはURLであったり、決められた形式の文字列である場合もあります。
記述した“キー”と“値”は“{”と“}”で囲んで“オブジェクト”にします。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person",
"familyName":"清原",
"givenName":"諾子",
"homeLocation":"平安京",
"jobTitle":"女流歌人",
"worksFor":"内裏"
}
</script>
ちなみにこれは簡略化されていて本来は以下のようなコードになります。
<script type="application/ld+json">
{
"@type": "http://schema.org/Person",
"http://schema.org/familyName":"清原",
"http://schema.org/givenName":"諾子",
"http://schema.org/homeLocation":"平安京",
"http://schema.org/jobTitle":"女流歌人",
"http://schema.org/worksFor":"内裏"
}
</script>
ひとつ前の例では前述したように「
“@id”は“オブジェクト”を示すグローバルな識別子を示すための“キーワード”で“パンくずリスト”の構造化マークアップなどで使用されます。
"item": {
"@id": "https://web.havincoffee.com/",
"name": "ホーム"
}
この例では“値”の中に“オブジェクト”を“エンベディング”していますが“エンベディング”については後述しています。
エンベディング
“オブジェクト”には親子関係を持たせることができ、これを“エンベディング(embedding)”と呼びます。
例えば以下のようにある作品についての“オブジェクト”があるとします。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "CreativeWork",
"name":"枕草子",
"dateCreated":"1001",
"locationCreated":"平安京",
"genre":"随筆",
"author": "清少納言",
"text":"夏は夜月のころはさらなり、闇もなほ、蛍の多く飛びちがひたるまた、ただ一つ二つなど、ほのかにうち光て行くもをかし雨など降るもをかし"
}
</script>
また、以下はある人物についての“オブジェクト”です。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person",
"name":"清少納言",
"familyName":"清原",
"givenName":"諾子",
"jobTitle":"女流歌人",
"colleague":"紫式部"
}
</script>
一つ目の“オブジェクト”に含まれる“author(作者)”の“値”である“清少納言”が二つ目の“オブジェクト”で記述されている人物と同じであればこの“オブジェクト”を一つ目の“オブジェクト”の“author”の“値”として“エンベディング”することができます。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "CreativeWork",
"name":"枕草子",
"dateCreated":"1001",
"locationCreated":"平安京",
"genre":"随筆",
"author": {
"@type": "Person",
"name":"清少納言",
"familyName":"清原",
"givenName":"諾子",
"jobTitle":"女流歌人",
"colleague":"紫式部"
},
"text":"夏は夜月のころはさらなり、闇もなほ、蛍の多く飛びちがひたるまた、ただ一つ二つなど、ほのかにうち光て行くもをかし雨など降るもをかし"
}
</script>
このように“author”はただの文字列である“清少納言”でしたが、“エンベディング”することでより詳しく“author”について記述することができます。
“エンベディング”した“オブジェクト”の“@context”は省略できます。
アレイ
“値”は複数指定することができ、この記述ルールを“アレイ(array)”と呼びます。“アレイ”は“[”と“]”で囲み、それぞれの“値”はカンマ(“,”)で区切って記述します。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"name":"内裏",
"founder":"桓武天皇",
"foundingDate":"0794",
"member": ["清少納言","紫式部"],
"foundingLocation":"平安京"
}
</script>
“アレイ”を使用して複数の“オブジェクト”を“エンベディング”することも可能です。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"name":"内裏",
"founder":"桓武天皇",
"foundingDate":"0794",
"member": [
{
"@type": "Person",
"name":"清少納言",
"familyName":"清原",
"givenName":"諾子",
"jobTitle":"女流歌人"
},
{
"@type": "Person",
"name":"紫式部",
"familyName":"藤原",
"givenName":"香子",
"jobTitle":"女流歌人"
}
],
"foundingLocation":"平安京"
}
</script>
マークアップの検証
“構造化データ”が正しくマークアップできているかどうかはGoogleが提供する“構造化データ テストツール”などで検証することができます。
“構造化データ”を検証するには“構造化データ テストツール”に検証したいウェブページのURLを入力するか直接マークアップしたコードを入力します。
検証結果は左側に検証しているコードが、右側に“構造化データ”がどのように認識されているかが表示されます。
“構造化データ”に間違いがある場合はその箇所を知ることができます。
左側に表示されるコードは編集することができ、中央のボタンをクリックするとすぐに編集した“構造化データ”を見ることができます。
正しく“構造化データ”をマークアップできていないとマークアップした意味がなくなってしまいますので、マークアップした後は“構造化データ”が正しく認識されているか必ず検証しましょう。
