SEOに欠かせない構造化データマークアップとは？基礎から詳しく解説！

Webサイトを運営しているみなさんは、Webサイトを構造化データマークアップをしていますか。構造化データマークアップをするとSEO対策に効果が出てくるのはもちろん、リッチスニペットやAmpにも対応することが可能になってきます。今回は、構造化データマークアップとはなにかという基礎的な話から設定方法までご紹介します。

構造化マークアップとは

構造化データマークアップとは、コンピューター(検索エンジン)が効率的に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とは何かという説明の仕方はまちまちですが、ボキャブラリーであるということだけ理解できれば問題ありません。

シンタックスとは

シンタックスは、ボキャブラリーにある単語の使い方だと思ってください。構造化データマークアップはHTMLに記述すると書きましたが、その記述の仕方がシンタックスにあたります。

代表的なシンタックスは「JSON-LD」や「Microdata」「RDFa」がありますが、Googleが推奨しているのは「JSON-LD」です。

シンタックス:JSON-LDとは

JSON-LDとは、構造化データを記述する際に使用するシンタックスです。schema.orgの策定に関わっていたGoogleが利用を推奨し、さらにW3Cの勧告も受けています。

JSON-LDは、scriptタグを用いてHTMLのどの部分にも構造化データを記述できるという特徴があり、構造化データにしたい部分に直接記述する必要がある他のシンタックスに比べて、記述内容を整理しやすいというメリットがあります。

構造化データマークアップ

ここからは、構造化データマークアップの方法について説明します。 ボキャブラリーにはschema.org、シンタックスにJSON-LDを使用します。

まず先に、構造化データマークアップの全体をお見せします。

まずは記述の構造の説明をします。
先ほども説明した通り、JSON-LDはscriptタグを用いて記述します。
script typeの中には「application/id+json」と記述しましょう。
scriptタグ内側の｛｝の中に構造化データを記述します。

ルールは3つです。

1. 単語は「”」で囲い「:」で分け、意味の区切りで「,」を使う

単語は「"(ダブルクォーテーションマーク)」の中に書き、「"」で囲った2つの単語の間には「:(コロン)」が入ります。

また、CSSと同じように、意味の区切りで「,(カンマ)」を使いましょう。

2. 最初に使用するボキャブラリーを宣言する

検索エンジンにどの種類のライブラリを使って記述するかを宣言しましょう。
今回は”schema.org”です。

3. @typeで要素を定義する

@typeは、直前の単語の種類を定義する記述です。

例えば上記の記述は、@typeでimageに対して「imageOcject」という定義をした後に、画像パス、画像の高さ、画像の横幅を定義しています。

この部分の記述で、@typeでPersonと定義した後にはnameで名前を定義しているように、@typeで定義した種類によって、それ以降に定義できる要素が決まっています。

ちなみに、4行目の@typeだけ他の@typeと記述の仕方が違うように見えますが、これはWebページそのものを対象に定義している記述です。

以上の3つのルールさえ理解すれば、あとはボキャブラリーを確認しながらコードを記述することができます。

構造化データマークアップのコードの意味

下記の表にschema.orgでよく使用されるコードをまとめました。

コード名	意味
headline	記事のタイトル
mainEntityOfPage	正規ページのURL
＠id	urlを記述する
image	メイン画像
ImageObject	画像について説明する際に使う
url	url
height	高さ
width	幅
publisher	Webページの設立者
Organization	組織　会社
name	名前
logo	ロゴ
author	著者
Person	人
datePublished	記事の初回公開日時
description	記事の説明

基本的に単語の意味がそのままコードの意味となっています。datePublishedなど、2単語以上続く場合は、2単語目以降の頭文字を大文字にしてくっつけるというプログラミングのルールがありますので、気を付けましょう。

ここで紹介した単語はschema.orgにある中のごく一部です。schema.orgでよりそのWebサイトにあった単語を見つけることができれば、より詳細な構造化データマークアップをすることが可能です。

まとめ

構造化データマークアップについてご理解いただけたでしょうか。今回はschema.org、JSON-LDを使用して説明しましたが、これら以外のボキャブラリーやシンタックスもあるので、自社のWebページの構造にとって扱いやすいものを選択しましょう。

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか？

WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。