Googleリッチスニペット対策！初心者向けにスキーマ(Schema.org)のマークアップ方法を徹底的に教えるよ！

• 2014.01.01(Wed) 10:00
• WEB制作

Googleの検索結果を彩ってよりユーザーライクに。コンピュータとの対話を可能にするマークアップ記法、「スキーマ(schema.org)」を、初心者向けに解説していきます。

1スキーマ(schema.org)とは？

まず最初に浮かぶ疑問が「スキーマ(schema.org)って何なのよ？」だと思います。スキーマとは何でしょうか…。ざっくりと分かりやすく表現するなら、検索エンジン(コンピュータ)に”より詳しく”情報を伝えられる「記法」といったところでしょうか。

1-1検索エンジンに「より詳しく」情報を伝える

さて、「より詳しく」とはどういうことか。例えば、検索エンジン(コンピュータ)とはGoogleのことを想定しましょう。今後はGoogleで統一します。次の文章がブログに書いてあるとします。

これをGoogleがクロールして読み取っても、「日本語で書いてあること」「”竹ノ塚”、”ラーメン”、”85点”といったキーワードが含まれていること」、こういった程度にしか理解できないはずです。

実際にはもっと優秀なアルゴリズムで理解しているのでしょうが、高は知れます。竹林を探したくて「竹」とキーワード検索した人に、「”竹”ノ塚」を表示させたり、「不動(店名)」は「動かない」という意味で解釈するかもしれません。

スキーマ(schema.org)を使えば、ほぼ100%、意味を伝えることができる

一方このように、まるで人間との会話のように、Googleに情報の意味を細かく伝えることを可能にするのが、これから学ぶ「スキーマ(schema.org)」なんです。「コンピュータに意思が通じる」なんて素晴らしいですねー。

1-2コンピュータに意思が伝わると、何が起こるか？

Googleに「より詳しく」意味を伝えることができるとどうなるのか。これはもう言わなくても分かると思いますが、まず検索機能がグンと向上します。ユーザーが求めているものを、今よりもずっと適切に検索結果に表示できるようになるでしょう。

見かけたことがあると思いますが、Googleの検索結果で例えばこのように★マークが表示されるのも、「この記事はこのラーメンを5点満点中5点だと評価してるよ」という情報、意思が、Googleに正確に伝わっているからなんです。

いくら文章中に「このラーメン5点だ！満点だ！★★★★★だ！」とテキストで書いたところで、Googleは認識してくれません。「Googleに意思を伝えること」の重要性が分かると思います。

1-3Googleを始め、大手検索エンジンが普及に向けて働きかけている

schema.org（英語）は、検索エンジン大手の Google、Microsoft、Yahoo! がウェブの改善を目的として共同で進めている、構造化データ マークアップの共通仕様を策定する取り組みです。オンページ マークアップにより、検索エンジンはウェブページ上の情報を認識し、より有用な検索結果を提供できます。共通のマークアップ ボキャブラリを使用することで、ウェブマスターは容易にマークアップ スキーマを決定でき、労力に対して最大限の効果を上げることができます。

schema.org に関するよくある質問より引用

現在は検索結果に★を表示させたり、パンクズリストを反映させたり、といった検索結果を豪華にする(=リッチスニペット)程度のレベルでしか活用されていませんが、将来、普及が進めば検索順位に強い影響を与えるなど、「スキーマによるGoogleへの情報伝達」を活用している人・いない人の差が顕著になってくるんじゃないでしょうか。

そうでなくても「コンピュータに正確に意思を伝えられる」なんて夢みたいな話なので、積極的に活用していきたいところですね。

1-4現在は「スキーマ(schema.org)」でなく「Data-Vocabulary.org」が主流？

もう少しだけ、お付き合い下さい。説明の便宜上、ここまで言及を避けてきたのですが、Googleに情報を伝えるための記法、「スキーマ」は比較的新しくできたものです。今、Googleに情報を伝達するために用いられている主流は、まだ「Data-Vocabulary.org」と言えるかもしれません。

パンクズのマークアップを認識してくれない！

その代表的な例として、2013.12.30現在、Googleはパンクズリストを「Data-Vocabulary.org」の記法で書いたものしか認識してくれません。「スキーマ」の記法で書いても、上記図のようにリッチスニペットとして反映されることがありません。これでは「Data-Vocabulary.org」の方を使いたくなりますよね。

説明ページに「スキーマ」の記法が掲載されていない！

そしてGoogleのチュートリアルページ。リッチ スニペットと構造化データについてという解説ページがあるのですが、ここで説明されている記法は上記の図の通り、「Data-Vocabulary.org」の方だけなんです。

「スキーマ」のことは、一部分にちょこっと「これからはスキーマで対応していくよ」としか書かれていません。こんな例を見ると、「スキーマを普及させると言っておきながら、放置状態で本当に大丈夫なの？スキーマを学ぶ労力が無駄になりそうで怖い」という考えになってしまいますよね。

1-5「スキーマ(schema.org)」は確実に普及する…はず…

「スキーマ」が本当に普及するのか怪しいところなんですが、1つ安心できる情報として、現在主流とも言える「Data-Vocabulary.org」ですが、このウェブサイトにアクセスしてみて下さい。

「Data-Vocabulary.org」は終了している

こんな感じでサービスが終了していて、「スキーマ(schema)に引き継いだよ」というメッセージが表示されています。

Since June 2011, several major search engines have been collaborating on a new common data vocabulary called schema.org.

The schema.org vocabulary can be used with both Microdata or RDFa 1.1 Lite syntax, and it has types for Event, Organization, Person, Product, Review, AggregateRating, Offer and hundreds of others.

Data-Vocabulary.org

何が言いたいかというと、「Data-Vocabulary.org」は既に終了し、役割は「スキーマ」に引き継がれているということです。Googleが今までサポートしてきた「Data-Vocabulary.org」の記法をいきなり無効にするようなことはないでしょうが、今後は「スキーマ」が主流になるはずです。

「だから安心してスキーマ学ぼうぜ！」ってことですねー。

2スキーマ(schema.org)の基本的なルール、マークアップ方法

さて、それでは「スキーマ」について学んでいきたいと思います。「まずスキーマってどうやって書くんだ？」ということです。基本的には次の4つの属性値を理解すれば、あとはいくらでも応用が効くはずです。

ちなみにここで新しく登場したmicrodataという言葉ですが、これは広義で「Google(検索エンジン)に送られる情報」だと解釈して下さい。「スキーマでmicrodataをマークアップする(=書く)」といった言葉の使い方をします。

2-1「スキーマ(schema.org)」のマークアップ例

早速、「スキーマ」を使って文章をマークアップしてみましょう。マークアップはHTMLで行ないます。映画、TV番組、音楽、レシピ、microdataの種類は様々です。それでは、「書評(=本のレビュー)」を取り扱ってみましょう。

元の文章

「スキーマ(schema.org)」で「評価者に関する情報」をマークアップしたもの

<div itemscope itemtype="http://schema.org/Review"> 
<span itemprop="author">Yuta Arai</span>は
鳥山明の
ドラゴンボールを、
100点満点中100点と評価した
</div>

2-2マークアップしたコードの解説

これからこのコードについて、説明していきます。まずはGoogleに対して、「ここからここまでは評価の情報を書いてあるよ」という宣言をします。それが次です。

<div itemscope itemtype="http://schema.org/Review"> 
〜
</div>

itemscopeでmicrodataを取り扱うこと、そしてitemtype="http://schema.org/Review"で「その内容が評価であること」を宣言します。

これらの属性値を付けたタグ(例はdiv)で囲んだ範囲が、microdataを取り扱う範囲となります。そして「microdataの内容はURLで指定する」というルールを覚えて下さい。例えば次のようなURLが存在します。

itemtypeに指定できるURLの一例

今は「スキーマ」の記法、型を説明している時なので、URLの調べ方などは後ほど説明します。ここでは「URLで指定する」という少し変わったルールについて覚えて下さい。

2-3「評価者がYuta Arai」であることをマークアップする

続いて「評価をする人がYuta Araiであること」を伝えます。それにはitempropを利用します。

