Microdata + schema.org を実際に使ってみる

schema.org は Google、Microsoft (Bing)、Yahoo! という Web 検索の大手 3 社が共同で取り組んでいる試みで、より構造化されたマークアップのための共有の語彙集 (vocabulary) を提供しようというものです。この schema.org の語彙を利用して、実際のマークアップに Microdata を追加する具体例をいくつか考えてみました。

schema.org の アイテム型 (item type) は 階層 (hierarchy) のかたちで定義されています。型ごとに独自の プロパティ が定義され、上位の型のプロパティは下位の型に引き継がれます。最上位は Thing という汎用の型で、name、url、image、description というもっとも基本的なプロパティが定義されています。そしてその下に CreativeWork、Event、Intangible、Organization、Person、Place、Product、といった型があり、そこからそれぞれさらに詳細な型に分岐しています。schema.org を利用するには、まずこの 型階層のツリー図 からアイテムにふさわしい型を見つけます。

例 #1: 企業情報

最初に、いわゆる企業サイトであればほぼ必ず用意される、社名、住所、電話番号などを記した「企業情報」のコンテンツを考えてみます。サンプルとして Google の会社情報 のマークアップを使わせてもらいました (一部記述を省略しています):

<div>
    <b>グーグル株式会社</b><br>
    〒106-6126<br>
    東京都港区六本木 6 丁目 10 番 1 号<br>
    六本木ヒルズ森タワー 私書箱 22 号<br>
    TEL: 03-6384-9000<br>
    FAX: 03-6384-9001
</div>

企業情報で使えそうな型を schema.org で探すと、Organization 型 の派生である Corporation 型 がよさそうです。これをマークアップに組み込んでみます:

<div itemscope itemtype="http://schema.org/Corporation">
    <b itemprop="name">グーグル株式会社</b><br>
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        〒<span itemprop="postalCode">106-6126</span><br>
        <span itemprop="addressRegion">東京都</span>
        <span itemprop="addressLocality">港区</span>
        <span itemprop="streetAddress">六本木 6 丁目 10 番 1 号<br>
            六本木ヒルズ森タワー</span>
        私書箱 <span itemprop="postOfficeBoxNumber">22</span> 号
    </span><br>
    TEL: <span itemprop="telephone">03-6384-9000</span><br>
    FAX: <span itemprop="faxNumber">03-6384-9001</span>
</div>

まず itemscope 属性でアイテムを定義し、同要素の itemtype 属性で schema.org の URL を指定してアイテムの型とします。そしてデータとして表現したい項目ごとに itemprop 属性を持つ要素でマークアップしてプロパティとします。

name、telephone、faxNumber の各プロパティはそれぞれ要素の内容がそのまま値になっており、とくに難しいことはないと思います。少しややこしいのが address プロパティで、itemprop 属性を持った要素が同時に itemscope 属性を持っており、アイテムが入れ子になっています。

住所を表現する PostalAddress 型 の各プロパティを日本の住所表記に当てはめるのにやや迷うところですが、だいたいこんな感じになると思います:

addressCountry
国
postalCode
郵便番号
addressRegion
都道府県
addressLocality
市区町村
streetAddress
市区町村以降 (町・字・地番・住居表示・方書)
postOfficeBoxNumber
私書箱番号

そのほか、企業情報で使う機会の多そうなプロパティとしては、description、url、email、foundingDate といったところでしょうか。

例 #2: ブログ記事

ブログの個別記事のための型として BlogPosting 型 が用意されています:

<article itemscope itemtype="http://schema.org/BlogPosting" itemref="copyright">
    <header>
        <time pubdate datetime="2011-08-30" itemprop="datePublished">
            August 30, 2011
        </time>
        <h1 itemprop="name">
            <a href="/blog/microdata-schema-org.html" itemprop="url">
                Microdata + schema.org
            </a>
        </h1>
        <p>
            Tag(s):
            <span itemprop="keywords">
                <a href="/tag/markup">markup</a>,
                <a href="/tag/semanticweb">semanticweb</a>
            </span>
        </p>
    </header>
    <div itemprop="articleBody">
        <!-- content goes here -->
    </div>
</article>

...

<footer>
    <p id="copyright">
        &#169; 2008–2011
        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <a href="/about/" rel="author" itemprop="url">
                <b itemprop="name">Takeru Suzuki</b>
            </a>
        </span>,
        licensed under a <a href="http://creativecommons.org/licenses/by/2.1/jp/" rel="license">Creative Commons Attribution 2.1 Japan</a>.
    </p>
</footer>

アイテム (article 要素) の itemref 属性に注目してください。itemref 属性でドキュメント内の ID を指定した場合、その要素をアイテムのデータとして追加することができます。この場合、アイテム内にはない著者情報 (itemprop="author") をスコープ外の要素 (#copyright) から取得しています。このように itemref 属性によってマークアップ構造に縛られない柔軟なデータ表現が可能で、たとえば複数のアイテムから同一のプロパティを参照するような場合などに便利です。

また、itemprop が指定された要素のほとんどはその内容 (textContent) がプロパティの値になりますが、一部の要素は異なる点にも注意が必要です (HTML Microdata - 2.4 Values)。この例では、a 要素は href 属性、time 要素は datetime がそれぞれのプロパティの値となります。

参考

最後に、Microdata と schema.org を知る上で参考になるリソースをいくつか挙げておきます: