【2025年最新版】構造化データの作り方:JSON-LDで始めるSEO対策!実装から運用まで徹底解説

json-ld その他
記事内に広告が含まれています。

「せっかく作ったWebサイト、検索結果で目立たない…」 「SEO対策はしているつもりだけど、なかなか成果が出ない…」 「リッチリザルトってよく聞くけど、どうやったら表示されるの?」 「構造化データが良いらしいけど、なんだか難しそうで手が出せない…」

Google検索で上位表示を目指す上で、ユーザーの目を惹き、クリック率を向上させるリッチリザルト(リッチスニペット)は非常に重要です。そして、その表示には「構造化データ」の実装が欠かせません。しかし、「コードを書くなんて無理」「専門知識が要りそう」と感じてしまい、諦めている方も多いのではないでしょうか。

構造化データは、実は「思っているよりもずっと簡単」に実装できるWebサイトの強化策です。正しく作り方を理解し、適切に設置するだけで、あなたのWebサイトは検索結果でより魅力的に輝き、クリックされるチャンスを大幅に増やせます。

この記事を読んでわかること

  • 構造化データがWebサイトのSEOにどう影響し、どんなメリットがあるのか
  • 商品やブログ記事、FAQなど、主要な構造化データの種類とそれぞれの役割
  • Googleが推奨するJSON-LD形式構造化データ 作り方の基本
  • 商品情報やFAQ、パンくずリストなど、具体的な実装例とコードテンプレート
  • 作成した構造化データが正しく機能しているかを確認するテストツールの使い方
  • Google Search Consoleでエラーや警告が出た時の原因と修正方法
  • 構造化データを導入することでCTRがどう改善するのか、そのSEO効果と運用ポイント

構造化データとは?初心者向け基礎知識と実装の準備

構造化データの概要とSEOへの影響とは

構造化データとは、Webページ上の情報を検索エンジンがより理解しやすいように、特定の形式で記述したデータのことです。例えば、商品ページであれば「これは商品の名前」「これは価格」「これはレビュー評価」といった情報を、検索エンジンに明確に伝えることができます。

人間はWebページを読むだけで、それが何に関する情報なのかを容易に判断できますが、検索エンジンのクローラーはそうではありません。クローラーは膨大な情報を収集し、それを整理・分類してユーザーに提示します。このとき、構造化データを使うことで、検索エンジンはWebページの内容を正確に把握し、より適切に検索結果に表示できるようになるのです。

では、この構造化データがSEOに影響を及ぼすのはなぜでしょうか?最も大きなメリットは、リッチリザルト(リッチスニペット)の表示です。リッチリザルトとは、通常の検索結果に加えて、評価の星、価格、写真などの詳細情報が表示される形式のことです。これにより、検索結果ページでの視認性が格段に向上し、ユーザーの興味を引きやすくなります。結果として、クリック率(CTR)が向上し、サイトへの流入増加に繋がる可能性が高まります。

つまり、構造化データをwebサイトに実装することで、検索エンジンがあなたのサイトをより深く理解し、ユーザーに対して魅力的な情報を提供できるようになるため、間接的ではありますが、SEOへの影響は非常に大きいと言えるでしょう。

Article・Product・FAQなど主要スキーマの種類と特徴

構造化データには様々な種類があり、それぞれ異なる情報タイプに対応しています。これらの種類は「スキーマ(Schema)」と呼ばれ、Schema.orgという共同プロジェクトによって標準化されています。Googleが推奨している主要なスキーマタイプをいくつか見てみましょう。これらは構造化データの具体例としても役立ちます。

Article (記事):
ブログ記事やニュース記事などに使用され、記事のタイトル、著者、発行日、画像などの情報を伝えます。

Product (商品):
ECサイトの商品ページに最適で、商品名、価格、在庫状況、レビュー評価、構造化データ 画像(商品画像)などを指定できます。リッチリザルトで星の評価が表示されることが多いですね。

FAQPage (よくある質問):
Q&A形式のページに使用します。質問とその回答のペアを記述することで、検索結果に質問と回答が直接表示されることがあります。

BreadcrumbList (パンくずリスト):
サイトの階層構造を示し、検索結果でURLの代わりにパンくずリストが表示されるようになります。ユーザーがサイト構造を理解しやすくなる構造化データ メリットがあります。

Recipe (レシピ):
料理のレシピページに利用され、料理名、材料、調理時間、評価、構造化データ 画像(料理写真)などを指定できます。

Event (イベント):
イベントの名称、日時、場所、出演者などの情報を伝えます。

これらのスキーマを適切に利用することで、検索エンジンはページの内容をより正確に認識し、ユーザーに対してより関連性の高い、魅力的な情報を提供できるようになります。

JSON-LD・Microdata・RDFaの違いとGoogleが推奨する形式

構造化データを記述するための形式には、主に以下の3つがあります。

JSON-LD (JavaScript Object Notation for Linked Data):
JavaScriptのオブジェクト形式で記述され、HTMLの<head>内または<body>内の<script>タグ内に記述します。HTMLとは別に記述するため、既存のHTML構造を汚染しないというメリットがあります。

Microdata (マイクロデータ):
HTMLのタグに直接属性(itemprop, itemscope, itemtypeなど)を追加して記述します。HTMLの中に直接情報を埋め込むため、既存のHTMLを編集する必要があります。

RDFa (Resource Description Framework in Attributes):
Microdataと同様にHTMLの属性を利用しますが、より複雑なデータ構造を表現できます。

現在、Googleが推奨する形式はJSON-LDです。その理由は、JSON-LDがHTMLと分離して記述できるため実装が容易であること、そして構造が分かりやすく、メンテナンスしやすい点が挙げられます。特に理由がなければ、今から構造化データを実装する際にはJSON-LDを選択するのが良いでしょう。

ステップバイステップで学ぶ構造化データの作り方

ここからは、実際に構造化データ 作り方をステップバイステップで解説します。Googleが推奨するJSON-LD形式に絞って見ていきましょう。

構造化データの使用方法 - MDN Web Docs | MDN
MDNは可能な限り、明確に定義された構造でデータを格納されます。この情報は一元化され、一度の更新で多くの場所で使用することができます。

JSON-LD形式の基本構文と書き方テンプレート

JSON-LDは、JavaScriptのオブジェクトのように記述されます。基本的な構文は以下のようになります。

<script type="application/ld+json">
{
  "@context": "<https://schema.org>",
  "@type": "ここにスキーマタイプ(例: Article, Productなど)",
  "プロパティ名": "プロパティの値",
  "別のプロパティ名": "別のプロパティの値"
  // 必要に応じてプロパティを追加
}
</script>

  • @context: これは常にhttps://schema.orgと記述し、Schema.orgの語彙を使用することを意味します。
  • @type: これは記述する構造化データの種類(スキーマタイプ)を示します。例:「Article」「Product」「FAQPage」など。
  • プロパティ名:プロパティの値: スキーマタイプごとに定義されているプロパティ(属性)とその値を記述します。
JSONファイルはコメントアウトできません。でもなんとかする方法
JSONファイルでコメントアウトはできませんAjaxを利用して外部データを取得、それをもとにレンダリングをする機会がかなり増えてきました。この外部データで一番使いやすいのはjsonファイルです。データ構造がまんまjavascriptのオブジェクト型なのでデータを変数に入れるとそのままオブジェクとして扱えるのです。jso...

書き方テンプレート(基本)

<script type="application/ld+json">
{
  "@context": "<https://schema.org>",
  "@type": "WebPage", // 例: ページのタイプ
  "name": "ページのタイトル",
  "description": "ページの簡単な説明",
  "url": "<https://www.your-website.com/your-page-url/>"
}
</script>

これは基本的なWebPageスキーマのテンプレートですが、この後説明する各用途に合わせて@typeとプロパティを書き換えていきます。

用途別の実装例:商品・FAQ・パンくずリスト・レシピ・イベント