<span itemprop="author">Yuta Arai</span>

itempropは情報の「項目」を指定する属性値です。ここではauthorで「著者」を指定しました。itemprop="author"を付けたタグ(span)で取り囲んだテキスト(Yuta Arai)が、伝えられる情報(=評価の著者=評価者)となります。

これでひとまず、「microdataの種類が評価であること」「評価の著者(=評価者)がYuta Araiであること」を、Googleに伝えることができました。「”評価”のmicrodataをスキーマでマークアップした」ということです。

itemscope、itemtype、itempropの基本的な関係、「スキーマ」の型が分かってきたと思います。続いて、次はもう少し複雑になります。少しずつ進みましょう。

2-4「評価される本が鳥山明のドラゴンボールであること」をマークアップする

<div itemscope itemtype="http://schema.org/Review"> 
<span itemprop="author">Yuta Arai</span>は
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
<span itemprop="author">鳥山明</span>の
<span itemprop="name">ドラゴンボール</span>を、
</span>
100点満点中100点と評価した
</div>

上記は「評価されるのが本であること」「本の著者が鳥山明であること」「本の名前がドラゴンボールであること」、この3点を3〜6行目に新たにマークアップしたものです。

まず3行目に違和感を感じませんか？

<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">

1つのタグに、左から順にitemprop、itemscope、itemtypeの3つの属性値が入っています。これは一体どういうことなのか。説明すると次の通りになります。

itemprop="itemreviewed"

まず、itemprop="itemreviewed"で情報の項目に「レビューされる対象」を指定しました。ここまでは大丈夫だと思います。

しかしながらその値は、先ほどの<span itemprop="author">Yuta Arai</span>のように「1つ」ではありません。「本の著者=鳥山明」「本の名前=ドラゴンボール」という複数の値を同時に指定しなければいけないわけです。

そんな時に便利なのが「入れ子構造」、つまり「サブのmicrodata」です。「評価のmicrodata」の中に、さらに「本のmicrodata」を入れてしまうというわけです。視覚的に表現すると、次のような形になります。

microdataの入れ子構造

[評価のmicrodata 始まり]
・著者=Yuta Arai
	[本のmicrodata 始まり]
	・名前=ドラゴンボール
	・著者=鳥山明
	[本のmicrodata 終わり]
[評価のmicrodata 終わり]

この「入れ子構造」を作るには、itempropを指定したのと同じタグ内で、itemscope、itemtypeを宣言してやればいいというわけです。それが次というわけですねー。

<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
〜
</span>

イメージはできたでしょうか？この「本のmicrodata」の中で「(本の)著者」「(本の)タイトル」をマークアップしましょう。

<span itemprop="author">鳥山明</span>

「情報の項目」にはauthorで「著者」を指定しました。itemprop="author"を付けたタグ(span)で取り囲んだテキスト(鳥山明)が、伝えられる情報(=本の著者)となります。続いて「本のタイトル」を指定します。

<span itemprop="name">ドラゴンボール</span>

続いて、くどいようですが「情報の項目」にはnameで「名前」を指定しました。itemprop="author"を付けたタグ(span)で取り囲んだテキスト(ドラゴンボール)が、伝えられる情報(=本の名前)となります。ここまでのコードをまとめると下記の通りです。

ここまでのコード

<div itemscope itemtype="http://schema.org/Review"> 
<span itemprop="author">Yuta Arai</span>は
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
<span itemprop="author">鳥山明</span>の
<span itemprop="name">ドラゴンボール</span>を、
</span>
100点満点中100点と評価した
</div>

これで「microdataが評価であること」「評価の著者がYuta Araiであること」「評価の対象が本であること」「その本の著者が鳥山明であること」「その本のタイトルがドラゴンボールであること」、この5点をマークアップすることができました。

2-5「入れ子構造」と「独立した他のmicrodataが中にある」の違い

ちょっと寄り道になるのですが、「入れ子構造」と「独立した他のmicrodataが中にある」の違いを理解しておいた方がいいと思います。

例えば「入れ子構造」は、親のmicrodataと繋がった、関連した情報です。現在利用中のコードを例にあげれば、「評価のmicrodata」と「本のmicrodata」は密接に繋がっています。

<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">

itemprop="〜"と同じタグ内にitemscope、itemtypeを宣言することで、2つのmicrodataを親子関係にして繋げているわけです。

それが、例えばitemprop="itemreviewed"を除いて、次のような形になったらどうでしょう。

こうなると、「評価のmicrodata」の中で、それとは別の「本のmicrodata」が存在することになり、それぞれのmicrodataが独立する形になります。こういった使い方は、込み合った文章やWEBサイトの構造で利用する機会があるので、親子のように関係が密接している「入れ子構造」と、「独立した他のmicrodataが中にある」の違いは理解しておいた方がいいと思います。

2-6「点数が100点中100点であること」をマークアップする

さて、最後に100点満点中100点というデータをマークアップしましょう。「点数が100点」「最高点が100点」「最低点が0点」という3つの情報を新たにマークアップした完成形が次のコードです。7〜11行目にマークアップを加えています。

点数の内容を新たにマークアップしたコード

<div itemscope itemtype="http://schema.org/Review"> 
	<span itemprop="author">Yuta Arai</span>は
	<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
		<span itemprop="author">鳥山明</span>の
		<span itemprop="name">ドラゴンボール</span>を、
	</span>
	<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> 
		<meta itemprop="worstRating" content = "0"> 
		<span itemprop="bestRating">100</span>点満点中
		<span itemprop="ratingValue">100</span>点と評価した
	</span>
</div>

今回、itempropで「情報の項目」にreviewRating、「点数」を指定しました。このreviewRatingはルール上、microdataで指定する必要があります。そのため、再び「入れ子構造」を作ることになります。次のような形です。

microdataの入れ子構造

[評価のmicrodata 始まり]
・著者=Yuta Arai

	[本のmicrodata 始まり]
	・名前=ドラゴンボール
	・著者=鳥山明
	[本のmicrodata 終わり]

	[点数のmicrodata 始まり]
	・点数=100点
	・最高点数=100点
	・最低点数=0点
	[点数のmicrodata 終わり]

[評価のmicrodata 終わり]

内容を見ていきましょう。

<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> 

まず、itemprop="reviewRating"と同じタグ内にitemscope itemtype="http://schema.org/Rating"を加えるで、「入れ子構造」であることを宣言しました。

<span itemprop="bestRating">100</span>

itempropで情報の項目にはbestRatingで「最高点数」を指定しました。itemprop="bestRating"を付けたタグ(span)で取り囲んだテキスト(100)が、伝えられる情報(=最高点数)となります。

<span itemprop="ratingValue">100</span>

情報の項目にはratingValueで「点数」を指定しました。itemprop="ratingValue"を付けたタグ(span)で取り囲んだテキスト(100)が、伝えられる情報(=点数)となります。続いて、見て下さい。

2-7ブラウザに表示できないデータの取り扱い方

最後に、下記は「最低点数(worstRating)が0点であること」をマークアップしたものです。

<meta itemprop="worstRating" content="0"/> 

最後に上記は「最低点数(worstRating)が0点であること」をマークアップしたものです。これだけ他のものと違いますね。これについて解説します。

その前に「最低点数」をマークアップする意味とはなんでしょうか。最低点数をマークアップしない場合、Googleは「50〜100点中の点数」なのか「80〜100点中の点数」なのか理解できません。点数をマークアップする際は「最高点」「最低点」「点数」の3つの情報を取り扱う必要があるわけです。

さて、文章は「100点満点中100点」としか書かれておらず、「最低点が0点」というような表現(テキスト)がありません。そんな時に使えるのが、metaとcontentです。

metaのタグ内で、itempropとcontentを使って値を指定することで、ブラウザにテキストを表示することなく、マークアップができるんです。

metaタグの使いすぎに要注意！

ただし、このmetacontentは言わば「隠しテキスト」と同じ意味を持ちます。ユーザーにテキストを表示することなく、いくらでもウェブページに情報を仕込めるわけです。

