PAGETOP

構造化データでSEO強化!schema.orgボキャブラリをmicrodataでマークアップする方法

2016年4月6日

構造化データでSEO強化!schema.orgボキャブラリをmicrodataでマークアップする方法

今回は、構造化データをHTMLに追加するため、schema.orgボキャブラリをmicrodataフォーマットに従って記述する方法をご紹介します。

前回もお伝えした通り、構造化データはページ内のテキストがどんな意味を持つのかをタグを用いて明示し、コンピューターに伝える方法です。
例えば、次のような文章があったとします。

「
『砂の器』は、1974年に公開された日本映画。<br>
原作は松本清張、監督は野村芳太郎です。
」

通常通りマークアップすると

<div>
<p>『砂の器』は、1974年に公開された日本映画。<br>
原作は松本清張、監督は野村芳太郎です。</p>
</div>

となります。
これを、schema.orgのボキャブラリを使用して、microdataでマークアップしてみましょう。

①itemscopeを入れる

divに構造化データをマークアップしているということを、「itemscope」属性で宣言します。値は必要ありません。

<div itemscope>
<p>『砂の器』は、1974年に公開された日本映画。<br>
原作は松本清張、監督は野村芳太郎です。</p>
</div>

②itemtypeを指定

どのような項目についての記述なのかをURLで指定します。
ここではhttp://schema.org/Movieという値を指定し、映画に関する情報であることを明示しています。

<div itemscope itemtype="http://schema.org/Movie">
<p>『砂の器』は1974年に公開された日本映画。<br>
原作は松本清張、監督は野村芳太郎です。</p>
</div>

itemtypeの主な値

Creativeworks
本、映画、音楽、テレビ、レシピなどクリエイティブな作品

Embedded non-text objects
音楽、画像、動画などの埋め込みオブジェクト

Event
イベント

Organization
組織

Person

Place, LocalBusiness, Restaurant …
Product, Offer, AggregateOffer
Review, AggregateRating

など。

全てのitemtypeはschema.orgのThingに記載されているので、ご参照下さい。

③itempropでさらに詳細を指定

それぞれの単語がどんな意味を持つのか、さらに詳細な情報を加えていきます。

<div itemscope itemtype="http://schema.org/Movie">
<p>『<span itemprop="name">砂の器</span>』は<span itemprop="datePublished">1974年</span>に公開された日本映画。<br>
原作は<span itemprop="author">松本清張</span>、監督は<span itemprop="drector">野村芳太郎</span>です。</p>
</div>

これで、映画の名前、公開された年、原作者、監督という4つのデータが構造化され、コンピューターに伝えられます。

入れ子構造

microdataは入れ子にすることができます。
例えば、先ほどの文章を少し変えてみます。

「
  映画評論家の山田太郎氏は、野村芳太郎監督の『砂の器』を星5つと評価しています。
  」

これをmicrodataでマークアップすると次のようになります。

<div itemscope itemtype="http://schema.org/Review">
映画評論家の<span itemprop="author">山田太郎</span>氏は、
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Movie">
<span itemprop="author">野村芳太郎</span>監督の『<span itemprop="name">砂の器</span>』を、星<span itemprop="ratingValue">5</span>つと評価しています。
</div>

ここでは、二つのitemtypeが入れ子構造になっていることが分かります。
全体が「評価」という一つのitemtype。
さらにその中に、評価対象である「映画」のitemtypeが含まれています。
この場合、入れ子の親・子の両方にitemscopeを宣言します。

評価基準をマークアップする

先ほどの例では、「星5つ」という評価にratingValueという値でマークアップしました。ratingValueは、特に何も指定がなければ、最高値を5、最低値を1として仮定します。
そのため、先ほどの「星5つ」は最高値として認識されます。
ですが、これが「85点」など、5段階評価ではなかった場合はどうなるでしょうか。
最高値と最低値が分からないため、85点という値にratingValueを追加しても正しく認識されない恐れがあります。
そこで、最高点と最低点を<meta>タグを用いて明示します。

砂の器を
<meta itemprop="bestRating" content="100">
<meta itemprop="worstRating" content="0">
<span itemprop="ratingValue">85</span>点と評価しました。

<meta>タグで示された部分は、コンピューターのみに伝える情報であり、ブラウザには表示されません。

itempropの値は、先にご紹介したitemtypeのリストThingからそれぞれのページに記載されています。ただ、その数は膨大で、今後も増えていくと予想されるため、よく使う値はチェックして覚えておくことをおすすめします。

パンくずのマークアップ問題

パンくずに構造化データを追加することで、検索結果に上のように表示させることができます。
ただ、長年schema.orgはパンくず表示に対応しておらず、現在でも、もう一つのボキャブラリである「data-vocabulary.org」を使用してマークアップされているページが多いようです。
しかし、Google Developersの構造化データ>Breadcrumbsのページには「note」として次のように記されています。

Schema.org markup for breadcrumbs is being finalized and will be preferred when ready.

W3Cのページでもschema.orgによるパンくずのマークアップ例が掲示されていることから、サポートされるのも時間の問題ではないでしょうか。
下記は、W3Cに掲載されているパンくずマークアップの例です。
(http://www.w3.org/wiki/WebSchemas/BreadcrumbsDesign1より転載)

<div itemscope itemtype="http://schema.org/WebPage">
<!--First chain-->
<div itemprop="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
<a itemprop="url" href="/category/books">
<span itemprop="name">Books</span>
</a>
<!--Second level of the first chain-->
<span itemprop="child" itemscope itemtype="http://schema.org/Breadcrumb">
<a itemprop="url" href="/category/books/classics">
<span itemprop="name">Boring classics</span>
</a>
</span>
</div>
<!--Second chain-->
<div itemprop="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
<a itemprop="url" href="/category/bicycles">
<span itemprop="name">Bicycles</span>
</a>
<!--Second level of the second chain-->
<span itemprop="child" itemscope itemtype="http://schema.org/Breadcrumb">
<!--Last element is not a hyperlink in html-->
<!--but it has a hyperlink in microdata markup-->
<span itemprop="name">For kids</span>
<link itemprop="url" href="/category/bicycles/three-wheeled"/> 
</span>
</div>
</div>

これからマークアップを始める方は、data-vocabulary.org ではなく、先行してschema.orgでの実装を行ってもいいかもしれませんね。

ここ数年の間にもschema.orgの取り組みはどんどん発展しており、今後もこまめにチェックしていく必要がありそうです。
次は、JSON-LDフォーマットを用いたマークアップ法をご紹介します。