Webサイトを運営する上で、「検索結果でもっと目立ちたい」「競合サイトと差をつけたい」と考えるのは当然のことです。そのための強力な武器の一つが、今回解説する**「JSON-LD」**です。
JSON-LDを正しく設定することで、検索結果に評価の星マークやFAQ、商品価格などを表示させる「リッチリザルト」が実現可能になり、ユーザーのクリック率を大きく向上させることが期待できます。
この記事では、JSON-LDとは何かという基本から、そのSEOにおける有効性、そして初心者でもコピー＆ペーストで実践できる具体的な書き方まで、マニュアル形式で徹底的に解説します。
第1章：JSON-LDとは？ なぜ今、重要なのか
まず、JSON-LDがどのようなもので、なぜSEOにおいて有効とされるのかを理解しましょう。
1.1. 構造化データという「翻訳機」
検索エンジン（Googleのクローラー）は、Webページに書かれているテキストを読み取ることはできますが、その「意味」を人間のように正確に理解することはできません。例えば、「山田太郎」が人名なのか会社名なのか、「2024-10-26」がイベントの開催日なのか記事の公開日なのかを判断するのは困難です。
そこで登場するのが**「構造化データ」**です。構造化データとは、ページ上の情報が「何であるか」を検索エンジンが理解できる共通の言語でタグ付けし、意味を伝えるための記述です。いわば、Webページの内容を検索エンジンに正しく伝えるための「翻訳機」のような役割を果たします。
構造化データをページに追加する理由
構造化データを追加することで、よりユーザーの興味をひく検索結果を表示できるようになり、ウェブサイトの利用も増えることが期待されます。これはリッチリザルトと呼ばれます。サイトに構造化データを実装しているウェブサイトの実例をいくつかご紹介します。
- Rotten Tomatoes では、構造化データを 10 万ページに追加した結果、構造化データを含むページでのクリック率が、構造化データのないページに比べ 25% 増加しました。
- The Food Network では、全ページの 80% で検索結果の機能を有効にした結果、アクセス数が 35% 増加しました。
- 楽天では、構造化データを実装したページでのユーザーの滞在時間が、構造化データのないページに比べ 1.5 倍長くなりました。また、検索機能がある AMP ページでのインタラクション率は、検索機能がない AMP ページに比べ 3.6 倍高くなっています。
- Nestlé では、検索でリッチリザルトを表示するページのクリック率が、表示しないページに比べ 82% 高くなっています。
1.2. なぜ「JSON-LD」が推奨されるのか？
構造化データを記述する方法（シンタックス）にはいくつか種類がありますが、現在、**Googleが公式に推奨しているのが「JSON-LD」**です。
| 形式 | 特徴 |
| JSON-LD（推奨） | <script>タグ内にまとめて記述するため、HTML本体と分離できる。管理がしやすく、既存のHTMLに影響を与えずに実装可能。 |
| microdata / RDFa | HTMLタグに直接属性を書き込んでいくため、記述が複雑になりがちで、管理も煩雑になる。 |
JSON-LDは、初心者にとっても扱いやすく、エラーが起きにくいという大きなメリットがあります。
1.3. JSON-LDがもたらす絶大なSEO効果
構造化データをJSON-LDで記述することには、主に2つの大きなメリットがあります。
メリット1：リッチリザルトによるクリック率（CTR）の向上
JSON-LDの最大のメリットは、検索結果をより豊かで魅力的にする**「リッチリザルト（旧称：リッチスニペット）」**を表示できる可能性が生まれることです。
通常の検索結果はタイトル、URL、説明文で構成されていますが、リッチリザルトでは評価の星マーク、価格、在庫情報、画像、FAQなどが追加で表示されます。これにより、検索結果画面で自サイトが格段に目立ち、ユーザーの注意を引くことでクリック率（CTR）の大幅な向上が期待できます。
メリット2：検索エンジンによるコンテンツ理解の深化
JSON-LDは、検索順位を直接引き上げるものではありません。しかし、ページの内容を検索エンジンに正確に伝えることで、Googleがそのコンテンツの価値を正しく評価する手助けをします。結果として、より適切なキーワードで評価されやすくなるなど、間接的なSEO効果が見込めます。
第2章：JSON-LDの書き方マニュアル【コピー＆ペーストで実践】
ここからは、具体的なJSON-LDの書き方を解説します。基本構造を理解すれば、あとはテンプレートに合わせて情報を書き換えるだけで実践できます。
2.1. 基本構造を理解する
JSON-LDは、<script type="application/ld+json">というタグで囲み、その中に{}で括られた情報を記述します。
HTML
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "（ここにタイプ名）",
"（プロパティ名）": "（値）",
"（プロパティ名）": "（値）"
}
</script>
@context: 「どの辞書を使いますか？」という宣言です。通常はGoogleが推奨するhttps://schema.orgを指定します。@type: 「何についての情報ですか？」という種類（タイプ）を指定します。「記事」ならArticle、「商品」ならProductといった具合です。- プロパティと値:
@typeで指定した種類に応じて、「名前」や「著者」といった具体的な情報（プロパティ）とその内容（値）を記述していきます。
2.2. 【実践例1】ブログ記事（Article）の書き方
ブログ記事やニュース記事に最適な、最も基本的な構造化データです。
▼コピー＆ペースト用テンプレート
HTML
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事のタイトルをここに記述",
"image": "記事のメイン画像のURLをここに記述",
"author": {
"@type": "Person",
"name": "著者名をここに記述"
},
"publisher": {
"@type": "Organization",
"name": "サイト運営者名（企業名など）をここに記述",
"logo": {
"@type": "ImageObject",
"url": "サイトのロゴ画像のURLをここに記述"
}
},
"datePublished": "2025-10-26",
"dateModified": "2025-10-27"
}
</script>
▼各項目の説明
| プロパティ | 説明 |
headline |
記事のタイトルを記述します。 |
image |
記事のアイキャッチ画像などのURLを記述します。 |
author |
記事の著者情報を記述します。個人ならPerson、組織ならOrganizationを指定します。 |
publisher |
記事の発行者（サイト運営者）の情報を記述します。 |
datePublished |
記事の公開日を「YYYY-MM-DD」形式で記述します。 |
dateModified |
記事の最終更新日を「YYYY-MM-DD」形式で記述します。 |
2.3. 【実践例2】パンくずリスト（BreadcrumbList）の書き方
パンくずリストを構造化データでマークアップすると、検索結果のURL部分が階層表示になり、ユーザーがサイト構造を理解しやすくなります。
▼コピー＆ペースト用テンプレート（3階層の例）
HTML
<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/category/"
},{
"@type": "ListItem",
"position": 3,
"name": "現在のページ名",
"item": "https://example.com/category/page/"
}]
}
</script>
▼各項目の説明
| プロパティ | 説明 |
itemListElement |
パンくずリストの各階層を“の中に記述します。 |
position |
階層の順番を数字で指定します（トップが1）。 |
name |
その階層の表示名（例：「ホーム」）を記述します。 |
item |
その階層のURLを記述します。 |
2.4. 【実践例3】FAQページの書き方
FAQページに設定すると、検索結果に質問と回答がアコーディオン形式で表示される可能性があり、非常に目立ちます。
▼コピー＆ペースト用テンプレート
HTML
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "質問1のテキストをここに記述",
"acceptedAnswer": {
"@type": "Answer",
"text": "回答1のテキストをここに記述します。"
}
}, {
"@type": "Question",
"name": "質問2のテキストをここに記述",
"acceptedAnswer": {
"@type": "Answer",
"text": "回答2のテキストをここに記述します。"
}
}]
}
</script>
▼各項目の説明
| プロパティ | 説明 |
mainEntity |
質問と回答のセットを“の中に記述します。 |
Question |
質問一つ分のかたまりです。 |
name |
質問文を記述します。 |
acceptedAnswer |
回答のかたまりです。 |
text |
回答文を記述します。 |
注意： FAQ構造化データに記述する内容は、必ずページ上に表示されている必要があります。
2.5.ルールは3つです。
1. 単語は「”」で囲い「:」で分け、意味の区切りで「,」を使う
単語は「”(ダブルクォーテーションマーク)」の中に書き、「”」で囲った2つの単語の間には「:(コロン)」が入ります。
また、CSSと同じように、意味の区切りで「,(カンマ)」を使いましょう。
2. 最初に使用するボキャブラリーを宣言する
検索エンジンにどの種類のライブラリを使って記述するかを宣言しましょう。
今回は”schema.org”です。
3. @typeで要素を定義する
@typeは、直前の単語の種類を定義する記述です。
- “image” : {
- “@type” : “ImageObject”,
- “url” : “画像パス”,
- “height” : 画像の高さ,
- “width” : 画像の横幅
- },
例えば上記の記述は、@typeでimageに対して「imageOcject」という定義をした後に、画像パス、画像の高さ、画像の横幅を定義しています。
- “author” : {
- “@type” : “Person”,
- “name” : “記事の著者”
- },
この部分の記述で、@typeでPersonと定義した後にはnameで名前を定義しているように、@typeで定義した種類によって、それ以降に定義できる要素が決まっています。
ちなみに、4行目の@typeだけ他の@typeと記述の仕方が違うように見えますが、これはWebページそのものを対象に定義している記述です。
以上の3つのルールさえ理解すれば、あとはボキャブラリーを確認しながらコードを記述することができます。
2.6.構造化データマークアップのコードの意味
下記の表に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単語目以降の頭文字を大文字にしてくっつけるというプログラミングのルールがありますので、気を付けましょう。
第3章：実装とテスト – サイトへの導入と確認方法
コードを作成したら、サイトに実装し、正しく認識されるかを確認します。
3.1. サイトへの実装方法
作成した<script>タグ全体をコピーし、対象ページのHTML内に貼り付けます。<head>タグ内、または<body>タグ内のどこに記述しても構いません。
- WordPressの場合：
- プラグインを利用する： 「Markup (JSON-LD) structured in schema.org」のような専用プラグインや、多くの高機能なSEOプラグイン（Yoast SEO, Rank Mathなど）には、構造化データを簡単に追加する機能が備わっています。
- 手動で追加する： テーマの機能（例：「headタグ内へのコード挿入」）や、コード挿入用のプラグインを使って、生成したコードを貼り付けます。
3.2. 実装内容をテストする
実装した構造化データが正しいかどうかを必ずテストします。Googleは公式のテストツールを無料で提供しています。
- リッチリザルトテストGoogleがそのページをリッチリザルトの対象として認識できるかを確認するツールです。URLまたはコードスニペットを貼り付けてテストします。エラーがあれば修正箇所を指摘してくれます。
- スキーママークアップ検証ツールより汎用的な構造化データの構文チェックツールです。リッチリザルト対象外のタイプも検証できます。
3.3. Google Search Consoleで監視する
実装後、Google Search Consoleでサイトがどのように認識されているかを継続的に監視します。
- 左メニューの**「拡張」**セクションに、「パンくずリスト」や「よくある質問」といった項目が表示され、有効なアイテム数やエラーの有無を確認できます。
第4章：よくある質問とトラブルシューティング
Q1. 構造化データを追加したのに、リッチリザルトが表示されません。
A1. いくつかの原因が考えられます。
- 記述ミスがある： 「リッチリザルトテスト」でエラーが出ていないか再確認してください。
- Googleにまだ認識されていない： ページがクロールされるまで時間がかかる場合があります。Search Consoleの「URL検査」ツールでインデックス登録をリクエストすると、プロセスを早められることがあります。
- ガイドライン違反： 構造化データの内容がページ上に表示されていないなど、Googleのガイドラインに違反している可能性があります。
- 表示は保証されていない： 最も重要な点として、構造化データを正しく実装しても、リッチリザルトの表示はGoogleのアルゴリズムによって決定され、100%保証されるものではありません。検索キーワードやユーザーの状況によって表示されたりされなかったりします。
Q2. どのページから始めればいいですか？
A2. まずは、サイトの主要なページ（トップページ、主要なサービスページ、最もアクセスの多いブログ記事など）から始めるのが効果的です。
Q3. ツールを使ってもっと簡単に作成できませんか？
A3. はい、可能です。Googleの**「構造化データ マークアップ支援ツール」**を使えば、URLを指定して画面上でテキストを選択するだけで、JSON-LDコードを自動生成できます。初心者の方には非常におすすめです。
まとめ
JSON-LDによる構造化データの実装は、もはや高度なSEOテクニックではなく、サイトの価値を検索エンジンに正しく伝え、ユーザーの目に留まる機会を増やすための基本的な施策となりつつあります。
直接的なランキング向上効果はありませんが、検索結果での視認性を高め、クリック率を改善することは、トラフィック増加に大きく貢献します。本稿をマニュアルとして、まずはあなたのサイトの重要なページから、JSON-LDの実装に挑戦してみてください。
コメント