「好き勝手に使っていい」となったらスパムの温床になることは明白です。「metacontentの利用は最小限に抑えましょう」というのが、「スキーマ」の精神です。どうしてもブラウザ上で表現できないデータを取り扱いたい場合にだけ、利用するように心がけましょう。

This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

3c. Missing/implicit information: use the meta tag with content(schema.org)より引用

2-8完成したコードの確認 が後々間違いに気付く!?

<div itemscope itemtype="http://schema.org/Review"> 
	<span itemprop="author">Yuta Arai</span>は
	<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
		<	;span itemprop="author">鳥山明</span>の
		<span itemprop="name">ドラゴンボール</span>を、
	</span>
	<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> 
		<meta itemprop="worstRating" content = "0"> 
		<span itemprop="bestRating">100</span>点満点中
		<span itemprop="ratingValue">100</span>点と評価した
	</span>
</div>

お疲れ様でした。これで「鳥山明という著者が書いたドラゴンボールという本を、Yuta Araiが100点満点中100点と評価した」という情報が、正確にGoogleに伝わることになります。

と思いきや、authorの取り扱いが誤りであることに気付きます。この「気付き」も解説の過程なので、読み進めて下さい。具体的には、こちらの「さっき紹介した「書評」のコードの誤りに気付く」で訂正しています。

3ルールを覚えたら、スキーマ(schema.org)のリファレンスを見ながらマークアップしていこう

前項で、「スキーマ」の基本的なマークアップのルールが分かったと思います。型が身に付けば、あとは応用で違う種類のマークアップもできるようになるはずです。それでは違うデータについて見ていきましょう。「schema.org」のサイトに行けば、全てのmicrodataの情報が揃っています。

3-1microdataの種類(URL)を調べる

先ほどはitemtype="http://schema.org/Review"で「評価」のmicrodataを、itemtype="http://schema.org/Book"で「本」のmicrodataを、取り扱いました。

「microdataの種類はURLで指定する」というルールは覚えていますね。これらをどうやって見つけるかというと、次のページに、その一覧があります。

スキーマ(schema.org)のmicrodataの種類一覧

ページを開くと、驚くほど大量のmicrodataが出てきます。「Blog」「Movie」、「Diet」なんかもあります。上記図はその中の「Book(本)」です。このリンクURLが、microdataの種類として指定するURLです。もちろん、探せば「Review(評価)」も見つかります。

3-2itempropの指定方法を調べる

itempropで指定するデータの記述方法を調べます。

microdataの取り扱い方

「Book」のページを開くと出てくる画面です。itemtype="http://schema.org/Book"の中でitempropに指定できる項目がズラーっと出てきます。先ほどはnameを使って、「本のタイトルがドラゴンボールであること」をマークアップしましたね。

propertyの一覧

itempropの「prop」は「property」の略です。その「property」の一覧が、このページに並んでいるというわけです。

Expected Typeを確認する

そして「Expected Type」の欄にあるのは、propertyの「指定方法」になります。例えば「Text」だったら<span itemprop="name">ドラゴンボール</span>というようにテキストで指定するし、「URL」だったら<span itemprop="image">http://omotan.com</span>というようにURLで指定します。

Expected Typeの例

これらはたくさんある指定方法の中の一例です。

3-3schema.orgのマークアップミスに気付く

これはitempropのauthorの「指定方法」です。「Organization or Person」と書いてあります。つまり「Organization」か「Person」のmicrodataでしか指定ができないということです。

さっき紹介した「書評」のコードの誤りに気付く

<div itemscope itemtype="http://schema.org/Review"> 
	<span itemprop="author">Yuta Arai</span>は
	<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
		<	;span itemprop="author">鳥山明</span>の
		<span itemprop="name">ドラゴンボール</span>を、
	</span>
	<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> 
		<meta itemprop="worstRating" content = "0"> 
		<span itemprop="bestRating">100</span>点満点中
		<span itemprop="ratingValue">100</span>点と評価した
	</span>
</div>

となると、先ほど完成したと思っていたマークアップに誤りがあることに気付きます。それは次の2点です。

<span itemprop="author">Yuta Arai</span>

