III-B2 JSON-LD基礎を理解する
構造化データの実装形式として推奨されるJSON-LDの書き方の基本
このレッスンの狙い：JSON-LDの基本構文を読み書きできる
最終更新: 2026-07-23
この記事の要点
- JSON-LDの基本構文を読み書きできる
- JSON-LDの基本構造
- 配列と入れ子で表現する
前回のIII-B1で、構造化データが「検索エンジンやAIにページの意味を伝えるマークアップ」であることを確認しました。このレッスンでは、その実装形式として主流になっているJSON-LDの基本構文を、実際に読み書きできるレベルまで扱います。ここでの型を覚えておけば、次回以降のOrganization・Article・FAQPageといった具体的な実装(III-B3〜III-B5参照)がぐっと理解しやすくなります。
JSON-LDの基本構造
JSON-LDは、HTMLの<head>または<body>内に、次のような<script>タグとして書き込みます。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "AIO対策の基本を10分で理解する",
"datePublished": "2026-07-01"
}
</script>ポイントは3つのキーです。@contextは「この語彙はschema.orgの定義に従う」という宣言、@typeは「これは何の情報か」(この例ではArticle=記事)を示す型、そのほかのキー(headlineやdatePublishedなど)がその型に応じた具体的な中身にあたります。JSONの基本ルール(キーは二重引用符で囲む・カンマ区切りなど)さえ守れば、プログラマーでなくても読み書きできる形式です。
配列と入れ子で表現する
1つのプロパティに複数の値を持たせたいときは配列[ ]を、あるプロパティの中に別の情報をまるごと入れたいときは入れ子(オブジェクトの中にオブジェクト)を使います。たとえば著者情報を入れ子で表現すると次のようになります。
{
"@type": "Article",
"headline": "AIO対策の基本を10分で理解する",
"author": {
"@type": "Person",
"name": "鈴木晋介"
}
}authorの中にPersonという別の型がまるごと入っている形です。この「型の中に型を入れる」考え方が、次のOrganization・Person(III-B3参照)以降でも繰り返し出てきます。
複数の情報をつなげる@graphと@id
ページ内にArticleとOrganizationなど複数の型を同時に書きたい場合は、@graphという配列でまとめ、@idという共通の目印で関連づけます。@graphと@idの組み合わせは、記事・著者・組織といった情報を孤立させずに1つのまとまりとして伝えるための仕組みで、実務ではIII-B3以降の実装で頻繁に使うことになります。
JSON-LDとMicrodata・RDFaの違い
構造化データの記法にはJSON-LD以外にMicrodata・RDFaもあります。
| 記法 | 書く場所 | 特徴 |
|---|---|---|
| JSON-LD | HTML本文と分離した<script> | 実装・修正がしやすく2026年時点で主流 |
| Microdata | HTMLタグに属性として直接埋め込む | 本文とマークアップが混在し保守しづらい |
| RDFa | HTMLタグに属性として直接埋め込む | Microdataに近い書き方で採用例は少ない |
CMSへの組み込みやすさ、複数エンティティを@graphでつなげる際の見通しの良さから、本講座ではJSON-LDでの実装を前提に進めます。
実践ステップ
- 自社サイトの任意の記事ページのソースコードを開く
application/ld+jsonを検索し、既存のJSON-LDがあればその@typeを確認する- 上記の
Articleのサンプルを手元のテキストエディタにコピーし、headlineとdatePublishedを自社の記事情報に書き換えてみる - JSON構文チェッカー(オンラインの無料ツールで可)に貼り付け、構文エラーがないか確認する
authorを入れ子で追加し、Person型で著者名を入れてみる- 慣れてきたら
@graphを使い、ArticleとOrganizationを1つのJSON-LDにまとめてみる
まとめ
JSON-LDは、@contextと@typeを軸に、プロパティを追加していくシンプルな構造を持つマークアップ形式です。配列・入れ子・@graphと@idという3つの表現方法を押さえておけば、複数の情報を整理して伝えられるようになります。Microdata・RDFaという選択肢もありますが、実装のしやすさから本講座はJSON-LDを軸に進めます。ここで押さえた書き方さえ手元にあれば、III-B3のOrganization・Person実装はもう構文でつまずかないはずです。
このレッスンはテキストとスライドで学べます。スライドは上のビューアからご覧ください。
確認テスト
選択肢をクリックすると、その場で正誤と解説が表示されます。
Q1. JSON-LDは、HTML本文とは別に独立した<script>タグとして書くことができる。
JSON-LDはHTMLの<head>または<body>内に<script type="application/ld+json">として書き込みます。
Q2. JSON-LDで「これは何の情報か」(型)を示すキーはどれか。
@typeがこれは何の情報かを示す型を表します。
Q3. ページ内で複数の型(ArticleやOrganizationなど)を1つにまとめて関連づける仕組みは何か。
@graphという配列でまとめ、@idという共通の目印で関連づけます。
このレッスンのFAQ
Q. JSON-LD・Microdata・RDFaのうち、本講座で前提にするのはどれですか？
JSON-LDです。実装・修正のしやすさから本講座ではJSON-LDでの実装を前提に進めます。
Q. JSON-LDに複数の値を持たせたいときはどう書きますか？
配列[ ]を使います。あるプロパティの中に別の情報をまるごと入れたい場合は入れ子(オブジェクトの中にオブジェクト)を使います。
Q. Microdata・RDFaはJSON-LDと何が違いますか？
MicrodataとRDFaはHTMLタグに属性として直接埋め込む記法で、本文とマークアップが混在し保守しづらいという特徴があります。