通常のHTMLではコンテンツの意味付けに限界があるが、構造化データでマークアップすれば
より正確な意味付けが可能になります。ここでは、schema.orgでmicrodataをマークアップする方法を紹介します。

  • schema.org でマークアップすれば詳細な意味付けが可能
  • itemtype の種類は URLで指定する必要がある
  • itempropで情報の細かい項目を指定できる

構造化データマークアップとは？

構造化データマークアップとは、コンピューター(検索エンジン)が効率的にWebサイトの情報を収集して解釈できるように、Webサイトのテキスト情報をマークアップして意味を持たせる手法のことです。

ちなみに、Webサイトの構造を一定の規則に従い正しく意味付けして、コンピューターが自律的に情報の収集を行えるようにする考え方のことを「セマンティックWeb」と呼びます。

例えば

・Webサイトの名前は〇〇〇です。
・Webサイトの概要は〇〇〇です。
・Webサイトの設立者(会社)は〇〇〇です。
・記事の公開日時は〇〇〇です。

と検索エンジンにWebサイトの情報をひとつひとつ丁寧に伝えるイメージです。 こういった説明をHTMLファイルに記述することが、構造化マークアップです。

ボキャブラリーとシンタックス

構造化データマークアップを行う際に使用するのがボキャブラリーとシンタックスです。
今回は、まずボキャブラリーについてお話をしていきます。

ボキャブラリーとは

ボキャブラリーとは、構造化データマークアップで使用する単語を定義した規格です。例えば、名前を表すときは「name」、記事の出版者を表すときは「publisher」という単語が対応していることを、このボキャブラリーで確認できます。

代表的なボキャブラリーは「schema.org」や「deta vocabulary」がありますが、Googleが使用を推奨しているのは「schema.org」です。

schema.org とは

schema.orgとは、Google、Yahoo!、Microsoftなどによって策定されていた、検索エンジンが情報を理解しやすい構造化データを作成し、管理するプロジェクト、ボキャブラリーやその表記方法のことを指します。サイトによってschema.orgとは何かという説明の仕方はまちまちですが、ボキャブラリーであるということだけ理解できれば問題ありません。

このschema.orgに準拠することで、そこに何が書かれているのかをメタ的に示し、より正確に検索エンジンに伝えることができます。

たとえば、「ここでは地域について書いています」、「これは駅の名前です」などといった、HTMLの機能だけでは伝えきれない詳細な情報を、検索エンジンに伝えることができます

構造化データマークアップの実装方法

構造化データのプロパティ
基本的には の画像①の4つのプロパティを理解すれば、schema.orgを使うことができます。なお、「microdata」とは、広義で「Google（検索エンジン）に伝える情報」だと解釈しておきましょう。

書評のマークアップ例

マークアップはHTMLに追記する形で行ないます。microdataでは、映画、音楽、テレビ番組、料理のレシピなど、表現できる種類はたくさんありますが、一例として、書評を取り扱ってみます。

「田中さんはココログラフのSEOの最新常識を、10点満点中10点と評価した。」

上記の文章をマークアップした例が、です画像②です。
文章のマークアップの例
ここでは、段落などひとかたまりの範囲を定義する<div>タグ内に
追記される形で、microdataがマークアップされています。

microdataでは、まずは検索エンジンに対して、「microdataを取り扱う」と宣言する必要があります。それが「itemscope」に該当する。そして続く「itemtype」で、microdataの種類を示しています。
itemscopeは宣言に過ぎないため、何らかの値を指定する必要ありません。

itemscopeの種類の例
一方で、itemtypeはmicrodataの種類を示すため、値を指定する必要があります。注意が必要なのは、itemtypeの種類はURLで指定する必要があるということです。
ここでは、「評価」を意味する「http://schema.org/Review」が指定されています。そして、itemscopeとitemtypeが追記されている要素（ここでは<div>タグ）の中身が、microdataの範囲となります。
microdataには、ほかにもさまざまなitemscopeの種類があるので、内容に応じて、自由にURLを置き換えてください。

書評の評価者をマークアップする

書評の評価者のマークアップ
続いて、例の書評の評価者をマークアップしてみます。すなわち、検索エンジンに「評価者が田中さんである」と伝わるように表現するわけです。こうした記述には、情報の細かい項目を指定する「itemprop」を使用し、のように画像④のようにマークアップします。

この例では、itempropに評価者を意味する「author」を指定し、その「itemprop=”author”」が追記されている要素
（範囲を定義する<span>タグ）で取り囲んだテキスト「田中さん」が対象となります。
さらに、「itemscopeitemtype=”http://schema.org/Person”」で「評価者が人であること」を指定し、「itemprop=”name”」で「それが人の名前であること」を指定しています。これらによって、「microdataの種類が評価であること」と、「評価者が田中さんという名前であること」を、検索エンジンに伝えることができます。

ここで、注意してもらいたいのは、1つの要素に、itemprop、itemscope、itemtypeと、3つのプロパティが同時に入っていることです。これは「評価者」のmicrodataの中に「人」のmicrodataを記述しているということです。なお、itempropのauthorには、「Organization」か「Person」のmicrodataでしか指定できないというルールがあるため、「authorはPersonでnameは田中さん」という記述になります。

構造化マークアップの検証

構造化マークアップをしたら記述が正しいかどうか、以下のテストツールで検証します。
記述に誤りがある場合はエラーを返してくれたり、どのような構造としてクローラーに認識されているのかを確認することができます。
構造化データマークアップツールの画像
Google構造化データテストツール
また、リリース後はサーチコンソールでも構造化データの状態を確かめることができます。

まとめ

構造化マークアップではパンくずのほかにもや商品レビューや、イベントの情報の表示等さまざまな形式のリッチスニペットが用意されてますので、カスタム次第でSEO対策やクリック率向上に大きく貢献できると思います。また、構造化データマークアップによって検索順位のアップなどは起きないようですが、検索結果でリッチスニペットで表示されていれば、Webサイトへの流入やユーザーの検索体験に大きく貢献できそうです。

こうしてユーザーに対して親切な検索結果の表示を提供していくという部分ではSEOの本質的な部分にもつながると感じます。
良質なコンテンツを増やしつつ、こういった細かな改善も継続していけるとよいですね。