<span itemprop="author">鳥山明</span>

どちらも、authorは「Organization(組織)」か「Person(人)」のmicrodataで指定しなければいけないところ、テキストで指定しまっていたのです。これを直したのが次のコードです。

マークアップし直したコード

<span itemprop="author" itemscope itemtype="http://schema.org/Person">
	<span itemprop="name">
	Yuta Arai
	</span>
</span>

<span itemprop="author" itemscope itemtype="http://schema.org/Person">
	<span itemprop="name">
	鳥山明
	</span>
</span>

「Person」のmicrodataでマークアップすることで、誤りを訂正しました。完成形は次の通りになります。

誤りを訂正し、完成したコード

<div itemscope itemtype="http://schema.org/Review"> 
	<span itemprop="author" itemscope itemtype="http://schema.org/Person">
		<span itemprop="name">
			Yuta Arai
		</span>
	</span>は
	<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
		<span itemprop="author" itemscope itemtype="http://schema.org/Person">
			<span itemprop="name">
				鳥山明
			</span>
		</span>の
		<span itemprop="name">ドラゴンボール</span>を、
	</span>
	<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> 
		<meta itemprop="worstRating" content = "0"> 
		<span itemprop="bestRating">100</span>点満点中
		<span itemprop="ratingValue">100</span>点と評価した
	</span>
</div>

階層構造のイメージ

[評価のmicrodata 始まり]

	[人のmicrodata 始まり]
	・名前=Yuta Arai
	[人のmicrodata 終わり]

	[本のmicrodata 始まり]
	・名前=ドラゴンボール

		[人のmicrodata 始まり]
		・名前=鳥山明
		[人のmicrodata 終わり]

	[本のmicrodata 終わり]

	[点数のmicrodata 始まり]
	・点数=100点
	・最高点数=100点
	・最低点数=0点
	[点数のmicrodata 終わり]

[評価のmicrodata 終わり]

今度こそ完成です。このように、「スキーマ」のリファレンスを確認しながらマークアップしていくことで、より正確に、知識を得ながらGoogleに情報を伝えられるようになるでしょう。

3-4「itemref」を使うととても便利！

さて、ここまで言及していなかったitemrefの使い方について、説明します。itemrefとは別の場所と別の場所をリンクさせる要素です。具体的には次のように使います。

<div itemscope itemtype="http://schema.org/Person" itemref="KOKO_KARA_GET">
 
<div>
↑ここでタグが閉じる
〜
↓離れた場所にある
<div itemscope id="KOKO_KARA_GET">
	<span itemprop="name">Yuta Arai</span>
<div>

このように別の場所を参照して、microdataの値を取得できるようにするのがitemrefです。itemref="〜"は任意のIDを指定します。そのIDがあるタグ内を参照します。

複数の場所を指定できる

<div itemscope itemtype="http://schema.org/Person" itemref="AAA BBB">
 
<div>
↑ここでタグが閉じる
〜
↓離れた場所にある
<div itemscope id="AAA">
	<span itemprop="name">Yuta Arai</span>
<div>
 
<div itemscope id="BBB">
	<span itemprop="birthdate">1982-02-06</span>
<div>

IDを半角スペースで分けて複数の場所を指定することも可能です。

複数の場所から指定できる

<div itemscope itemtype="http://schema.org/Movie" itemref="KOKO_KARA_GET">
<div>
 
<div itemscope itemtype="http://schema.org/Book" itemref="KOKO_KARA_GET">
<div>
 
<div itemscope id="KOKO_KARA_GET">
	<span itemprop="author" itemscope itemtype="http://schema.org/Person">
		<span itemprop="name">
			Yuta Arai
		</span>
	</span>
<div>

もちろん、複数の場所から、同じIDを参照することも可能です。「Movie(映画)」「Book(本)」を紹介していて、その著者が同一人物の場合などに便利ですよー。

3-5「itemprop」は複数の値を指定できる！

itempropには「editor(=編集者)」「author(=著者)」「creator(=制作者)」「copyrightHolder(=著作者)」といったように、同じような値がたくさんあります。値が同じ場合は、次のように複数まとめて指定することが可能です。

