Sep. 2nd,2018
マイクロデータ
“構造化データ”とは？
“構造化データ(structured-data)”とはウェブページ上にあるコンテンツにメタデータを与え、ブラウザや検索エンジン、検索クローラーなどのコンピューターがウェブページのコンテンツを認識しやすくするためのマークアップのことです。このマークアップにより、例えば、ある創作物について書いてある文章で「この部分は著者」「この部分は編集者」「この部分は出版者」や「この部分は最初に出版された日付」「この部分は編集された日付」などと細かく示すことができるので検索エンジンにウェブページのコンテンツの意味がより明確に検索エンジンに伝わり、より適切に認識されるようになります。
SEOでは検索結果の表示順位には影響しないとされていますが、“リッチスニペット”が表示されることでユーザーの目を引きやすくなるため、“構造化データ”のマークアップが重要視されています。
“構造化データ”はコンピューターが使用するためのものなので人間のユーザー向けのウェブページの表示のされ方には影響しません。
“マイクロデータ”とは？
“構造化データ”をマークアップするための“シンタックス”は主に以下の3つが使用されています。
- Microdata
- HTMLの要素に直接“構造化データ”をマークアップします。HTMLの標準規格である“HTML Living Standard”で定義された属性を使用します。
- RDFa
- HTMLの要素に直接“構造化データ”をマークアップします。記述の仕方は“microdata”に似ていますが、RDFaで定義された属性を使用します。
- JSON-LD
- “script”要素の中に“JSON(JavaScript Object Notation)”形式で記述します。“microdata”や“RDFa”とは異なり、コンテンツと構造化データを別々に記述します。
このうちの一つが“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="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="" |
要素の内容のマイクロデータのグローバルな識別子を示す | URI | 要素の内容のマイクロデータのグローバルな識別子 |
| itemprop="" |
要素の内容のマイクロデータのプロパティ名を指定する | プロパティ名 | “itemtype”属性で指定された定義に基づくプロパティ名 |
| itemref="" |
要素の外にあるマイクロデータと関連付ける | ID名 | 関連付けるマイクロデータを含む要素の“id”属性の値 |
| itemscope="" |
要素の内容にマイクロデータが含まれることを示す | itemscope | 要素の内容にマイクロデータが含まれることを示す |
| itemtype="" |
要素の内容のマイクロデータのプロパティ名の定義を示す | URL | 要素の内容のマイクロデータのプロパティ名の定義 |
マークアップする
マークアップの方法
はじめに
前述した属性を使用して文章に含まれるマイクロデータをマークアップしていきます。
以下の文章を例に説明していきます。
<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://
<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://
<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://
...
<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>