ここからは、より具体的な構造化データ 具体例として、主要なスキーマタイプの実装例を見ていきましょう。これらの実装により、構造化データ メリットを最大限に引き出すことができます。

1. 商品 (Product) の実装例

ECサイトの商品ページで、商品の名前、価格、レビュー評価などを表示させたい場合に利用します。

<script type="application/ld+json">
{
  "@context": "<https://schema.org/>",
  "@type": "Product",
  "name": "おしゃれなワイヤレスイヤホン",
  "image": "<https://www.example.com/images/wireless-earbuds.jpg>", // 構造化データ 画像
  "description": "高音質で長時間の利用が可能なワイヤレスイヤホンです。",
  "brand": {
    "@type": "Brand",
    "name": "サウンドマスター"
  },
  "sku": "ITEM001",
  "mpn": "MPN001",
  "offers": {
    "@type": "Offer",
    "url": "<https://www.example.com/product-page.html>",
    "priceCurrency": "JPY",
    "price": "9800",
    "itemCondition": "<https://schema.org/NewCondition>",
    "availability": "<https://schema.org/InStock>",
    "seller": {
      "@type": "Organization",
      "name": "〇〇ストア"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "120"
  }
}
</script>

2. FAQ (FAQPage) の実装例

よくある質問ページで、質問と回答のペアを検索結果に直接表示させたい場合に利用します。

<script type="application/ld+json">
{
  "@context": "<https://schema.org>",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "商品の返品は可能ですか?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、商品到着後7日以内であれば返品可能です。詳しくは返品ポリシーをご確認ください。"
      }
    },
    {
      "@type": "Question",
      "name": "送料はいくらですか?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "全国一律500円(税込)です。5,000円以上のお買い上げで送料無料となります。"
      }
    }
  ]
}
</script>

3. パンくずリスト (BreadcrumbList) の実装例

サイトの階層構造を検索結果に表示させたい場合に利用します。

<script type="application/ld+json">
{
  "@context": "<https://schema.org>",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "<https://www.example.com/>"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "商品一覧",
      "item": "<https://www.example.com/products/>"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "おしゃれなワイヤレスイヤホン",
      "item": "<https://www.example.com/products/wireless-earbuds.html>"
    }
  ]
}
</script>

4. レシピ (Recipe) の実装例

レシピサイトで、料理の材料や調理時間、評価などを表示させたい場合に利用します。

<script type="application/ld+json">
{
  "@context": "<https://schema.org/>",
  "@type": "Recipe",
  "name": "美味しいカレーライス",
  "image": [
    "<https://example.com/photos/curry-1x1.jpg>",
    "<https://example.com/photos/curry-4x3.jpg>",
    "<https://example.com/photos/curry-16x9.jpg>"
  ],
  "description": "家庭で作れる本格的なカレーライス。",
  "keywords": "カレー, レシピ, 家庭料理",
  "author": {
    "@type": "Person",
    "name": "クッキング太郎"
  },
  "datePublished": "2023-01-15",
  "prepTime": "PT20M",
  "cookTime": "PT40M",
  "totalTime": "PT60M",
  "recipeYield": "4人分",
  "recipeCategory": "メインディッシュ",
  "recipeCuisine": "日本料理",
  "nutrition": {
    "@type": "NutritionInformation",
    "servingSize": "1人分",
    "calories": "500 calories"
  },
  "recipeIngredient": [
    "鶏もも肉 300g",
    "玉ねぎ 1個",
    "じゃがいも 2個",
    "にんじん 1本",
    "カレールー 1箱",
    "水 800ml"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "鶏肉、玉ねぎ、じゃがいも、にんじんを一口大に切ります。"
    },
    {
      "@type": "HowToStep",
      "text": "鍋に油をひき、鶏肉と野菜を炒めます。"
    },
    {
      "@type": "HowToStep",
      "text": "水を加え、沸騰したらアクを取りながら野菜が柔らかくなるまで煮ます。"
    },
    {
      "@type": "HowToStep",
      "text": "火を止めてカレールーを溶かし入れ、再び弱火で煮込みます。"
    }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "50"
  }
}
</script>

