2015.04.24
WEB

Webデザイナー必見！セマンティックコーディングに欠かせない構造化データ。【基礎編】

この記事はシリーズ全3記事です。

どーも、デザインちーむのさむです。

Webページを作成する際に必要となる知識の1つにSEOがあります。
ただWebページをカッコよく作れば良いというものではありません。
そこで今回は、Webデザイナー向けに、今後さらに必要となるであろう「構造化データ」のお話しをしたいと思います。
3回に分けてお話ししていきますので、良かったら全て目を通して頂ければと思います。

いつものように自分メモも兼ねて。

1 セマンティックウェブ
2 セマンティック検索
3 HTML5
4 構造化データ
5 Schema.org
6 ボキャブラリーとシンタックス
- 6.1 ボキャブラリー
- 6.2 シンタックス
7 まとめ

セマンティックウェブ

まずは重要なワードから説明していきます。
なんとなく知ってるけどちゃんと説明できないWebデザイナーは多いのでは？
まずは、構造化データを始めるにあたって理解しておかなければいけない基礎中の基礎の、「セマンティックウェブ」です。

セマンティックウェブとは、Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想

ということです。

検索エンジンはページに記述された「HTML」に基づいて検索結果を提供しています。
しかし、従来では、検索エンジンはHTMLを単純に活用できても、HTMLに書かれている「情報の意味」まで活用することは困難でした。
そこで、HTMLにメタデータを記述することによって情報の一つ一つを意味付けし、「情報の意味」をより検索に活用していこうとする「次世代のウェブ構想」が推し進められるようになりました。

コンピューターには理解できない情報をより細かく理解できるようにしてあげれば、検索結果にも優位になるかもしれません。（2015/02/20時点では検索結果には影響しません、、、。）

しかし、やっておいて損はないと思います。
近い将来、必ずや影響してくるはずです！

セマンティック検索

セマンティック検索とは、利用者が何を求めて検索を行ったかという意味をコンピュータが正しく解釈し、それに即した検索結果を提供するという概念、または、そのための一連の技術のことである。

先ほども説明しましたが、Webページの全ての箇所のデータをコンピューターに明示的に示せれば、ユーザーが検索しようとしているものを理解し、膨大にあるWebページの中から最適な答えを返してくるようになるでしょう。
従来の「hタグ」のようなものだけでは、伝えてる量が圧倒的に少ないのです。

HTML5

2014/10/28にW3Cにて正式勧告となったHTML5も、セマンティックなマークアップとなっています。
HTML5ではアウトラインを強く意識します。
アウトラインとは文章の概要で、簡単に言うと「本の目次のようなもの」で、ツリー構造にて形成します。

今までのマークアップだと検索エンジンは、視覚的にアウトラインを認識できません。
div要素で囲まれた文書では、どこが重要なセクションで、どこがナビゲーションであるのかを認識できないのです。
なぜなら、div要素は汎用的なブロック要素としてしか定義されておらず、セマンティックな意味合いを持たないものだからです。

「HTMLの使用目的は装飾目的ではなく、セマンティックな目的で使用すること」と定義されています。
HTML5でもセマンティックな考え方が必要になってきます。

header、footer、section、article、navなどがセクショニングコンテンツと呼ばれ、アウトラインを形成します。

構造化データ

構造化データとは、HTMLに書かれている情報を、検索ロボットでも理解できるように意味づけする”メタデータ”のことをいいます。

セマンティックウェブを実現させるための手段が「構造化データ」ということになります。

今後のWeb制作には必ずと言っていいほど、構造化データのスキルを求められると思います。
人に対して意味やカッコ良さを伝えることも大事ですが、コンピューターに対しても理解できるようなWebページを作成していくスキルも必要です。
コンピューターに対して理解できるようにしなければ、検索結果で表示されることは難しいでしょう。
どんなに作りこんだデザインでも誰もたどり着けないのです、、、。

ここまでで、基本的な概念が理解できたと思います。
いよいよ次からは具体的に構造化データを進めていくうえで必要なものを説明していきます。

Schema.org

schema.orgとは、検索エンジン大手の Google、Microsoft、Yahoo! がウェブの改善を目的として共同で進めている、構造化データマークアップの共通仕様を策定する取り組み。

schema.orgは、モノゴトが持つ意味を表現するために定義された「ボキャブラリー（vocabulary）」です。

構造化データマークアップにより、検索エンジンはウェブページ上の情報を認識し、より有用な検索結果を提供できるようになります。

次回からは、このschema.orgを利用して説明していきます。
schema.orgには様々なものが定義されていますので、まずは以下のリンクからチェックしてみましょう！
Schema.org（日本語版）

かなりの量が定義されているので、把握するのにも一苦労です、、、。
今後は上記サイトを確認しながらマークアップしていくことになります。

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

ボキャブラリー

先ほども説明しましたがschema.orgは、モノゴトが持つ意味を表現するために定義された「ボキャブラリー（vocabulary）」です。
その他にもボキャブラリーには様々なものが存在します。

GoodRelations（ECサイトで使うためのボキャブラリーを定義）
FOFA (Friend of a Friend)（人物の情報を表すためのボキャブラリーを定義）
rNews（ニュース関連の情報を表すためのボキャブラリーを定義）
Data-Vocabulary.org（幅広いジャンルをカバーするボキャブラリーを定義）

※Data-Vocabulary.orgは、schema.orgの登場によってその役割をschema.orgに引き継いでいます。
※GoodRelationsは、そのボキャブラリーほとんどが現在はschema.orgに移植されています。

シンタックス

シンタックス（syntax）とは「記述方法」、「書き方のルール」とここでは理解してください。
schema.orgやFOAFが定めたボキャブラリーをどのようにして記述するかのフォーマット(記述方法)です。
シンタックスには様々なものが存在します。

Microdata
RDFa
RDFa Lite
JSON-LD

RDFaは、構造化データをマークアップするシンタックスとして幅広く使われていて拡張性にも富んでいます。
RDFa LiteはRDFaをもっと使いやすく簡素化したものです。
現在schema.orgは、MicrodataとRDFa、JSON-LDの3つのシンタックスを公式にサポートしています。（15/02/23現在）