<span itemprop="editor author creator copyrightHolder" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">
Yuta Arai
</span>
</span>

3-6マークアップが正しいか確認するには「構造化テストツール」を使おう！

microdataをスキーマでマークアップしたコードが正しいのか、自分で確認するのは大変ですよね。データが増えて複雑になればなるほどそうです。そんな時にオススメなのが、Googleが提供している「構造化テストツール」です。

URLを入力すればそのページを、HTMLを入力すればそのコードを、マークアップが正しくされているのか確認してくれる便利なウェブサービスです。これに、例えば、今回マークアップした下記のコードを入力して確かめてみます。

<div itemscope itemtype="http://schema.org/Review"> 
	<span itemprop="author" itemscope itemtype="http://schema.org/Person">
		<span itemprop="name">
			Yuta Arai
		</span>
	</span>は
	<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
		<span itemprop="author" itemscope itemtype="http://schema.org/Person">
			<span itemprop="name">
				鳥山明
			</span>
		</span>の
		<span itemprop="name">ドラゴンボール</span>を、
	</span>
	<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> 
		<meta itemprop="worstRating" content = "0"> 
		<span itemprop="bestRating">100</span>点満点中
		<span itemprop="ratingValue">100</span>点と評価した
	</span>
</div>

Google検索結果に表示されるプレビュー

すると、Googleの検索結果にどのように表示されるか、プレビューを確認することができます。スキーマ(schema.org)でマークアップしたことによって、リッチスニペット(=検索結果の見栄えをリッチにする)が反映される場合は、上記図のようにそれを見せてくれます。

マークアップが正しいか、判定をしてくれる

もっと便利なのが、マークアップが正しくされているかを確認できることです。プレビューの下の方にスクロールすると「抽出された構造化データ」という項目があります。上記は「評価」のマークアップを反映しています。

typeはitemtype="http://schema.org/Review"を指定していることを抽出しています

そしてpropertyは「itempropで指定した項目」を表します。「authorはitem1」「itemreviewedはitem2」といった具合に、それぞれが指定している値が分かります。

「評価者(author)」のマークアップ

「評価者(author)」のmicrodataであるitem1を見てみましょう。「Yuta Arai」とマークアップされていることが確認できます。

「評価対象(itemreviewed)」のマークアップ

「評価対象(itemreviewed)」のmicrodataであるitem2を見ると、「本の名前(name)がドラゴンボールであること」「本の著者(item4のauthor)が鳥山明であること」がマークアップされていることが確認できます。

「点数(reviewrating)」のマークアップ

最後に「点数(reviewrating)」のmicrodataであるitem3を見ると、「最低点数(worstrating)が0点であること」「最高点数(bestrating)が100点であること」「点数(ratingvalue)が100点であること」がマークアップされていることが確認できます。

マークアップでエラーが出た場合

仮にマークアップに間違いがあった場合は、図のように赤文字で警告が表示されます。この赤文字の部分を翻訳すれば、何が間違っているかを確認することができます。

スキーマでマークアップをする上で、この「構造化テストツール」は欠かせないツールです。必ずブックマークしておきましょう。

4「スキーマ(schema.org)」は普及するのか？

さて、ここまで読んでいただいた方、ありがとうございます。Googleに情報を正確に伝えられる「スキーマ」。とても魅力的ですね。しかしながら「普及は遠いかもなー」と思ってしまうのが正直なところです。

1つマークアップするのも大変ですよね。例えば既に100記事、1000記事と書いているブロガーさんなどは、これから全てのコンテンツを「スキーマ」でマークアップするのはほぼ不可能です。

また、これは些細なことでしょうが、「スキーマ」のマークアップによって増えたファイルサイズは、塵を積もらせてサーバーを圧迫してしまうことになるかもしれません。

4-1「スキーマ(schema.org)」はユーザーからはあまり歓迎されてない？

シアトルで開催されたSMX Advanced 2011のパネルで、私はSchema.orgのタグに関する質問を耳にした。もう少し詳しく説明すると、グレッグ・ボーザー氏による検索エンジンが最終的に元に戻った経緯に関する発言であった。

