このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

マイクロデータ属性

記事Sep. 2nd,2018
July 7th,2020
構造化データのマークアップに使用するマイクロデータ属性について
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

マイクロデータ

“構造化データ”とは?

構造化データ(structured-data)”とはウェブページ上にあるコンテンツにメタデータを与え、ブラウザや検索エンジン、検索クローラーなどのコンピューターがウェブページのコンテンツを認識しやすくするためのマークアップのことです。このマークアップにより、例えば、ある創作物について書いてある文章で「この部分は著者」「この部分は編集者」「この部分は出版者」や「この部分は最初に出版された日付」「この部分は編集された日付」などと細かく示すことができるので検索エンジンにウェブページのコンテンツの意味がより明確に検索エンジンに伝わり、より適切に認識されるようになります。

SEOでは検索結果の表示順位には影響しないとされていますが、“リッチスニペット”が表示されることでユーザーの目を引きやすくなるため、“構造化データ”のマークアップが重要視されています。

“構造化データ”はコンピューターが使用するためのものなので人間のユーザー向けのウェブページの表示のされ方には影響しません。

“マイクロデータ”とは?

構造化データ”をマークアップするための“シンタックス”は主に以下の3つが使用されています。

microdata
HTMLの要素に直接“構造化データ”をマークアップします。HTMLで定義された属性を使用します。
RDFa
HTMLの要素に直接“構造化データ”をマークアップします。記述の仕方は“microdata”に似ていますが、RDFaで定義された属性を使用します。
JSON-LD
script”要素の中に“JSON(JavaScript Object Notation)”形式で記述します。“microdata”や“RDFa”とは異なり、コンテンツと構造化データを別々に記述します。

このうちの一つが“Microdata”で、この“シンタックス”によってマークアップして示されるメタデータのことも“マイクロデータ(Microdata)”と呼びます。

“Microdata”によるマークアップは現在のところWHATWGによる“HTML Living Standard”でのみ定義されています。W3CによるHTML5の仕様書ではHTML5.2の時点では採用されていません。

マイクロデータのサンプル

以下はマイクロデータをマークアップしたサンプルコードです。

<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="name">
<span itemprop="familyName">清原</span><span itemprop="givenName">諾子</span>
</span>
であったと言われますが諸説あります。清少納言は<span itemprop="colleague">紫式部</span>とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</span>
</p>

<blockquote itemprop="text">
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
</div>

マイクロデータ属性の一覧

以下はマイクロデータをマークアップするための属性の一覧です。グローバル属性であり、すべての要素に対して指定することができます。

属性
属性 説明 説明
itemid=""HTML Living Standardで定義 要素の内容のマイクロデータのグローバルな識別子を示す URI 要素の内容のマイクロデータのグローバルな識別子
itemprop=""HTML Living Standardで定義 要素の内容のマイクロデータのプロパティ名を指定する プロパティ名 itemtype”属性で指定された定義に基づくプロパティ名
itemref=""HTML Living Standardで定義 要素の外にあるマイクロデータと関連付ける ID名 関連付けるマイクロデータを含む要素のid”属性の値
itemscope=""HTML Living Standardで定義 要素の内容にマイクロデータが含まれることを示す itemscope 要素の内容にマイクロデータが含まれることを示す
itemtype=""HTML Living Standardで定義 要素の内容のマイクロデータのプロパティ名の定義を示す URL 要素の内容のマイクロデータのプロパティ名の定義

仕様書

HTML Living Standardで新たに導入された定義です。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
itemid=""
定義なし

定義なし

定義なし

定義なし

定義あり
itemprop=""
定義なし

定義なし

定義なし

定義なし

定義あり
itemref=""
定義なし

定義なし

定義なし

定義なし

定義あり
itemscope=""
定義なし

定義なし

定義なし

定義なし

定義あり
itemtype=""
定義なし

定義なし

定義なし

定義なし

定義あり

マークアップする

マークアップの方法

はじめに

前述した属性を使用して文章に含まれるマイクロデータをマークアップしていきます。

以下の文章を例に説明していきます。

<p>
下に書かれている文章は<time datetime="1001">長保3年</time>に平安京で書かれたとされる“枕草子”という随筆の一節です。 “枕草子”は清少納言という平安時代の女流歌人により執筆されました。“清少納言”はペンネームのようなもので本当の名前は清原諾子であったと言われますが諸説あります。清少納言は紫式部とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</p>
<blockquote>
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>

アイテムを生成する

マイクロデータを記述するにはitemscope”属性が必要です。itemscope”属性はアイテムを生成し、アイテムの中はある物事についての情報であるということが示されます。

itemscope”属性を指定すること以外に特別な意味はないのでここでは全体をdiv”要素で囲み、そこにitemscope”属性を指定します。

itemscope”属性を指定したdiv”要素は一つのアイテムになります。

<div itemscope>
<p>
下に書かれている文章は<time datetime="1001">長保3年</time>に平安京で書かれたとされる“枕草子”という随筆の一節です。 “枕草子”は清少納言という平安時代の女流歌人により執筆されました。“清少納言”はペンネームのようなもので本当の名前は清原諾子であったと言われますが諸説あります。清少納言は紫式部とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</p>
<blockquote>
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
</div>