5. イベント (Event) の実装例

コンサートやセミナーなどのイベント情報を表示させたい場合に利用します。

<script type="application/ld+json">
{
  "@context": "<https://schema.org>",
  "@type": "Event",
  "name": "〇〇技術カンファレンス 2024",
  "startDate": "2024-07-20T10:00+09:00",
  "endDate": "2024-07-20T17:00+09:00",
  "location": {
    "@type": "Place",
    "name": "〇〇ホール",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "〇〇区〇〇1-2-3",
      "addressLocality": "東京都",
      "postalCode": "100-0000",
      "addressCountry": "JP"
    }
  },
  "image": "<https://www.example.com/images/conference-banner.jpg>",
  "description": "最新のWeb技術に関するカンファレンスです。",
  "offers": {
    "@type": "Offer",
    "price": "5000",
    "priceCurrency": "JPY",
    "url": "<https://www.example.com/tickets/>",
    "availability": "<https://schema.org/InStock>"
  },
  "performer": {
    "@type": "Person",
    "name": "技術太郎"
  }
}
</script>

JSON-LDの公式?サイト

どこに書く?HTMLへの構造化データの設置場所と注意点

作成したJSON-LD形式の構造化データは、WebページのHTML内に<script type="application/ld+json">タグで囲んで記述します。設置場所は、通常HTMLの<head>タグ内、またはコンテンツの直後など<body>タグ内のどこでも可能です。Googleはどちらでも問題ないとしていますが、一般的には<head>内に記述することが多いです。

設置場所の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>おしゃれなワイヤレスイヤホン</title>

    <!-- ここに構造化データを記述する -->
    <script type="application/ld+json">
    {
      "@context": "<https://schema.org/>",
      "@type": "Product",
      "name": "おしゃれなワイヤレスイヤホン",
      "image": "<https://www.example.com/images/wireless-earbuds.jpg>",
      "description": "高音質で長時間の利用が可能なワイヤレスイヤホンです。",
      "brand": {
        "@type": "Brand",
        "name": "サウンドマスター"
      },
      "offers": {
        "@type": "Offer",
        "url": "<https://www.example.com/product-page.html>",
        "priceCurrency": "JPY",
        "price": "9800",
        "itemCondition": "<https://schema.org/NewCondition>",
        "availability": "<https://schema.org/InStock>"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "reviewCount": "120"
      }
    }
    </script>
</head>
<body>
    <!-- ページのコンテンツ -->
    <h1>おしゃれなワイヤレスイヤホン</h1>
    <p>高音質で長時間の利用が可能なワイヤレスイヤホンです。</p>
    <img src="<https://www.example.com/images/wireless-earbuds.jpg>" alt="ワイヤレスイヤホン">
    <!-- 他のコンテンツ -->
</body>
</html>

注意点

  • HTMLとの整合性: 構造化データで記述する内容は、必ずWebページ上に表示されているコンテンツと一致させてください。ページに存在しない情報を構造化データとして記述すると、スパム行為とみなされ、ペナルティを受ける可能性があります。
  • 必須プロパティ: 各スキーマタイプには、Googleがリッチリザルトを表示するために必須とするプロパティがあります。これらが不足していると、リッチリザルトが表示されません。
  • 正確な情報の記述: 価格や在庫状況など、変動する可能性のある情報は常に最新の状態を保つようにしてください。
  • 複数スキーマの併用: 1つのページに複数の構造化データ(例: 記事とFAQ)を記述することも可能です。

実装後のテスト・運用・保守のノウハウ

構造化データの実装は、書いて終わりではありません。正しく機能しているかを確認し、定期的にメンテナンスを行うことが重要です。

Googleリッチリザルトテスト・構造化データテストツールの使い方

構造化データをHTMLに記述したら、それが正しく認識されるかテストすることが不可欠です。Googleは2つの便利なツールを提供しています。

Google リッチリザルトテスト:

目的: ページがリッチリザルト(リッチスニペット)の対象となるか、どのようなリッチリザルトが表示されうるかを確認するためのツールです。

使い方: Google リッチリザルトテストのページにアクセスし、テストしたいページのURLを入力するか、HTMLコードを直接貼り付けます。「URLをテスト」または「コードをテスト」をクリックすると、検出された構造化データと、それがリッチリザルトとして有効かどうか、エラーや警告がないかが表示されます。

ポイント: リッチリザルトの表示可能性を確認できるため、最も重要なツールです。エラーがある場合は、具体的な修正箇所が示されます。

構造化データテストツール (非推奨だが参考用):

目的: 現在は非推奨ですが、過去に広く使われていたツールで、記述された構造化データの詳細なパース結果(解析結果)を確認できます。

使い方: このツールも同様にURLまたはコードを入力してテストします。検出されたスキーマのタイプ、プロパティ、値などがツリー構造で表示され、デバッグに役立ちます。

ポイント: リッチリザルトテストで問題が解決しない場合や、より詳細な構造を確認したい場合に補助的に利用することがあります。

これらのツールを活用し、エラーや警告がゼロになるように修正を重ねましょう。

Google Search Consoleでエラー・警告が出た時の原因と修正方法

Google Search Console (GSC)は、サイトの検索パフォーマンスを監視し、構造化データに関する問題も報告してくれる重要なツールです。

「拡張」レポートの確認:

  • GSCの左メニューにある「拡張」セクションには、サイトで実装されている構造化データに関するレポートが表示されます(例: 「商品」「FAQ」「パンくずリスト」など)。
  • ここに表示されるレポートには、「有効」「有効(警告あり)」「エラー」の3つのステータスがあります。
    • 有効: 正しく実装されており、リッチリザルトが表示される可能性があります。
    • 有効(警告あり): 基本的には有効ですが、推奨されるプロパティが不足しているなど、改善の余地がある状態です。
    • エラー: 重大な問題があり、リッチリザルトが表示されません。

エラー・警告の一般的な原因と修正方法:

必須プロパティの不足: 各スキーマタイプにはGoogleが定義する必須プロパティがあります。これらが欠けているとエラーになります。

修正方法: Schema.orgの公式ドキュメントやGoogleの構造化データに関するドキュメントを確認し、不足しているプロパティを追加します。

値の形式の誤り: 日付の形式が正しくない、数値の代わりに文字列が入力されているなど、値の形式がスキーマの要件を満たしていない場合に発生します。

修正方法: スキーマで求められている正しいデータ形式(ISO 8601形式の日付、数値、URLなど)で記述し直します。

ページのコンテンツと不一致: 構造化データに記述された情報が、実際のWebページに表示されている内容と異なる場合です。これはスパムとみなされる可能性があります。

修正方法: ページに表示されている情報と構造化データの内容を完全に一致させます。

JSON構文エラー: JSONの記述ミス(例: カンマの抜け、括弧の閉じ忘れなど)もエラーの原因となります。

修正方法: JSONバリデーターツールなどを利用して構文エラーを特定し、修正します。

エラーや警告を修正したら、GSCで「修正を検証」を実行し、Googleに再クロールを促しましょう。

構造化データのSEO効果とCTR改善事例/運用・メンテナンスのポイント

構造化データは直接的な検索順位の向上に繋がる「ランキング要因」ではありませんが、間接的にSEO効果を高める非常に強力な要素です。最大の構造化データ メリットは、やはりCTR(クリック率)の改善にあります。

CTR改善事例

例えば、レシピサイトでレシピの構造化データを実装し、検索結果に星評価や調理時間が表示されるようになったとします。これにより、ユーザーは検索結果を見るだけで「このレシピは美味しそう(高評価)」「短時間で作れる」といった具体的な情報を得られ、他サイトよりも自サイトの検索結果をクリックする可能性が高まります。結果として、オーガニック検索からのトラフィックが増加し、SEOにおけるポジティブな効果が期待できます。

