第20回SEO女子コラム「構造化データマークアップ」

構造化データ マークアップについて

今回のテーマの構造化データ マークアップについて知る前に、まずは従来の検索エンジンの仕組みを知っておきましょう。
かつての検索エンジン（クローラー）はこれまでテキストを「文字」と認識し、サイトの情報を蓄積していました。
ですがクローラーは人間が見て理解出来る「文字」も、「記号」としか認識できません。
文字の意味を理解出来ないクローラーは、サイトのコンテンツをきちんと認識できず、的確なサイトの優先度を量る事ができなかったのです。
そこでソースコード内の情報が何を意味するのかを理解する為に、クローラーでも認識出来る文字データをサイト内に記述できるようになりました。
クローラーがサイトのコンテンツを細かにも解釈できるようになったことで、より確実にサイトの優先度を量る事が可能になります。
クローラーが理解出来る特定のデータが構造化データと言われています。
構造化データのマークアップを行うことで検索エンジンによりサイトの情報を伝えやすくなり、SEO対策としても有効だと言われています。

構造化データ マークアップはサイト内のコンテンツに関連する名前・住所・電話番号といったサイトコンテンツの詳しい情報をクローラーにもわかるように紐づけて伝えていく事を言います。
本題の構造化データをマークアップする方法ですが、基本的にはHTML内に直接記述し、その際に、ボキャブラリーとシンタックスを使います。
構造化データのボキャブラリーはマークアップする事柄を定義すること、シンタックスはそのマークアップを記述する方式をいいます。

ボキャブラリーにはいくつか種類がありますが、今回はGoogleが推奨しているschema.orgを例に挙げようと思います。
schema.orgとは、GoogleやYahoo、microsoftなど検索エンジンを改善するため、構造化データ マークアップの共通仕様を定める取り組みです。

schema.orgでマークアップするにはタイプ（型）とプロパティ（属性）を指定しないといけません。
このschema.orgでは大きなカテゴリとしてのタイプを選び、次に関連するプロパティを選ぶ…といった感じで、例えば「学校」だとOrganization(組織)という大きな項目の次にEducationalOrganization(教育組織)→School(学校)と、階層を形成していくことになります。

値を定義するボキャブラリーの次に、マークアップする仕様を決めるシンタックスについても解説していきます。
シンタックスはHTMLに構造化データをマークアップする際、どうマークアップするのか、どのように記述するか、などの仕様を選択します。
現在、Googleが推奨しているシンタックスはMicrodataといわれていますので今回はMicrodataを解説します。
MicrodataはHTML5で用いることができる仕様で、itemscope属性やitemprop属性を使ってマークアップされます。
実際の記述方法と例はこちら。

今回の例は人の名前なのでタイプはPerson(人)、プロパティはadditionalName（人の名前）に設定します。
（「私の名前は」「です」という箇所は構造化するデータではないのでマークアップしないようにします。）
その他のタイプやプロパティに関してはこちらのサイトが参考になるかと思います。（※英語サイトです。）
このように、単語や情報を細かくマークアップすることでサイトを最適化する事が可能になります。
マークアップが完了したら、構造化データで問題がないかチェックしてみましょう。

最後に、説明してきた構造化データ マークアップで、実際にどのような効果があるのかを説明します。
SEO対策として有効と言ったように、マークアップを行った箇所は検索画面のスニペットに反映されリッチスニペットと呼ばれるスニペットになります。
マークアップをすることでイベント情報やパンくずリストなど細かな情報が掲載されたリッチスニペットが表示され、ユーザーのクリック率が上がり順位にも影響します。
ただ、中には構造化データ マークアップのように特殊なタグをいじるのはちょっと…という方もいるはず。
そんな方でも簡単に導入できる構造化データ マークアップ支援ツールという便利なツールもあります。
あなたのサイトにもリッチスニペットを表示させたり、サイトを最適化したいなら是非構造化データ マークアップにチャレンジしてみてください。

JSON-LD を用いた記述

Microdataを用いた記述方法とは別の方法でも構造化データマークアップは行うことが出来ます。
現在schema.orgで提唱されているのはMicrodataの他に「RDFa」と「JSON-LD」です。

Resource Description Framework (リソース・ディスクリプション・フレームワーク)と呼ばれる仕様の書き方で、構造化情報をXHTML文書へ埋め込むことが出来るものです。
形としてはMicrodataとよく似ており、該当部分を直接マークアップすることになります。今回はご紹介に止めますが、なかなか複雑で難しいようです。

