WWW Watch

meta 要素に対する Microdata の指定

meta 要素に対する Microdata の指定について、過去に書いた記事に間違いがあったので修正とその解説。また、itemprop 属性もつ meta 要素や link 要素の body 要素内での使い方に関しても解説してみます。

HTML5もうちょっと早く書こうと思ったんですけどこんなに間が空くとは……

去年の末、HTML5 Advent Calendar 2012 の記事として、「Microdata を使ってみよう。サンプルソースで学ぶ Microdata」 を書いたんですが、その中で 2箇所ほどサンプルソースに間違いがあるのをご指摘頂いて修正したんですね (ご指摘感謝です)。

そのうち、1つの間違いは単純な記述抜けというか、ミスだったんで置いといて、もう1つ、私が meta 要素に対して itemprop 属性を指定したサンプルで、同じ要素に name 属性をあわせて指定してたのをご指摘頂きました。

それに関しては完全に私の勘違いだったんで修正したんですが、その時に改めて仕様書の方を再確認して気がついた点もあるので共有しようと思います。

問題のサンプル

ご指摘頂いて修正する前のサンプルは元々下記のようになっていました。

<!DOCTYPE html>
<html lang="ja" itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
 <meta charset="utf-8" />
 <title itemprop="name">文書のタイトル</title>
 <meta itemprop="description" name="description" content="文書の概要テキスト" />
 <link itemprop="author" href="http://example.com/aboutme/" />
</head>

問題の箇所を抜き出すと、

<meta itemprop="description" name="description" content="文書の概要テキスト" />

つまり、name="description" が指定された meta 要素に対して、そのまま単純に itemprop="description" を付与してたんですね。

結論から言えば、これ間違いです。以下、言い訳と共に解説です。

実はそれが間違いだって一応知ってました

いや知ってたし(震え声)… っていう負け惜しみ的な話じゃなくてですね……

Microdata が別仕様として分離される前の HTML5 W3C Working Draft では、meta 要素の項目にはっきりと下記のように書かれています。

Exactly one of the name, http-equiv, charset, and itemprop attributes must be specified.

4.2.5 The meta element : HTML5 W3C Working Draft 25 August 2009 から引用

「meta 要素には、name、http-equiv、charset、itemprop 属性のどれか1つしか指定できませんよ (Must : 必須)」ってことですね。つまり、上記の間違っていたサンプルのように、name 属性と、itemprop 属性を同時に指定したりしたらダメよってことです。

で、そこまでは知ってました。そのあと Microdata が HTML5 から分離されて、別仕様として Working Draft (HTML Microdata : W3C Working Draft 4 March 2010) が公開されたとき、同日公開された HTML5 仕様の meta 要素の項目から、上記 itemprop 属性の件は当然ですが (itemprop 属性の話とかは全部 Microdata 仕様の方に移ったわけなので) 消えますよね。

If either name or http-equiv is specified, then the content attribute must also be specified. Otherwise, it must be omitted.

4.2.5 The meta element : HTML5 W3C Working Draft 4 March 2010 から引用

このように消えました。

ここで Microdata 仕様の方にこの辺の記述は引き継がれたんだろうなってところまでは想像ついたんですが、ここで間違ったのが、itemprop 属性の項目しかよく見なかったことなんですよね。ところがそこには meta 要素における itemprop 属性の制約について特に書かれていなかったんで、「あれ、特に制約はなくなったのかな~」 って思っちゃったのが今回の間違いの発端。

meta name="description" に itemprop="description" つけられれば便利だし直感的だし、そういうことも考慮されたのかな~とか呑気に思ってその思い込みのまま最初に書いたとおりサンプルを書いたんで見事に間違いましたと。あぁお恥ずかしい限りです。

仕様書読み直したら書いてあったの巻

ご指摘を受けて、あら、やっぱどこかに書いてあったのかなと思って仕様を読み直したんですけど、ガッツリ書いてありました…

If a meta element has an itemprop attribute, the name, http-equiv, and charset attributes must be omitted, and the content attribute must be present.

7 Other changes to HTML5 : HTML Microdata から引用

「もし、meta 要素が itemprop 属性を持つ時、name、http-equiv、charset 属性は省略されなければなりません」 ということです。

ちなみに WHATWG の方の仕様書での該当箇所は下記ですが、

こちらは Microdata が分離されたりしていないため、meta 要素に、itemprop 属性と name 属性を同時に指定することができない旨の記述はずっと変わっていませんでしたということで、こっち見とけばよかった…… で、元記事のサンプルソースを修正した次第。皆さんも使用する場合には気を付けましょう。

以上、言い訳でした。

ちなみに、Microdata の仕様書の方、「meta 要素に itemprop 属性と、name、http-equiv、charset 属性の同時指定禁止」 って書いてあるのと同じ場所に itemprop 属性を持つ link 要素についても触れられていますが、

If a link element has an itemprop attribute, the rel attribute may be omitted.

7 Other changes to HTML5 : HTML Microdata から引用

ということで、こちらは 「link 要素が itemprop 属性を持つ場合、rel 属性は省略することができます (May : 可能)」 という書き方ですので、一応同時に指定しても問題はないですが、itemprop 属性と rel 属性の値が異なる意味を示していた場合 (超極端な例ですけど、rel="stylesheet" itemprop="author" とか) におかしいことになるので注意して使いましょう。

おまけ。itemprop が付いた meta や link 要素は body 要素内でも使えるよ

通常、meta 要素と link 要素は 「Metadata content (メタデータ・コンテンツ)」 ですので、簡単にいってしまえば head 要素内でしか使用できません。

しかし、2009年8月25日の HTML5 W3C Working Draft から、meta 要素、link 要素の項目に下記の記述が追加されています (引用は meta 要素の項目から)。

If the itemprop attribute is present: flow content.
If the itemprop attribute is present: phrasing content.

4.2.5 The meta element : HTML5 W3C Working Draft 25 August 2009 から引用

同じ事は Microdata の仕様の方にも書かれています。

If the itemprop attribute is present on link or meta, they are flow content and phrasing content. The link and meta elements may be used where phrasing content is expected if the itemprop attribute is present.

7 Other changes to HTML5 : HTML Microdata から引用

つまり、itemprop 属性を持った meta 要素 (link 要素) は、「Flow content (フロー・コンテンツ)」であり、同時に 「Phrasing content (フレージング・コンテンツ)」 ということなので、コンテンツモデルが Flow content の body 要素内で使えるということです。加えて、Phrasing content が期待される場所でも使えますので、大雑把に言っちゃえばほとんどの要素内で使えるってことですね。

ということでこんな感じに、meta 要素、link 要素を使って、記事に Microdata を付与したりなんてこともできますね。

<article itemscope="itemscope" itemtype="http://schema.org/Article">
 <meta itemprop="description" content="記事の概要" />
 <link itemprop="author" href="http://example.com/aboutme/" />
 <header>
  <h1 itemprop="name"><a itemprop="url" href="/path_of_article.html">記事のタイトル</a></h1>
 </header>
…略…
</article>

Microdata 付与のために、無理に段落や見出しを文書内に加えたりなんてことはしなくていいわけです。覚えとくといいですよ。

参考エントリー

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー