WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

構造化データの基本・仕組み・書き方まとめ

このエントリーをはてなブックマークに追加

構造化データの基本・仕組み・書き方まとめ

構造化データとは、HTMLの文字列を検索エンジンに理解してもらうためにタグ付けを行ったものです。構造化データにはさまざまな仕組みや書き方があり、専門的な内容ではありますが、ある程度の知識を覚えておくことでユーザーにも検索エンジンにもわかりやすいサイト作りを行うことができます。ここでは、構造化データの基本や仕組み、書き方について解説いたします。

構造化データとは

構造化データとは、HTMLで書かれた文字の羅列を、クローラーが理解しやすいようにタグ付けをしたものを指します。

クローラーがWebサイトの情報を理解できるように記述されたもの、それが「構造化データ」です。構造化データを正しく用いることで、自社サイトが何について書いているのかを、クローラーに正しく理解させられるようになります。

セマンティックWebとは

本来コンピューターが理解できないテキスト情報に意味を持たせ、ユーザーの求める情報を正しく提示する、その一連の考えやシステムを「セマンティックWeb」と呼びます。

セマンティックWebはwwwの開発者であり創始者であるティム・バーナーズ・リーが提唱したものです。セマンティック(Semantic)を和訳すると「意味をもたせる」となります。クローラーが「音楽=楽器や声を奏でるもの」と意味を理解できるようになり、ユーザーのほしい情報に対して正しい内容を提供できるように作り上げた構造化データは、まさにセマンティックWebを体現したものです。

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

構造化データを作成する際には、「ボキャブラリー」と「シンタックス」の組み合わせが必要です。それぞれの詳しい内容について、解説いたします。

ボキャブラリー

ボキャブラリーとは、一般的には「単語」という意味を持ちますが、構造化データにおいては構造化データマークアップで使用する単語を定義した規格という意味を持っています。

例えば、「ピアノ」をクローラーに説明する際に「楽器です」と説明したとします。この「楽器です」の部分をコンピューターにわかる「コンピューター語」に言い換えたのがタグです。さらに「楽器です」をはじめとするコンピューターへの説明用語をタグで表す際、どういう文字列を使うかあらかじめ決められた「タグ集」が、ボキャブラリーと考えてください。

ボキャブラリーは「schema.org」や「deta vocabulary」などが一般的です。

schema.org

schema.orgは現存するボキャブラリーの中で、もっとも一般的なものです。

schema.orgの登場以前は、Yahoo!・Microsoft・Googleの3社がそれぞれ別のボキャブラリーを使用していました。しかし、それではサイト作成者からすれば、3社に合わせた別々の構造化マークアップが必要です。そこで3社は共通のボキャブラリーを活用することを決め、その際に選ばれたのがschema.orgです。

schema.orgはタイプ(type)とプロパティ(Property)を組み合わせて使用する場合が多くあります。

タイプが「音楽(music)」だとすると、プロパティは「アーティスト(Artist)、期間(duration)、アルバム名(inAlbum)などです。

Data-Vocabulary.org

Data-Vocabulary.orgはschema.orgの登場以前まで、多く活用されていたボキャブラリーです。現在では維持管理もすでに終了しており、GoogleではData-Vocabulary.orgによるリッチリザルト表示を2020年4月に終了させています。

現在のサイトではあまり活用されておらず、知っている方も少ないのではないでしょうか。

シンタックス

コンピューターに説明を伝えるタグの単語集が「ボキャブラリー」なら、シンタックスは「ボキャブラリーの伝え方」の記述方法です。先ほどの「ピアノ」の意味を伝える例で言えば日本語で伝えるのか英語で伝えるのか、みたいなものだと思ってください。そのためシンタックスには色々な種類があり、中でも「JSON-LD」、「RDFa」、「microdata」の3つが、ポピュラーな存在とされています。

JSON-LD

シンタックスの中では最も一般的で広く活用されているのがJSON-LDです。Google自身もシンタックスはJSON-LDを推奨しています。

参考元:Googleウェブマスター向け公式ブログ

JSON-LDの特徴は、ソース内であればどこにも記述してもよい所です。構造化したいソース箇所とJSON-LDによる記述箇所は離れていてもよいので、記述しやすくメンテナンス性に優れています。

Microdata

MicrodataはHTML5のみでマークアップが可能なシンタックスです。多数サイトで使われてきたためサンプルが多くあり、使用例の参考が得やすくなります。W3Cの勧告が2013年で停止しているため、現在の使用は注意が必要です。

RDFa

Microdataとよく似たマークアップ方法をとっているのがRDFaです。MicrodataはHTML5でのみ使用可能でしたが、こちらはより多くの言語で活用できます。

構造化データと現存のHTMLが一致しやすいというメリットがありますが、Googleの「構造化マークアップ支援ツール」のサポートを受けていないため、Microdata同様、こちらもHTML初心者の方は使用の検討が必要です。

構造化データの書き方

続いて、構造化データの在り方がわかったところで、書き方を知らなければ活用できません。構造化データを作成する方法は、いくつかあります。

HTML上で直接マークアップする方法

そのひとつが、HTML上で直接マークアップをする方法です。やや手間がかかりますが、使いやすいセマンティックを選択しお手本を参考に記せば、次第に書き方の特徴が見えてきます。

例として、schema.org とそれぞれのセマンティックを組み合わせた書き方をご紹介しますので、参考にしてみてください。

schema.org + Microdataの場合

<div itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>花矢卓司</span>
<img src=”www.hanayatakuji.com/images/hanaya.jpg” itemprop=”image” />
<a href=”http://www.hanayatakuji.com/blog/” itemprop=”url”>デジ研</a>
</div>

schema.org + RDFa (RDFa Lite)の場合

<div vocab=”http://schema.org/” typeof=”Person”>
<span property=”name”>花矢卓司</span>
<img src=”//www.hanayatakuji.com/images/hanaya.jpg” property=”image” />
<a href=”http://www.hanayatakuji.com/blog/” property=”url”>デジ研</a>
</div>

schema.org + JSON-LDの場合

<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “Person”,
“name”: “花矢卓司”,
“image”: “http://www.hanayatakuji.com/images/hanaya.jpg”,
“url”: “http://www.hanayatakuji.com/blog/”
}
</script>

データマークアップ支援ツールを用いた方法

Googleが提供する「データマークアップ支援ツール」を使えば、専門的なHTML記述知識がなくても、構造化データのマークアップが実現します。

まず、Googleの「構造化データ マークアップ支援ツール」のサイトへ行きます。

構造化データ マークアップ支援ツール

ページの指示に従い、はじめにマークアップしたいURLのページカテゴリを選択します。その次に、マークアップしたいURLをそのまま画面下部に貼り付けてください。

読み込み完了後に貼り付けたURLのキャプチャ画面が表示されますので、任意の構造化データを選択したら、右上にある「htmlの作成」ボタンをクリックしてください。自動生成されたhtmlソースをページ内の<head>の中に貼り付ければ完了です。

データハイライターを用いた方法

データハイライターとは、「データマークアップ支援ツール」同様、Googleのサーチコンソールで提供している構造化マークアップの作成ツールです。データハイライターを活用すれば、構造化データをHTML上に記載しなくても、クローラーが正しい情報を認識できるようになります。

まず、サーチコンソールを起動したら「検索の見え方」を選択してください。その後、「データハイライター」→「ハイライト表示を開始」をクリックしたら、対象ページのURLを貼り付けて指示通りに入力をすれば完了です。

構造下データの確認方法

構造化データを作成したとしても、Web上で正しく表示されなくては意味がありません。構造化データの確認方法は、Googleの「構造化データテストツール」を活用すると便利です。

構造化データテストツール

ページに飛んだらURLを貼り付けるか、コードスニペットタブにHTMLを貼り付けるかをし、「テストを実行」のボタンをクリックします。その後、検証結果がすぐに表示されます。エラーがなければ、正しく構造化データの設定ができていると認識して問題ありません。

構造化データを利用するメリット

構造化データを利用する大きなメリットは、検索エンジンがサイトコンテンツを認識しやすくなる、という点です。

冒頭でもお伝えしましたが、クローラーはHTMLを読み込んだだけでは、内容を正しく把握しきれません。構造化データをおこすことでクローラーが内容を正しく把握し、結果、サイトも検索エンジンから正しい評価を得ることができます。

また、検索結果にリッチスニペットが表示される、というのも構造化データならではのメリットです。リッチスニペットの表示がなされることにより、検索結果画面からのクリック率も上昇します。その他にも、ナレッジパネルやGoogle for jobsにも表示がされやすくなるようです。

構造化データ自体はSEOではあまり意味がない、ともされていますが、クローラーに正しくサイト認識がされ、さらに検索画面からのクリック率向上が見込めるのであれば、構造化データも充分にSEO対策のひとつといえるのではないでしょうか。

おわりに

構造化データ基本や仕組みは、いざ、ふたを開けてみると非常に複雑でわかりづらいことのように思えるかもしれません。しかし、サイト運営者・作成者にとっては非常に慣れ親しんだ存在であり、知識として得ておくことで今後のサイト運営に役立つ可能性も出てきます。より深く構造化データを理解し、活用できるようにしておきましょう。

 

このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2020 DM SOLUTIONS Co.,Ltd. All rights reserved.