まず、検索エンジンはメタデータを検索アルゴリズムに利用した。その後、撤去した。そして、今、検索エンジンは再びメタデータを求めているのだ。ただボーザー氏のトーンからは、Schema.orgの告知やSEO戦略としてのタグの利用に関して、同氏がどう思っているのかは伝わってこなかった。

その他のパネリストは、Schema.orgのタグがコードの膨張につながる点に関してコメントし、最終的に新しいSchema.orgの新しいタグを使ってサイト全体のコーディングをやり直す取り組みを推奨するパネリストは一人も現れなかった。そして、Schema.orgのタグをSEO戦略として利用する点に対して、経験に基づいた証拠もまた提示されなかった。

HTML5のウソとホントをSEO的に分析してみた。(SEO JAPAN)より引用

こちらは2011年の記事です。先ほど書いた通りで、今から過去の記事をマークアップする労力、そしてそれがSEOに繋がるのかが保証されていない現状を考えると、「積極的にマークアップしていこう！」という人は現れにくいですよねー。

4-2Googleのエンジニアは積極的に使ってほしいと思っている

schema.orgを使ってないなら今すぐ使うべき。
ユーザーはリッチスニペットをよりクリックする傾向にある。
検索結果にリッチスニペットが増えている。
ユーザーにとって情報が多いほうがいいから使うべき。
検索エンジンに理解させやすくなる。
レシピ検索では構造化マークアップしているサイトだけが絞込みできる。
Googleはより多くのリッチスニペットをサポートし始めている。 — プロダクト、レビュー、イベントなど。

米国のSEOエキスパートたちが語る、最新SEO情報 総まとめ at #SMX Advanced Seattle 2012(海外SEO情報ブログ)より引用

海外SEO情報ブログの「SMX Advanced Seattle 2012」のレポートによると、上記の発言があったそうです。エンジニア側は積極的に「schema.org」を使うべきという姿勢です。

4-3Googleが現在対応している「schema.org」のmicrodata一覧

2014年6月14日現在、Googleがリッチスニペットに反映するデータは上記の通りです。これらについては、Googleが提供する構造化データ マークアップ支援ツールでお手軽にマークアップすることが可能です。

ただしツールに頼るよりも自分でリファレンスを確認しながらマークアップをしていくことをオススメします。その方が理解が深まり、より応用が利くようになるはずです。ツールは確認程度に利用するのが良いバランスだと思います。

4-4「スキーマ(schema.org)」を始めよう！

まだまだ「スキーマ(schema.org)」でのマークアップで得られる恩恵は、その労力に対して少ないかもしれません。だけど、この記事の最初の方でも言いましたが、これからさらに多くの情報がサポートされるようになることは想像できます。

やっている人・やっていない人の差は必ず出てくると思います。「コンピュータに詳しく思い通りに情報を伝えることができる」、そんな素晴らしい「スキーマ」の取り組みが普及した未来が楽しみです。

今から「スキーマ」でマークアップを始めてみませんか？この記事が、みなさんの何らかのきっかけになれたら幸いです。ここまで読んでいただき、ありがとうございました。

• Tweet

• 

この記事へのコメント

感想、ご指摘などお気軽にお寄せ下さい。「関連記事を書いた」という方はご報告いただければリンクします。

• コメント
• ログイン

お名前 :

• Twitterでログイン(認証)する
• Facebookでログイン(認証)する
• はてなでログイン(認証)する

※Twitter、Facebook、はてな、いずれかのアカウントをお持ちの方は、本人認証(ログイン)を行なうことができます。
※本人認証をすることで、書き込みの待ち時間なし、画像アップロード、アイコンなどが利用できます。
※認証時にサービスと連携しますが、名前とアイコン以外の情報を読み込んだり、また書き込みを行なうことはありません。連携で要求する権限は「公開情報の読み取り」のみです。

コメントは、0件です。

記事の更新履歴

• 記事を旧ホームページ「おもたん(omotan.com)」から移動しました。
  2014/06/14 22:00
• 記事を公開しました。
  2014/01/01 10:00