同様に、商品ページで価格やレビュー数が表示されれば、購入意欲の高いユーザーを引きつけやすくなります。FAQページであれば、検索結果で直接質問と回答が表示されることで、ユーザーの疑問を素早く解決し、サイトへの訪問を促すことができます。

運用・メンテナンスのポイント

  • 定期的なテスト: 新しいページを公開したり、既存のページを更新したりする際には、必ずGoogleリッチリザルトテストを使用して構造化データが正しく機能しているかを確認しましょう。
  • GSCの監視: Google Search Consoleの「拡張」レポートを定期的に確認し、新しいエラーや警告が発生していないかを監視します。問題があれば速やかに修正します。
  • コンテンツ更新時の修正: ページ内の情報(例: 商品価格、イベント日時、FAQの回答など)が変更された場合は、それに対応して構造化データも必ず更新してください。情報が古いままだと、ユーザーに誤った情報を提供してしまうだけでなく、Googleからの評価も下がる可能性があります。
  • Schema.orgの最新情報追従: Schema.orgの定義やGoogleの構造化データに関するガイドラインは、随時更新される可能性があります。最新情報を定期的にチェックし、必要に応じて実装を更新することも重要です。

よくある質問(FAQ)

構造化データは全てのページに必要ですか?

いいえ、全てのページに必須ではありません。構造化データは、そのページの主要なコンテンツタイプ(商品、記事、レシピなど)を明確に伝える目的で使用します。特に、リッチリザルトの対象となる可能性のあるページや、検索エンジンに特定の情報を強く伝えたいページに実装すると効果的です。

間違った構造化データを実装するとどうなりますか?

軽微な記述ミスであれば、リッチリザルトが表示されないだけで、大きなペナルティになることは稀です。しかし、意図的にページに表示されていない情報を記述するなどのスパム行為とみなされた場合は、手動ペナルティを受け、検索結果から表示されなくなる可能性があります。常にページのコンテンツと一致した、正確な情報を記述することが重要です。

構造化データのSEO効果はいつ頃から現れますか?

構造化データを実装した後、Googleがそのページをクロールし、内容を処理するまでには時間がかかります。通常、数日から数週間でリッチリザルトに変化が見られることが多いですが、保証された期間はありません。定期的にGoogle Search Consoleでレポートを確認し、インデックス状況を監視しましょう。

自分で実装が難しい場合、どうすれば良いですか?

ウェブサイトのCMS(WordPressなど)によっては、プラグインで構造化データの生成をサポートしている場合があります。また、Google Tag Managerを利用して、既存のHTMLを編集せずに構造化データを挿入する方法もあります。それでも難しい場合は、Web制作会社やSEO専門家への相談を検討するのも一つの手です。

まとめ

この記事では、構造化データの基礎知識から、Googleが推奨するJSON-LD形式での具体的な作り方、そして実装後のテスト・運用・保守のノウハウまでを詳しく解説しました。

構造化データは、検索エンジンがあなたのWebサイトをより深く理解し、その結果としてユーザーに対して魅力的で分かりやすい検索結果を提供するための強力な手段です。適切に実装することで、CTRの改善や、間接的ながらもSEOへの良い影響が期待できます。

ぜひこの記事を参考に、あなたのWebサイトに構造化データを実装し、リッチリザルト表示による検索パフォーマンスの向上を目指してください。最初は難しく感じるかもしれませんが、Googleの公式ツールを活用しながら、一つずつ取り組んでみましょう。

Bing検索の結果表示がGoogleと違う場合の直し方~Bing検索とGoogle検索の違いも説明
Bingの検索結果がGoogleと違っておかしいと感じた方へ。canonicalタグの見直しやBingWebマスターツールの活用、不要なURLの削除依頼方法など、検索結果を統一するための具体的な対策をわかりやすく解説しています。WordPress特有の注意点にも触れているので、サイト運営者は必見です。
タイトルとURLをコピーしました