HTML実験室

XHTML文書へのメタデータ埋め込み

はじめに

HTML文書やXHTML文書は人間がみる分にはそれなりに分かりやすいのですが、コンピュータにとって理解しやすいかというと、必ずしもそうとは言い難い面があるのは否めません。そこで、メタデータとしてプログラム的に分かりやすい形で情報を埋め込むことが必要になってきます。ここでは、サンプルとなるXHTML文書にメタデータを埋め込むやり方を試した結果を示します。

元になるXHTML文書

リンク先はメタデータを埋め込む前の、元になるサンプル文書です。何の変哲もない文書です。以下にコードを示します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/sample.css" type="text/css" />
    <title>メタデータの記述サンプル０</title>
  </head>
  <body>
    <header>
      <nav>
        <p>[<a href="./metadata.xhtml">戻る</a>]</p>
      </nav>
      <h1>メタデータの記述サンプル０</h1>
      <p>本ページはメタデータをHTML・XHTMLに組み込む前の状態です。以下は本文です。</p>
    </header>
    <article>
      <section>
        <h2>愛でられてしかるべきは陰暦九月十三日の月</h2>
        <p>中秋の名月などといって陰暦八月十五日の月が有難られているが、常々「ただ眩しいだけで月の模様も良く見えないし立体感と陰影に乏しいから面白くない、十四夜や十六夜の月の方が立体感があり模様も鮮やかに見えて良い。」と思っていた。</p>
        <p>実際天文写真を見ても、満月の写真は何だかのっぺりしている。その理由を考えてみた。満月では見えている月面は太陽と正対しており、正面から光が当たっている（トップライトの状態）のが良くないのだ。分かってみれば何てことのない話だ。理由が分かったので、これからは十五夜より十三夜、十四夜、十六夜の月の方が好きだ、と自信を持って言える。</p>
        <p>一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。</p>
      </section>
    </article>
      <footer>
        <ul>
          <li>メタデータの記述サンプル０</li>
          <li><time>2020-08-04</time></li>
          <li xml:lang="en">(c)K.Norimoto</li>
          <li>乗本　薫</li>
        </ul>
      </footer>
  </body>
</html>

head要素にRDF文書を埋め込み

XHTML文書はXML文書ですので、名前空間を宣言しておいて他のXML文書を埋め込むことが出来ます。RDF文書もXML文書なので、メタデータを記述したRDFをそのまま埋め込むことが考えられます。XHTML文書を既存の文書型に適合させ検証可能とすることを考えなければ、整形式にすることだけに注意すればよいと考えます。

問題はXHTML文書の何処にRDFを埋め込むかですが、body要素内だと内容が文字列として見えてしまう可能性があるので、違和感なく埋め込めるのはhead要素ということになります。リンク先はこうしてhead要素にRDF文書をそのまま埋め込んだサンプル文書です。以下はそのコードです。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:schema="http://schema.org/"
      xml:lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/sample.css" type="text/css" />
    <title>メタデータの記述サンプル１</title>
    <rdf:RDF>
      <rdf:Description rdf:about="">
        <schema:name>メタデータの記述サンプル１</schema:name>
        <schema:datePublished>2020-08-04</schema:datePublished>
        <schema:copyrightHolder xml:lang="en">(c)K.Norimoto</schema:copyrightHolder>
        <schema:author>乗本　薫</schema:author>
        <rdf:type rdf:resource="http://schema.org/WebPage"/>
        <schema:description>一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。</schema:description>
      </rdf:Description>
    </rdf:RDF>
  </head>
  <body>
    <header>
      <nav>
        <p>[<a href="./metadata.xhtml">戻る</a>]</p>
      </nav>
      <h1>メタデータの記述サンプル１</h1>
      <p>メタデータをHTML・XHTMLに組み込む方法として、本ページではRDFをXHTMLのHEAD要素に組み込みました。以下は本文です。</p>
    </header>
    <article>
      <section>
        <h2>愛でられてしかるべきは陰暦九月十三日の月</h2>
        <p>中秋の名月などといって陰暦八月十五日の月が有難られているが、常々「ただ眩しいだけで月の模様も良く見えないし立体感と陰影に乏しいから面白くない、十四夜や十六夜の月の方が立体感があり模様も鮮やかに見えて良い。」と思っていた。</p>
        <p>実際天文写真を見ても、満月の写真は何だかのっぺりしている。その理由を考えてみた。満月では見えている月面は太陽と正対しており、正面から光が当たっている（トップライトの状態）のが良くないのだ。分かってみれば何てことのない話だ。理由が分かったので、これからは十五夜より十三夜、十四夜、十六夜の月の方が好きだ、と自信を持って言える。</p>
        <p>一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。</p>
      </section>
    </article>
      <footer>
        <ul>
          <li>メタデータの記述サンプル１</li>
          <li><time>2020-08-04</time></li>
          <li xml:lang="en">(c)K.Norimoto</li>
          <li>乗本　薫</li>
        </ul>
      </footer>
  </body>
