構造化データと JSON-LD：SEO リッチスニペットの完全実装ガイド
前端工程（更新: 2026年6月7日）
構造化データとは？
構造化データは Schema.org 語彙表に従って組織化された標準化データ形式で、検索エンジンがページ内容の語義的意味を理解し、検索結果にリッチスニペットを表示できるようにします。
3 つの埋め込み形式の比較
| 形式 | 埋め込み方法 | Google 推奨 | 保守性 |
|---|---|---|---|
| JSON-LD | <script type="application/ld+json"> |
推奨 | 優 |
| Microdata | HTML 属性 itemscope/itemprop |
非推奨 | 低 |
| RDFa | HTML 属性 vocab/property |
非推奨 | 低 |
Google は公式に JSON-LD を推奨しています。HTML コンテンツと分離されており、保守が容易なためです。
JSON-LD 基礎構文
基本構造
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事タイトル",
"description": "記事の説明",
"author": {
"@type": "Person",
"name": "山田太郎"
},
"datePublished": "2026-06-07",
"dateModified": "2026-06-07"
}
</script>
複数タイプの組み合わせ
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "..."
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [...]
}
]
</script>
よく使う構造化データタイプ
1. Article（記事）
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Web Animations API と高性能アニメーション",
"description": "Web Animations API と CSS アニメーションの性能差を深く比較",
"image": "https://toolsku.com/og/blog-animation.png",
"author": {
"@type": "Organization",
"name": "ToolsKu チーム",
"url": "https://toolsku.com"
},
"publisher": {
"@type": "Organization",
"name": "ToolsKu",
"logo": {
"@type": "ImageObject",
"url": "https://toolsku.com/logo.png"
}
},
"datePublished": "2026-06-06",
"dateModified": "2026-06-06",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://toolsku.com/blog/web-animations-api-performance"
}
}
2. FAQPage（よくある質問）
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "JSON-LD と Microdata の違いは？",
"acceptedAnswer": {
"@type": "Answer",
"text": "JSON-LD は独立した script タグで埋め込み、HTML と分離されます。Microdata は HTML 属性でインライン展開するため保守が困難です。Google は JSON-LD を推奨しています。"
}
},
{
"@type": "Question",
"name": "構造化データが Google に認識されるまでどのくらいかかりますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "通常数日から数週間かかります。クロール頻度に依存します。Search Console の拡張機能レポートで状態を確認できます。"
}
}
]
}
3. HowTo（チュートリアル手順）
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "JSON-LD 構造化データの追加方法",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "ページタイプを決定",
"text": "ページ内容に基づいて適切な Schema.org タイプ（Article、Product、FAQPage など）を選択します。"
},
{
"@type": "HowToStep",
"position": 2,
"name": "JSON-LD を記述",
"text": "Schema.org 仕様に従って JSON-LD データを記述し、すべての必須フィールドが揃っていることを確認します。"
},
{
"@type": "HowToStep",
"position": 3,
"name": "ページに埋め込み",
"text": "JSON-LD を <script type=\"application/ld+json\"> タグ内に配置し、<head> または <body> に配置します。"
},
{
"@type": "HowToStep",
"position": 4,
"name": "検証とテスト",
"text": "Google リッチ結果テストツールで構造化データが正しいことを検証します。"
}
]
}
4. BreadcrumbList（パンくずナビ）
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://toolsku.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "ブログ",
"item": "https://toolsku.com/blog"
},
{
"@type": "ListItem",
"position": 3,
"name": "構造化データと JSON-LD",
"item": "https://toolsku.com/blog/structured-data-json-ld"
}
]
}
5. SoftwareApplication（ツールアプリ）
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "CSS アニメーションジェネレーター",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Web",
"description": "オンライン CSS アニメーションコード生成・プレビューツール",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "JPY"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "256"
}
}
Next.js での JSON-LD 実装
next/script を使用
import Script from 'next/script';
function BlogPost({ post }) {
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: post.title,
description: post.description,
author: {
'@type': 'Organization',
name: 'ToolsKu チーム',
},
datePublished: post.publishedAt,
dateModified: post.updatedAt,
};
return (
<>
<Script
id="json-ld"
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<article>{post.content}</article>
</>
);
}
metadata API の使用（Next.js 15+）
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.description,
openGraph: {
title: post.title,
description: post.description,
type: 'article',
publishedTime: post.publishedAt,
modifiedTime: post.updatedAt,
},
};
}
Google リッチスニペット効果
| 構造化データタイプ | リッチスニペット効果 | CTR 向上 |
|---|---|---|
| Article | 著者アバター、公開日 | +20-30% |
| FAQPage | FAQ 折りたたみ展開 | +30-50% |
| HowTo | 手順リスト | +20-40% |
| BreadcrumbList | パンくずパス | +10-15% |
| SoftwareApplication | 評価、価格 | +25-35% |
検証とデバッグ
Google リッチ結果テスト
Rich Results Test にアクセスし、ページ URL を入力するか HTML コードを貼り付けます。
Schema.org バリデーター
Schema Markup Validator で JSON-LD 構造が仕様に準拠しているか検証します。
Search Console モニタリング
Search Console → 拡張機能 → 構造化データ
- 有効/無効項目数を確認
- 具体的なエラーを特定
- Google 認識の進捗を監視
よくあるエラーのトラブルシューティング
| エラー | 原因 | 修正 |
|---|---|---|
| 必須フィールド不足 | required プロパティが未提供 | headline、datePublished 等を補完 |
| タイプ不一致 | 値の型が Schema 定義と合わない | date は ISO 8601 形式を使用 |
| 重複構造化データ | 同一内容の重複宣言 | 配列に統合または重複を削除 |
| 無効な URL | URL 形式エラーまたは到達不能 | 完全な絶対パスを使用 |
ベストプラクティス
- ページ内容に合ったタイプのみ宣言：ブログは Article、ツールは SoftwareApplication
- datePublished と dateModified は ISO 8601：
2026-06-07または2026-06-07T08:00:00+08:00 - image は絶対 URL：
https://toolsku.com/og/image.png - データを捏造しない：Google は誤解を招く構造化データに手動措置を取る可能性あり
- Open Graph と補完関係：JSON-LD は検索エンジン向け、OG はソーシャルメディア向け
まとめ
JSON-LD は構造化データ実装の最適なアプローチです。Schema.org 語彙表を通じて検索エンジンに語義情報を提供し、リッチスニペット表示率とクリック率を大幅に向上させます。Next.js では next/script または metadata API で簡単に統合でき、Google リッチ結果テストと Search Console で効果を継続的にモニタリングできます。
OGプレビューツール で Open Graph タグを確認、サイトマップジェネレーター でページの発見可能性を確保、Robots.txt エディター でクローラーアクセスを制御できます。
ブラウザローカルツールを無料で試す →
#JSON-LD#结构化数据#SEO#Schema.org#富摘要