Google検索をした時、下記の画像のように記事とは別にページコンテンツが表示されている状態を見たことがある方も多いのではないでしょうか。
リンクを押さなくても、検索結果画面から内容を見ることができるので、ついページに飛んで読みたくなってしまいますよね。
これを可能にするのが「構造化データ」と呼ばれる仕組みです。今回の記事では構造化データとは何か、またサイトへの導入方法について解説します。
Contents
構造化データとは？
構造化データとは、Webページの内容をGoogle Chromeなどの検索エンジンが読み込める形式で表現するためのマークアップ言語の一種です。構造化データを用いることで「リッチリザルト（リッチスニペット）」と呼ばれる特定の情報（例：製品の価格、レビューの評価、出版物の著者など）を検索結果に直接表示することができます。ユーザーは検索結果から直接必要な情報を得ることができ、また詳細を知るためにリンクをクリックしてページにアクセスするというユーザーの行動が期待できます。
例としてGoogle検索ではさまざまなリッチリザルトをサポートしています（公式ドキュメントはこちら）。
- プロフィール
- 組織
- 商品
- 店舗
- イベント
- Q&A
- 求人情報
- レシピ
- レビュー etc…
構造化データの導入方法について
構造化データをサイトに導入する方法について、2パターンの方法が考えられます。
ノーコードでの導入
HTMLが分からない非エンジニアの方にはGoogleの提供している下記のツールがおすすめです。専門知識をお持ちでないマーケターなどの方はこちらの方法を活用するのが良いでしょう。
ただし、これらの方法は専門知識を要求しない反面、「内容がツールに制限される」「ツールを使うことで手動作業よりも手間がかかる」といった側面もあります。自身のサイトに合わせて最適な構造化データを組み込むには、コーディングによる導入が欠かせません。
コーディングでの導入
構造化データをHTMLに記述する際には、そのフォーマットを決める必要があります。代表例は下記の3つです。補足ですが、これらのフォーマットのことを「シンタックス」と呼びます。
- JSON-LD
- RDFa
- Microdata
HTMLでコーディングすることで、動的ページや多言語サイトといった特有の要件に合わせて構造化データを細かく設定することができます。ECサイトをはじめ大規模なWebサイトでは、コーディングによる構造化データの導入が効果的です。
今回はJSON-LDを使った記述方法を解説します。
JSON-LDによる構造化データの表記例
JSON-LDとはGoogleが推奨している記述フォーマットです。スクリプトタグを使用し、HTML内の１箇所にまとめて構造化データを記述することができます。実際の記載例とともに組み込み方をまとめていきます。
リッチリザルト例
例えば「組織」の構造化データとして、以下のような会社情報のマークアップを想定します。
Webサイトを起点に、「デザイン」と「デジタル」で、地方の未来をおもしろくする。
https://try-m.co.jp/
〒107-0062
東京都港区南青山2-2-15 ウィン青山942
電話番号：03-6403-3259
営業時間：月～金10:00～19:00
スクリプト
これをJSON-LDでは以下のように記述することができます。
<script type="application/ld+json">
{
"@context" : "https://schema.org",
"@type" : "Organization",
"name" : "株式会社トライム",
"description" : "Webサイトを起点に、「デザイン」と「デジタル」で、地方の未来をおもしろくする。",
"url" : "https://try-m.co.jp/",
"image": "https://try-m.co.jp/wp-content/themes/trym/images/common/header/logo.svg",
"telephone" : "+81-03-6403-3259",
"address" : {
"@type" : "PostalAddress",
"postalCode" : "107-0062",
"adressRegion" : "東京都",
"adressLocality" : "港区",
"streetAdress" :"南青山2-2-15 ウィン青山942",
"addressCountry": {
"@type":"Country",
"name":"JP"
}
},
"openinghours" : "Mo, Tu, We, Th, Fr 10:00-19:00"
}
</script>対応表
各項目の詳細は以下の通りです。
| @context | どのボキャブラリーを使用するか（例：schema.org、data-vocabulary.org） |
| @type | 何について記述するか（例：レシピ → Recipe、店舗情報 → Store） |
| name | 名称 |
| description | 説明文 |
| url | リンクURL |
| image | サムネイル画像 |
| telephone | 電話番号 |
| address | 住所 |
| openinghours | 営業時間 |
この他にもJSON-LDでは様々な情報について記述することができます。さらに詳しい内容や項目について知りたい場合は公式ドキュメントを参照しましょう。
ボキャブラリーについて
JSON-LDを構築する上で欠かせないものが、「ボキャブラリー」と呼ばれるデータに意味付けを行う規格です（Googleではschema.orgを推奨）。JSON-LDはあくまで構造化データのフォーマットに過ぎず、どのような項目で何を記述するかは、定義したボキャブラリーに沿って記述する必要があります。つまり今回の例では、
「”@context” : “https://schema.org”, “@type” : “Organization”, “name” : “株式会社トライム”」
と記述することにより、「schema.orgという規格に従って組織名は株式会社トライムであることを説明している」と言えます。
確認ツール
自身で作成した構造化データや、インターネット上に公開されているサイトの構造化データは、下記のツールを利用することで確認することができます。エラー検証や他サイトの調査を行う場合に活用してみてください。
リッチリザルト テスト
構造化データをテストするための Google の公式ツールです。Webページまたはコードに対して、構造化データの構造解析やエラー検出が可能です。Google検索でリッチリザルトがどのように表示されるかをプレビューすることもできます。
https://search.google.com/test/rich-results?hl=ja
スキーマ マークアップ検証ツール
ウェブページに埋め込まれている Schema.org ベースの構造化データをすべて検証することができます。Google の機能固有の警告は表示されません。
まとめ
今回の記事では構造化データとは何か、またサイトへの構造化データの導入方法について解説しました。
構造化データを活用したユーザーへの情報発信は、強力なSEO対策に繋がります。トライムではECサイトをはじめ様々なWebサイトの制作を手掛けています。
ノーコードでの実装も可能ですが、ECサイトや大規模サイト等への導入にはHTMLでの実装が不可欠です。サイトへの構造化データの導入をご検討の方は、ぜひお気軽にお問い合わせください。