</html>

このXHTML文書をW3CのRDF validation serviceにかけるとvalidなRDF文書として認識され、図１のようなグラフが出力されました。既存の文書型に適合しない整形式のXML文書に過ぎず、XHTML文書としてはvalidとは言い切れないもののブラウザに通常通り表示でき、RDF文書としても使える文書になったと見做すことが出来ます。実験としては一応成功といえましょう。

RDFを埋め込んだXHTML文書から得られたグラフ１
図１　RDFを埋め込んだXHTML文書のグラフ１

XHTML文書で可視の要素にRDFを埋め込む

先の文書はRDFの埋め込みという点ではうまくいきましたが、本文中やフッターに表示されている内容をもう一度マークして埋め込んでいますので、冗長です。RDFとしてマークした部分をそのままXHTML文書として表示できれば、冗長な部分が生じず、効率が良いし整合性もとりやすいと思われます。

そこで、XHTML文書の本文中のp要素やフッター内にRDFを埋め込んでみました。該当部分がXHTML文書として表示出来てなおかつRDF文書として有効になれば実験成功です。実際やってみますと本文が表示はされますが、フッター要素の中のRDFにul要素なりbr要素を入れてしまうとグラフに余計なものが入ってしまいます。そこで、それらを除いて以下のようにマークアップしました。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:schema="http://schema.org/"
      xml:lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/sample.css" type="text/css" />
    <title>メタデータの記述サンプル２</title>
  </head>
  <body>
    <header>
      <nav>
        <p>[<a href="./metadata.xhtml">戻る</a>]</p>
      </nav>
      <h1>メタデータの記述サンプル２</h1>
      <p>メタデータをHTML・XHTMLに組み込む方法として、本ページではRDFを可視とするためにXHTMLのp要素、footer要素に組み込みました。以下は本文です。</p>
    </header>
    <article>
      <section>
        <h2>愛でられてしかるべきは陰暦九月十三日の月</h2>
        <p>中秋の名月などといって陰暦八月十五日の月が有難られているが、常々「ただ眩しいだけで月の模様も良く見えないし立体感と陰影に乏しいから面白くない、十四夜や十六夜の月の方が立体感があり模様も鮮やかに見えて良い。」と思っていた。</p>
        <p>実際天文写真を見ても、満月の写真は何だかのっぺりしている。その理由を考えてみた。満月では見えている月面は太陽と正対しており、正面から光が当たっている（トップライトの状態）のが良くないのだ。分かってみれば何てことのない話だ。理由が分かったので、これからは十五夜より十三夜、十四夜、十六夜の月の方が好きだ、と自信を持って言える。</p>
        <p>
          <rdf:RDF>
            <rdf:Description rdf:about="">
              <schema:description>
                一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。
              </schema:description>
            </rdf:Description>
          </rdf:RDF>
        </p>
      </section>
    </article>
    <footer class="rdf"><rdf:RDF><rdf:Description rdf:about="">
      <schema:name>メタデータの記述サンプル２</schema:name>
      <schema:datePublished>2020-08-04</schema:datePublished>
      <schema:copyrightHolder xml:lang="en">(c)K.Norimoto</schema:copyrightHolder>
      <schema:author>乗本　薫</schema:author>
      <rdf:type rdf:resource="http://schema.org/WebPage"/>
    </rdf:Description></rdf:RDF></footer>
  </body>
</html>

