TECH BLOG

マークリープス技術ブログ

open

[HTML] 構造化データの基本と実装方法：schema.orgの活用で記事・製品ページを強化

MARKLEAPS

[HTML] 構造化データの基本と実装方法｜schema.orgの活用で記事・製品ページを強化

検索結果をより視覚的にリッチにし、Googleにページ内容を正しく伝えるために有効なのが「構造化データ」です。
なかでも、schema.orgを使ったマークアップは、製品情報やレビュー評価などの「リッチリザルト」表示につながり、ユーザーの注目を集めやすくなります。

本記事では、構造化データの基本から、記事ページや製品ページへの導入方法までを、コード例とともにわかりやすく解説します。

構造化データとschema.orgの基礎

構造化データとは？

構造化データとは、Webページの内容を検索エンジンにわかりやすく伝えるために、HTMLに意味づけをする技術です。
見た目には影響しませんが、検索エンジンがページ構造や内容をより正確に理解できるようになります。

schema.orgの役割と対応検索エンジン

schema.orgは、Google・Bing・Yahooなど主要検索エンジンが共同で策定した、構造化データの共通語彙（ボキャブラリー）です。
記事・製品・レビューなど、さまざまな情報タイプに対応しており、正しくマークアップすれば、検索結果に「リッチリザルト」として反映される可能性があります。

構造化データを導入するメリット

SEOへの直接的・間接的効果

構造化データ自体が検索順位に直結するとは明言されていませんが、次のようなメリットがあります。
・クリック率（CTR）の向上：検索結果で目立つ表示が可能に
・インデックス精度の向上：検索エンジンがページの意図を正しく把握できる

リッチリザルトの表示例

・製品情報マークアップ：価格、在庫状況、レビュー評価（星）などが表示される
・求人情報マークアップ：求人タイトル、給与、雇用形態、勤務地、提供元などが表示される

 
構造化データによって表示される「リッチリザルト」について、より詳しくは以下の記事をご覧ください
リッチリザルトとは？検索結果が“目立つ”構造化データの基本

構造化データの基本的な記述方法

JSON-LD形式の基本構造

構造化データの推奨記述形式は「JSON-LD」です。
HTML内に以下のように記述します。

この例では、「Product」タイプの構造化データを使い、商品名、ブランド、画像、価格、レビュー評価などをマークアップしています。

記述位置と注意点

構造化データは、<head>内または<body>タグの末尾に記述します。
複数の構造化データを同一ページに記述する場合は、それぞれの構造・型の整合性に注意しましょう。

記事ページへの導入例（Article / NewsArticle / BlogPosting）

Article / NewsArticle / BlogPostingの記述例

記事やブログページにはArticle、NewsArticleまたはBlogPostingを使います。
以下はその基本例です。

必須項目に注意

・タイトル（headline）
・著者名（author）
・公開日（datePublished）

AMP対応ページでは、追加の項目が必要になる場合があります。

製品ページへの導入例（Product）

Productタイプの記述例

製品ページにはProductタイプを使用し、価格・在庫・レビュー情報などをマークアップします。

ECサイトでの活用ポイント

・表示されている商品情報とマークアップが一致していること
・価格・在庫などの情報が定期的に更新されていること
・各商品ごとに個別の構造化データを設けること

導入時の注意点とテスト方法

リッチリザルトに表示されないときのチェックポイント

・必須項目が漏れていないか
・Googleのガイドラインに違反していないか
・ページがインデックスされているかどうか

テストツールの活用

以下のGoogle公式ツールで、構造化データの記述に誤りがないかをチェックできます。
・リッチリザルト テスト
・スキーマ マークアップ検証ツール

まとめ

構造化データは、検索エンジンへの理解を助け、リッチリザルトによる視認性向上にもつながる重要な技術です。
記事ページや製品ページなどに適切に導入することで、検索エンジンからの評価向上やクリック率アップが期待できます。

まずは基本的な型から取り入れ、段階的に活用範囲を広げていきましょう。

よく読まれている関連記事

関連最新記事