もともとは構造化データマークアップのための手段ではありませんでしたが、Googleが2013年にサポートを開始、使用出来ることとなりました。ではそもそもJSON-LDとはなんでしょうか？

「JavaScript Object Notation」（ジャバスクリプト・オブジェクト・ノーテーション）の頭文字と、「Linked Data」（リンクト・データ）の頭文字をとって「JSON-LD」と呼ばれており、アプリケーション同士がデータをやり取りするためのフォーマットです。
JavaScriptと入っていますが、これはJavaScriptの書き方をちょっと使っていますよ～というだけです。

もともと、データを記述するための言語であるJSONフォーマットを、データとデータを結びつけるためのLinked Dataのやりとりをするために使ったのが「JSON-LD」です。さらに、schema.orgのボキャブラリーを使いことで、どのようなLinked Dataなのかを示すことが出来ます。
例えば、このブログの中に名前が出てくる私「つじさん」と「おかもっさん」が知人であるという事実をデータとして示すことがLinked Dataで、その方法がJSONフォーマットです。「つじさん」と「おかもっさん」が人であり知人であるという事実がschema.orgといったところでしょうか。

実際にJSON-LDを使って構造化データマークアップをしてみましょう。
JSON-LDはJavaScriptの書き方を一部使用しているため、HTML内のどこに記述をしても構いません。どこかにひとまとめにして記述をします。

例えば、このブログをJSON-LDを使って紹介してみることにします。

• ブログの名前：SEO女子のブログ
• ブログURL：http://beginner-seogirl.com/blog/
• 筆者：つじさん

以上のデータをマークアップします。ブログはhttp://schema.org/Blogが定義されているので、こちらを使います。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Blog",
"name": "SEO女子のブログ",
"url":"http://beginner-seogirl.com/blog/",
"author":"つじさん"
}
</script>

これがJSON-LDを使ったマークアップです。

まず、JSON-LDのまとまりを表すためのscriptタグを記述します。
<script type="application/ld+json"></script>
これは決まり事として、最初はこう書くもの！と覚えましょう。このscriptタグで囲まれた部分が構造化データになります。

次に、「ここからここまではある一つのことについてマークアップしているよ～」ということを示すために「{}(波かっこ)」を使ってまとまりを作ります。例えば、「このかっこ内は人について書いてます」「このカッコ内は出来事について書いてます」といったような括り方で大丈夫です。
このひとまとまりのことをJSONオブジェクトと呼びます。

JSONオブジェクトの中身は「Key(キー)」と「Value(バリュー)」と呼ばれるもので構成されます。Keyは項目、Valueはその内容を指し示します。
KeyとValueは「:(コロン)」で仕切られ、両方共「”(ダブルクオーテーション)」で囲う必要があります。

"@context": "http://schema.org",
"@type": "Blog",
"name": "SEO女子のブログ",
"url":"http://beginner-seogirl.com/blog/",
"author":"つじさん"

例で行けばこの部分が該当しますが、ここで気になるのが最初に2つに付いている「@(アットマーク)」ですね。
このマークが付いたKeyは少し特殊なKeyで「キーワード」と呼ばれるものです。10種類以上存在していますが、構造化データマークアップで使うのは多分「@Context」、「@type」くらいのようです。

「@Context」では、http://schema.orgを指定して「ここから先はhttp://schema.orgでお話をしますね」ということを定義します。
「@type」では「ここから先は何のことについて書きますね～」ということを定義します。例えば人であればhttp://schema.orgの中で「Person」と定義されているので、こちらを記述します。

ここより下は、「@type」で定義したプロパティを入れていくことが出来ます。この辺りの考え方はMicrodataと同じような感じですね。

KeyとValueはペアで記述されます。これは幾つでも書いて良いのですが、どこからどこまでが一つのペアなのかわからないと困ります。そこで、KeyとValueが一つ終わるごとに「,(カンマ)」で区切りを入れてあげる必要があります。

これでJSON-LDでの構造化データアークアップ記述方法の基礎が完成です！Googleはどの方法でも構造化データを読み取ってくれますが、このJSON-LDはこの項目以外でも活躍の場があり覚えておいて損はありません。
まだまだ便利な使い方があるので、またどこかの記事で追記をすることにしましょう。