Baldanders.info

HTML5 とメタデータ

今回は覚え書きのみでお送ります。 イマイチ理解してない気がするので,おかしいところは遠慮なくツッコんで下さい。

Atom feed と ccREL

Atom feed は XML なので ccREL を使って著作権情報を入れることは可能。

まず ccREL の名前空間を追加する。

<feed xmlns="http://www.w3.org/2005/Atom" xmlns:cc="http://web.resource.org/cc/">

これで <feed> 要素,またはその子要素の <entry> 要素内に cc:license, cc:morePermissions 等の記述を追加すればいいだけ。

<link rel="cc:license" type="application/rdf+xml" href="http://creativecommons.org/licenses/by/4.0/rdf" />
<link rel="cc:morePermissions" type="text/html" href="http://www.baldanders.info/cc-license.shtml#morePermissions" />

この例では cc-license の Commos Deed ではなく RDF/XML に直接リンクしている。 これでいいらしい。 タイトル,著者,日付情報については Atom の property でまかなえる。

cc:license, cc:morePermissions, cc:useGuidelines といった property については拙文の ccREL の節を参照のこと。

head 要素内の標準的なメタ情報

HTML5 の <head> 要素内には <meta> 要素や <link> 要素などでメタデータを記述できる。 値がリテラルの場合は <meta> 要素を, URL 等のリソースの場合には <link> 要素を使う。

<link> は void 要素で有効な属性は(グローバル属性以外では)以下のとおり。

  • href
  • crossorigin
  • rel (MUST)
  • media
  • hreflang
  • type
  • sizes (for rel="icon" property)
  • title

メタデータは rel-href のセットで記述される。 rel 属性にセットする標準のタイプは以下のとおり。

  • author
  • help
  • icon
  • license
  • next
  • prefetch
  • prev
  • search
  • stylesheet

iconprefetch 以外は href 要素にハイパーリンクを指定する。 bookmark, nofollow, noreferrer, tag<link> 要素では使用できない。

tag<a> 要素等では使えるとあり,確かに HTML5 validator では問題ないが RDFa Validator ではガッツリ怒られる(nofollow は怒られないのに)。この場合は xhv: 接頭辞をつけるとよい。でもこれで parser が正しく認識してくれるかは不明)

<meta> は void 要素で, <title>, <base>, <link>, <style>, <script> 要素で表現できない情報を記述する。 有効な属性は(グローバル属性以外では)以下のとおり。

  • charset
  • content
  • http-equiv
  • name

ひとつの要素内では name, http-equiv, charset 属性のうちひとつのみを記述する(グローバル属性を含め property 名を指示する属性は要素内にひとつしか記述できないようだ)。

http-equiv 属性の content-typecharset 属性で代替できるため HTML5 では不要。また content-language もグローバル属性の lang で代替できるため,同様に不要)

name-content のセットでメタデータを記述する際の標準メタデータ名は以下のとおり(なのでこれらのメタデータを <head> 要素で指示する場合はなるべく標準の名前を使うべき?)。

  • author
  • description
  • generator
  • keywords

参考:

Microdata の基本知識

Microdata で利用可能な属性は以下のとおり。

  • itemscope
  • itemtype
  • itemid
  • itemprop
  • itemref

これらはグローバル属性として扱われる。 基本的には itemscope 属性を指定した要素で囲まれた部分で itemprop 属性を使ってメタデータを記述していく。

<div itemscope itemtype="http://schema.org/Person">
  私の名前は <span itemprop="name">Spiegel</span> です。
</div>

itemscope 属性の範囲を item と呼ぶ。 item のタイプを itemtype 属性で記述し, item の内容を itemprop 属性で記述する。

item は入れ子にすることで構造化が可能。

<article itemscope itemtype="http://schema.org/Article">
  [...]
  <div itemprop="author" itemscope itemtype="http://schema.org/Person">
    Written by <span itemprop="name">Spiegel</span>.
  </div>
<article>

更に item 同士は id 属性(グローバル属性)と itemref 属性を使って連結できる。 これによりメタデータを構造化できる? かも? itemref 属性は id 属性(グローバル属性)で指定した先の情報を include する。

<div itemscope itemtype="http://schema.org/Person" itemref="link">
  私の名前は <span itemprop="name">Spiegel</span> です。
</div>
[...]
<div id="link">
  続きは <a href="http://www.baldanders.info/spiegel/profile/" itemprop="url">Web</a> で。
</div>

この例では, itemprop="url" で指定した情報が元の item に組み込まれる。 itemref 属性には複数の ID を指定できるらしい?

id-itemref 連携はページ内でしかできない(URI ではないため)。 外部のリソースを指示するには itemid を使う(らしいのだが使い方がいまいち分からない。 URN を使った例示はあるが,一般的な URI が使えるのかどうか明示されてない)。

また Microdata の属性はグローバルなので <link> 要素や <meta> 要素でも使える。 この場合 <link> 要素や <meta> 要素は <body> 要素内でも使用可能となり,しかも flow content かつ phrasing content として機能するらしい(あまり smart じゃない気がするなぁ)?

Microdata の Validator のようなものはない模様。 その代わり Google が Google Structured Data Testing Tool というサービスを行っていて,これである程度は分かるかもしれない。

参考: