構造化データ入門｜初心者でもわかるJSON-LDの書き方

構造化データ（JSON-LD）を実装すると、Google検索でFAQが直接表示される「リッチリザルト」が獲得でき、CTRが平均20〜30%向上するだけでなく、AI Overview（AI生成回答）で引用される確率が1.4倍高まるというSEOClarityの調査データがあります。

「構造化データ」という言葉は難しく聞こえますが、実際にはHTMLファイルに数行のJSONコードを追加するだけです。本記事では、プログラミング初心者でも理解できるよう、構造化データの基礎から4種類のテンプレート、WordPress・Next.jsでの実装方法まで、ステップバイステップで解説します。

構造化データの基礎知識

そもそも構造化データとは？

Webページには2種類の情報があります。

Googleのクローラーや生成AIは、Webページのテキストを「意味」まで完全に理解することが難しい場合があります。構造化データを追加することで、「このページが何を提供しているか」を機械語で直接伝えられるのです。

構造化データを実装するとどうなるか

JSON-LDとは？なぜ推奨されるのか

構造化データの記述形式には3種類ありますが、Googleが最も推奨するのはJSON-LD形式です。

JSON-LDが推奨される理由は**「既存のHTMLコードを変更せずに追加できる」**からです。scriptタグを1つ追加するだけで実装できるため、CMSやフレームワークを問わず導入しやすいです。

JSON-LDの基本構造

共通の書き方

すべてのJSON-LDスキーマに共通する基本構造は以下の通りです。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "スキーマのタイプ名",
  "プロパティ名": "値"
}
</script>

4種類のJSON-LDテンプレート

テンプレート1: FAQPage（最優先で実装）

FAQページやFAQセクションに実装するスキーマです。Google検索でアコーディオン形式のリッチリザルトが表示され、AI Overviewでも引用されやすくなります。

必須プロパティ:

FAQPageのテンプレートコード:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "質問文1をここに記入",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "回答文1をここに記入。100〜200文字程度が理想的です。"
      }
    },
    {
      "@type": "Question",
      "name": "質問文2をここに記入",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "回答文2をここに記入。"
      }
    }
  ]
}
</script>

注意点: FAQ項目は最低2問（推奨3〜10問）。同じページに複数のFAQPageスキーマを実装しないこと。

テンプレート2: Article（ブログ・コンテンツページ）

ブログ記事・コラム・ニュース記事に実装するスキーマです。著者情報・公開日・更新日をGoogleに正確に伝えられ、E-E-A-Tの評価向上に寄与します。

Articleの主要プロパティ:

ArticleのテンプレートコードとISO 8601形式（YYYY-MM-DD）:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "記事タイトルをここに入力（110文字以内）",
  "image": "https://example.com/images/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "著者名",
    "url": "https://example.com/author/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "会社名・メディア名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2026-04-04",
  "dateModified": "2026-04-04",
  "description": "記事の説明文を160文字以内で記入"
}
</script>

テンプレート3: LocalBusiness（店舗・地域ビジネス）

実店舗を持つビジネス（飲食店・美容室・士業・クリニック等）に必須のスキーマです。Googleマップとの連携でローカル検索の上位表示に貢献します。

LocalBusinessの主要プロパティ:

LocalBusinessのテンプレートコード:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "店舗名",
  "image": "https://example.com/shop-image.jpg",
  "url": "https://example.com/",
  "telephone": "+81-3-1234-5678",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "〇〇町1-2-3",
    "addressLocality": "渋谷区",
    "addressRegion": "東京都",
    "postalCode": "150-0001",
    "addressCountry": "JP"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 35.6580,
    "longitude": 139.7016
  },
  "openingHours": ["Mo-Fr 11:00-22:00", "Sa-Su 10:00-23:00"],
  "priceRange": "¥¥"
}
</script>

@typeの主なビジネスタイプ一覧:

テンプレート4: HowTo（手順・ハウツーコンテンツ）

手順を説明するハウツー記事に実装するスキーマです。Google検索でステップリストが表示され、音声検索・AI検索での引用率も高まります。

HowToの主要プロパティ:

HowToのテンプレートコード:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "〇〇の方法（タイトル）",
  "description": "このハウツーの概要説明",
  "totalTime": "PT30M",
  "step": [
    {
      "@type": "HowToStep",
      "name": "ステップ1のタイトル",
      "text": "ステップ1の詳細な説明をここに記入。"
    },
    {
      "@type": "HowToStep",
      "name": "ステップ2のタイトル",
      "text": "ステップ2の詳細な説明をここに記入。"
    },
    {
      "@type": "HowToStep",
      "name": "ステップ3のタイトル",
      "text": "ステップ3の詳細な説明をここに記入。"
    }
  ]
}
</script>

WordPressでの実装方法

プラグインを使った実装（推奨）

プログラミング知識がない場合は、プラグインを使うのが最も簡単です。

Yoast SEOでFAQPageを実装する手順:

手動でコードを追加する方法

テーマのfunctions.phpまたはheadタグ内に直接コードを追加する方法です。

functions.phpに追加する場合（ページ別に切り替え）:

function add_schema_markup() {
    if ( is_page('faq') ) {
        echo '<script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [...]
        }
        </script>';
    }
}
add_action( 'wp_head', 'add_schema_markup' );

Next.jsでの実装方法

App RouterでのJSON-LD実装

Next.js 14（App Router）では、各ページのレイアウトまたはページコンポーネント内でJSON-LDを実装します。

ページコンポーネントへの実装例（page.tsx）:

export default function FaqPage() {
  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "質問文1",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "回答文1"
        }
      }
    ]
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      {/* ページのコンテンツ */}
    </>
  );
}

MDXブログ記事でのArticleスキーマ実装（layout.tsx）:

export default function BlogLayout({ children, params }) {
  const articleSchema = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "記事タイトル",
    "datePublished": "2026-04-04",
    "author": {
      "@type": "Organization",
      "name": "会社名"
    }
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
      />
      <article>{children}</article>
    </>
  );
}

実装後の確認・テスト方法

Googleのリッチリザルトテストの使い方

よくあるエラーと修正方法

構造化データ実装の優先順位

どのページに何のスキーマを実装すべきか、優先順位をまとめます。

まとめ

構造化データ（JSON-LD）は、「コンテンツを書く労力に比べて、実装コストが非常に低く、SEO効果が高い」 という特徴があります。

今日から実施できる3ステップ:

まずこの3ステップを実施し、その後Article・HowToを順次追加していくことを推奨します。

関連記事

• AI Overview対策｜GEO（生成エンジン最適化）の実践方法
• AI検索対策｜プラットフォーム別の実践方法
• AIO対策｜AI Overviewに表示させる5つの方法

AIO対策・構造化データ実装をプロに依頼したいですか？

構造化データの設計・実装から、AI Overview引用率を高めるコンテンツ設計まで、AIO対策をワンストップで支援。AIO診断100,000円〜、月次スタンダード150,000円〜。AIO対策サービスの詳細はこちら →