構造化データマークアップ|SEO女子コラム

今回は記念すべき20回目です!もっとたくさんの話題に触れてきたように思うのですが、まだ20個しか書いてないんですね…。
まだまだSEOに関わる事柄はたくさんありますし、私達ももっともっと勉強したいことがたくさんあるので、SEO女子コラム、まだまだお付き合いお願いしますっ!

さて、今回のコラムは私達が勉強をしたいと思っていたテーマについて取り上げさせてもらいます。

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

Googleにサイト内の情報をより知ってもらうための構造化ですが、私たちはマスターしたくて必死に勉強中です!覚えたら簡単に出来る構造化データマークアップを今回は取り上げてみました。
それでは、コラムスタートです☆

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

担当者:おかもっさん

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

RDFa

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

JSON-LD

もともとは構造化データマークアップのための手段ではありませんでしたが、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での構造化データアークアップ記述方法

実際に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を使ったマークアップです。

scriptタグ

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

JSONオブジェクト

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

KeyとValue

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はこの項目以外でも活躍の場があり覚えておいて損はありません。
まだまだ便利な使い方があるので、またどこかの記事で追記をすることにしましょう。

いかがでしたか?構造化データマークアップについて少しは理解を深めることが出来たでしょうか?私も正直Microdata以外のシンタックスを使うのは初めてに等しかったのでとても勉強になりました。
使えば使うほど理解が深まり使いやすくなっていきます。構造化をマスターしてGoogleにより多くの情報を伝えたいですね!

ちなみに、このサイトはパンくずリストが構造化データマークアップされています。そのうち今日勉強したJSON-LDでブログのマークアップをしようかな~。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.