しかし、このままですとfooter要素の内容が改行のないベタなテキストとして表示されてしまいます。この問題を回避するために、footer要素にwhite-space: pre-lineを適用してソースの改行を生かすこととしましたところ、タグしかない行の改行まで反映されるためタグを改行せずに並べる箇所が出てしまうという問題が出ましたが、XHTML文書としてのブラウザ上の表示が違和感のないものとなりました。リンク先はその見本です。

このXHTML文書をW3CのRDF validation serviceにかけますとvalidなRDF文書として認識され、図２のようなグラフが出力されました。その一方で既存の文書型のXHTML文書としてはinvalidとなってしまいました（これは織り込み済み）が、この実験も一応成功と考えて良いでしょう。

RDFを埋め込んだXHTML文書から得られたグラフ２
図２　RDFを埋め込んだXHTML文書のグラフ２

RDFaを用いる

以上、XHTML文書に名前空間を用いて直接RDF文書を埋め込んでみました。XHTML文書の持つXML文書としての特性として、整形式である限り異なるXML文書と結合できる点があります。先の例はそれを生かした例でしたが、HTML文書やXHTML文書にRDFを埋め込むにはもっとスマートな方法があります。RDFaを用いるともっとスマートにXHTML文書にメタデータを埋め込むことが出来るはずです。リンク先は元のXHTML文書にRDFaを用いてメタデータを埋め込んだ例です。

以下にそのコードを示します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/sample.css" type="text/css" />
    <title>メタデータの記述サンプル３</title>
  </head>
  <body vocab="http://schema.org/" typeof="Webpage" about="">
    <header>
      <nav>
        <p>[<a href="./metadata.xhtml">戻る</a>]</p>
      </nav>
      <h1>メタデータの記述サンプル３</h1>
      <p>メタデータをHTML・XHTMLに組み込む方法として、本ページではRDFaを用いました。以下は本文です。</p>
    </header>
    <article>
      <section>
        <h2>愛でられてしかるべきは陰暦九月十三日の月</h2>
        <p>中秋の名月などといって陰暦八月十五日の月が有難られているが、常々「ただ眩しいだけで月の模様も良く見えないし立体感と陰影に乏しいから面白くない、十四夜や十六夜の月の方が立体感があり模様も鮮やかに見えて良い。」と思っていた。</p>
        <p>実際天文写真を見ても、満月の写真は何だかのっぺりしている。その理由を考えてみた。満月では見えている月面は太陽と正対しており、正面から光が当たっている（トップライトの状態）のが良くないのだ。分かってみれば何てことのない話だ。理由が分かったので、これからは十五夜より十三夜、十四夜、十六夜の月の方が好きだ、と自信を持って言える。</p>
        <p property="description">一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。</p>
      </section>
    </article>
      <footer>
        <ul>
          <li property="name">メタデータの記述サンプル３</li>
          <li><time property="datePublished">2020-08-04</time></li>
          <li property="copyrightHolder" xml:lang="en">(c)K.Norimoto</li>
          <li property="author">乗本　薫</li>
        </ul>
      </footer>
  </body>
</html>

元のXHTML文書の骨格を崩さずに済んでおり、再びDOCTYPE宣言も挿入出来るようになりました。この文書をW3CのRDFa 1.1 Distiller and Parserに通しますと、以下のようなRDF文書が取り出されて目的を達することが出来ます。

<?xml version="1.0" encoding="UTF-8"?>
<rdf:RDF
   xmlns:ns1="http://www.w3.org/ns/rdfa#"
   xmlns:ns2="http://schema.org/"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
  <rdf:Description rdf:about="https://www.mapleleaf.que.jp/test/sample3.xhtml">
    <ns1:usesVocabulary rdf:resource="http://schema.org/"/>
    <ns2:name xml:lang="ja">メタデータの記述サンプル３</ns2:name>
    <rdf:type rdf:resource="http://schema.org/Webpage"/>
    <ns2:description xml:lang="ja">一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。</ns2:description>
    <ns2:author xml:lang="ja">乗本　薫</ns2:author>
    <ns2:datePublished rdf:datatype="http://www.w3.org/2001/XMLSchema#date">2020-08-04</ns2:datePublished>
    <ns2:copyrightHolder xml:lang="en">(c)K.Norimoto</ns2:copyrightHolder>
  </rdf:Description>