次にアイテムのタイプを定義するためにitemtype”属性を指定します。

この例ではとある創作物についての情報が書かれたアイテムなので、“schema.org”から“http://schema.org/CreativeWork”を選んでitemtype”属性で指定します。

<div itemscope itemtype="http://schema.org/CreativeWork">
<p>
下に書かれている文章は<time datetime="1001">長保3年</time>に平安京で書かれたとされる“枕草子”という随筆の一節です。 “枕草子”は清少納言という平安時代の女流歌人により執筆されました。“清少納言”はペンネームのようなもので本当の名前は清原諾子であったと言われますが諸説あります。清少納言は紫式部とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</p>
<blockquote>
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
</div>

マイクロデータをマークアップする

itemtype”属性で指定した定義に基づいてマイクロデータをマークアップしていきます。

例えば“枕草子”は題名、つまりこの創作物の名前なのでitemprop”属性で名前を示すプロパティ名の“name”を指定します。ここではitemprop”属性を指定する以外に特別な意味はないのでspan”要素でマイクロデータとなる部分を囲み、itemprop”属性を指定します。

<div itemscope itemtype="http://schema.org/CreativeWork">
<p>
下に書かれている文章は<time datetime="1001" itemprop="dateCreated">長保3年</time>に<span itemprop="locationCreated">平安京</span>で書かれたとされる“<span itemprop="name">枕草子</span>”という<span itemprop="genre">随筆</span>の一節です。“枕草子”は清少納言という平安時代の女流歌人により執筆されました。“清少納言”はペンネームのようなもので本当の名前は清原諾子であったと言われますが諸説あります。清少納言は紫式部とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</p>
...

ここで、“枕草子”の“著者”である“清少納言”について説明する文章があります。

...の一節です。“枕草子”は<span itemprop="author">清少納言</span>という平安時代の女流歌人により執筆されました。“清少納言”は...

以上のようにマークアップすることもできますが、ここではより詳しく“著者”の情報をマークアップしていきます。

最初にしたようにitemscope”属性を指定してアイテムを生成します。このアイテムにはitemprop”属性で“author”を指定しているのでこのアイテムは“著者”についての情報であることを示します。

<div itemscope itemtype="http://schema.org/CreativeWork">
<p>
下に書かれている文章は<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>
</p>
...

このアイテムの中も同様にitemprop”属性を使用してマークアップしていくのですが、先ほどまでと異なるのはこのアイテムのitemtype”属性には“http://schema.org/Person”が指定されているので、これに基づいたプロパティ名を指定しなければいけないということです。

<div itemscope itemtype="http://schema.org/CreativeWork">
<p>
下に書かれている文章は<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="name">清原諾子</span>であったと言われますが諸説あります。清少納言は<span itemprop="colleague">紫式部</span>とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</span>
</p>
...

また、以下のように“名前”をマークアップしましたが、より細かくマークアップすることもできます。

...により執筆されました。“清少納言”はペンネームのようなもので本当の名前は<span itemprop="name">清原諾子</span>であったと言われますが諸説あります。清少納言は...

以下の例では“名前”のうちどの部分が“苗字”でどの部分が“下の名”であるかをマークアップして示しています。

...により執筆されました。“清少納言”はペンネームのようなもので本当の名前は
<span itemprop="name">
<span itemprop="familyName">清原</span><span itemprop="givenName">諾子</span>
</span>
であったと言われますが諸説あります。清少納言は...

最後に、blockquote”要素itemprop”属性を指定します。このblockquote”要素は“著者”の情報を示すアイテムの外にあるのでitemtype="http://schema.org/CreativeWork"に基づいたプロパティ名を指定します。

...
<span itemscope itemprop="author" itemtype="http://schema.org/Person">
“枕草子”は<span itemprop="name">清少納言</span>という平安時代の<span itemprop="jobTitle">女流歌人</span>により執筆されました。“清少納言”はペンネームのようなもので本当の名前は<span itemprop="name">清原諾子</span>であったと言われますが諸説あります。清少納言は<span itemprop="colleague">紫式部</span>とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</span>
</p>
<blockquote itemprop="text">
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
</div>

マークアップし終えたコード

マイクロデータをマークアップした文章は以下のようになります。

<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="name">
<span itemprop="familyName">清原</span><span itemprop="givenName">諾子</span>
</span>
であったと言われますが諸説あります。清少納言は<span itemprop="colleague">紫式部</span>とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</span>
</p>

<blockquote itemprop="text">
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
</div>

マークアップの検証

マイクロデータのマークアップが正しくできているかはGoogleが提供する“構造化データ テストツール”で検証することができます。

“構造化データ テストツール”での検証結果

正しく“構造化データ”をマークアップできていないとマークアップした意味がなくなってしまいますので、マークアップした後は“構造化データ”が正しく認識されているか必ず検証しましょう。

HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク