SEO対策

構造化マークアップとは？知るべき基本を解説

15 min read

同じようなWebページなのに、Google検索で調べたときに「星の評価」や「よくある質問の一覧」が表示されているサイトを見たことはありませんか？

この表示は、構造化マークアップという仕組みによって実現されています。

構造化マークアップは「見た目には影響しないが、検索エンジンからの評価やクリック率に関わる」技術です。デザインカンプの再現だけでなく、こうした見えない品質にこだわれるかどうかが、コーダーとしての腕の見せどころになります。

この記事では、構造化マークアップの基本的な考え方から、実案件ですぐに使えるコード例までをまとめています。初めて触れる方でも理解できるように、順を追って説明していきます。

構造化マークアップとは？

構造化マークアップとは、Webページの内容を検索エンジンに「意味」として伝えるための仕組みです。

普段書いているHTMLは、人間がブラウザで読むためのものです。見出し・段落・リストなど、見た目の構造は伝わりますが、「このページは会社概要です」「この部分はパンくずリストです」といった意味までは検索エンジンに正確には伝わりません。

構造化マークアップを使うと、ページの内容を機械が理解できるデータとしてHTMLに追加できます。これにより、Googleなどの検索エンジンがページの内容をより正確に把握してくれるようになります。

リッチリザルトとの関係

構造化マークアップを正しく実装すると、検索結果にリッチリザルト（通常よりも情報量の多い特別な表示）が出ることがあります。

たとえば次のような表示です。

FAQ（よくある質問）：質問と回答がアコーディオン形式で表示される
パンくずリスト：URLの代わりに「トップ＞サービス＞ Web制作」のような階層表示になる
レビュー・評価：星マークと評価点が表示される
レシピ：調理時間やカロリーが検索結果に出る

リッチリザルトが表示されると、検索結果の中で目立つため、クリック率（CTR）が上がりやすくなります。SEOの観点からも効果的な施策です。

最初に覚えるべきスキーマ4選

構造化マークアップで使う「どんな種類の情報か」を表す定義のことをスキーマと呼びます。Schema.org というサイトに何百種類も定義されていますが、すべてを覚える必要はありません。

実案件でよく使うものは限られています。まずは次の4つを押さえましょう。

1. Organization（会社・団体の情報）

コーポレートサイトで必ずと言っていいほど使います。会社名・ロゴ・URL・SNSアカウントなどを検索エンジンに伝えます。トップページの<head>内に設置するのが一般的です。

2. BreadcrumbList（パンくずリスト）

ページの階層構造を検索エンジンに伝えます。実装すると、検索結果のURLが「トップ＞カテゴリ＞ページ名」のような階層表示に変わります。実案件での使用頻度が最も高いスキーマです。

3. Article（記事）

ブログやニュースの記事ページで使います。タイトル・著者・公開日・アイキャッチ画像などの情報を伝えることで、Googleが記事として正しく認識してくれます。

4. FAQPage（よくある質問）

質問と回答のセットを伝えるスキーマです。正しく実装すると、検索結果に質問と回答がアコーディオン形式で表示されることがあります。リッチリザルトの効果が特にわかりやすいスキーマです。

実装してみよう（コード例）

ここからは、実際のコードを見ていきます。JSON-LDは<script type="application/ld+json">というタグの中に書きます。設置場所は<head>内でも<body>の末尾でも動作します。

BreadcrumbList（パンくずリスト）の実装例

「トップ＞サービス＞ Web制作」という3階層のパンくずリストを実装する例です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "トップ",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "サービス",
      "item": "https://example.com/service/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Web制作"
    }
  ]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "トップ",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "サービス",
      "item": "https://example.com/service/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Web制作"
    }
  ]
}
</script>

コードの読み方：

@context：Schema.org の定義を使うことを宣言しています
@type：データの種類を指定しています（ここでは「パンくずリスト」）
itemListElement：パンくずの各階層を配列で並べます
position：左から何番目かを数字で指定します
name：表示するテキストです
item：リンク先のURLです（最後の階層について、現在のページには不要）

FAQPage（よくある質問）の実装例

よくある質問ページに2つのQ&Aを設定する例です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "制作期間はどのくらいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一般的なコーポレートサイトの場合、デザインからコーディングまで約1〜2ヶ月が目安です。ページ数や機能により変動します。"
      }
    },
    {
      "@type": "Question",
      "name": "WordPressでの制作は可能ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、対応しています。オリジナルテーマでの制作を行っており、更新しやすい管理画面をお作りします。"
      }
    }
  ]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "制作期間はどのくらいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一般的なコーポレートサイトの場合、デザインからコーディングまで約1〜2ヶ月が目安です。ページ数や機能により変動します。"
      }
    },
    {
      "@type": "Question",
      "name": "WordPressでの制作は可能ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、対応しています。オリジナルテーマでの制作を行っており、更新しやすい管理画面をお作りします。"
      }
    }
  ]
}
</script>

ポイント：

mainEntityの中に質問（Question）を配列で並べます
各質問にはname（質問文）とacceptedAnswer（回答）をセットで書きます
質問の数に制限はありませんが、実際にページ上に表示しているQ&Aと一致させることが大切です（ページにない質問を構造化データだけに書くのはNGです）

Organization（会社情報）の実装例

コーポレートサイトのトップページに設置する例です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "株式会社サンプル",
  "url": "https://example.com",
  "logo": "https://example.com/images/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+81-03-1234-5678",
    "contactType": "customer service",
    "availableLanguage": "Japanese"
  },
  "sameAs": [
    "https://twitter.com/example",
    "https://www.instagram.com/example/"
  ]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "株式会社サンプル",
  "url": "https://example.com",
  "logo": "https://example.com/images/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+81-03-1234-5678",
    "contactType": "customer service",
    "availableLanguage": "Japanese"
  },
  "sameAs": [
    "https://twitter.com/example",
    "https://www.instagram.com/example/"
  ]
}
</script>

sameAsには、公式のSNSアカウントのURLを配列で並べます。ブラウザがその企業の公式アカウントを認識する手がかりになります。

動作確認の方法

構造化マークアップを書いたら、必ず動作確認を行いましょう。JSONの構文ミスやプロパティの書き間違いがあると、リッチリザルトが表示されません。確認には次の2つのツールが便利です。

1. リッチリザルトテスト（Google公式）

リンクはこちらから

Googleが提供している公式の検証ツールです。URLを入力するか、コードを直接貼り付けてテストできます。

リッチリザルトとして認識されるかどうかが一目でわかる
エラーや警告があれば具体的に表示される
本番公開前の最終チェックに最適

2. Schema Markup Validator