</rdf:RDF>

このRDF文書からも図３に示す通り、今までと同じようなグラフを得ることが出来ます。やはり実験としては成功と言えましょう。

RDFaを埋め込んだXHTML文書から得られたグラフ
図３　RDFaを埋め込んだXHTML文書のグラフ

今までの方法に比べれば出来たXHTML文書がスマートなものになっており、XHTML文書の扱いそのものも今までと変わりません。また、about属性の扱いを除けばRDFa Lite 1.1の範疇に収まっているので、運用もmicrodataと同程度に易しいものとなっています。

microdataを用いる

ここまで来たら、microdataについても試してみることにします。リンク先はmicrodataによってメタデータを埋め込んだサンプルです。コードは以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/sample.css" type="text/css" />
    <title>メタデータの記述サンプル４</title>
  </head>
  <body itemscope="itemscope" itemtype="http://schema.org/WebSite">
    <header>
      <nav>
        <p>[<a href="./metadata.xhtml">戻る</a>]</p>
      </nav>
      <h1>メタデータの記述サンプル４</h1>
      <p>メタデータをHTML・XHTMLに組み込む方法として、本ページではmicrodataを用いました。以下は本文です。</p>
    </header>
    <article>
      <section>
        <h2>愛でられてしかるべきは陰暦九月十三日の月</h2>
        <p>中秋の名月などといって陰暦八月十五日の月が有難られているが、常々「ただ眩しいだけで月の模様も良く見えないし立体感と陰影に乏しいから面白くない、十四夜や十六夜の月の方が立体感があり模様も鮮やかに見えて良い。」と思っていた。</p>
        <p>実際天文写真を見ても、満月の写真は何だかのっぺりしている。その理由を考えてみた。満月では見えている月面は太陽と正対しており、正面から光が当たっている（トップライトの状態）のが良くないのだ。分かってみれば何てことのない話だ。理由が分かったので、これからは十五夜より十三夜、十四夜、十六夜の月の方が好きだ、と自信を持って言える。</p>
        <p itemprop="description">一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。</p>
      </section>
    </article>
      <footer>
        <ul>
          <li itemprop="name">メタデータの記述サンプル４</li>
          <li><time itemprop="datePublished">2020-08-04</time></li>
          <li itemprop="copyrightHolder" xml:lang="en">(c)K.Norimoto</li>
          <li itemprop="author">乗本　薫</li>
        </ul>
      </footer>
  </body>
</html>

microdataの場合もW3CのMicrodata to RDF Distillerで同様にRDF文書やTurtle、JSON-LDを取り出すことが出来ます。JSON-LDとして抽出されたコードを以下に示します。

[
  {
    "@id": "_:Nbd488fd7252643b4996fa4494fb212ee",
    "@type": [
      "http://schema.org/WebSite"
    ],
    "http://schema.org/author": [
      {
        "@value": "乗本　薫"
      }
    ],
    "http://schema.org/copyrightHolder": [
      {
        "@value": "(c)K.Norimoto"
      }
    ],
    "http://schema.org/datePublished": [
      {
        "@value": "2020-08-04"
      }
    ],
    "http://schema.org/description": [
      {
        "@value": "一番愛でられてしかるべきは陰暦九月十三日の月ではないだろうか。この頃の方が晴れる確率が高いし、秋も深まって好きな季節である。供物も陰暦八月十五日は「芋名月」、陰暦九月十三日は「豆名月」もしくは「栗名月」。里芋より栗のほうが良いに決まっている。"
      }
    ],
    "http://schema.org/name": [
      {
        "@value": "メタデータの記述サンプル４"
      }
    ]
  }
]

JSON-LDがGoogleの一押しとのことですが、第一印象は何となくスクリプトっぽくって使いにくそうな印象を持ちました。どちらかというとmicrodataの方が使いやすい感じです。単に慣れの問題かもしれませんが。あと、JSON-LDはスクリプトとして別の場所に書いておく使い方をするのだそうで、そうすると冗長性と整合性の問題が出そうです。

終わりに

最後に、実験に用いたXHTML文書とHTML文書へのリンクをまとめて示します。リンク先のXHTML文書はソースはともかく、見栄えはほとんど変わりません（そうでないと困るのですが……）。