構造化データしたい（`JSON-LD`）

<head>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://example.com/",
        "name": "サイト名"
    }
    </script>
</head>

構造化データは、ページの内容を検索エンジンが理解できる形で書き添えるしくみです。うまく認識されると、検索結果にパンくずや記事の日付、レビューの星などが表示されることがあります（リッチリザルト）。

語彙（どんな種類・項目があるか）はSchema.orgで定義されています。書き方にはMicrodata、RDFa、JSON-LDの3つがあります。このうちJSON-LDは、HTML本体と分けてscriptタグにまとめて書けるため、CMSやテンプレートと相性がよく、いまの主流です。

scriptタグはhead内に置くのが一般的ですが、body内でもかまいません。

JSON-LDの書き方

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "記事のタイトル"
}
</script>

<script type="application/ld+json">の中に、JSON形式でデータを書きます。

@context … 常に"https://schema.org"。語彙の定義元を指します
@type … データの種類（WebSite、Article、BreadcrumbListなど）
それ以降 … その種類ごとに決まった項目

警告

中身はJSONなので、最後の項目の後ろにカンマを付けると構文エラーになります。（JavaScriptのオブジェクトと違い、末尾カンマは許されません）

書いたあとはリッチリザルトテストやスキーママークアップ検証ツールで確認します。

サイト情報を伝えたい（`WebSite`）

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "https://example.com/",
    "name": "サイト名",
    "description": "サイトの説明"
}
</script>

WebSiteは、サイト全体を表す種類です。トップページに1つ置きます。

urlとnameが基本の項目です。

記事情報を伝えたい（`Article`）

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "記事のタイトル",
    "description": "記事の概要",
    "image": "https://example.com/blog/1/ogp.png",
    "datePublished": "2026-08-30T09:00:00+09:00",
    "dateModified": "2026-08-31T12:00:00+09:00",
    "author": {
        "@type": "Organization",
        "name": "組織名"
    }
}
</script>

Articleは、ブログ記事やニュース記事を表す種類です。各記事ページに置きます。

項目には決まった型があります。

headline … 記事のタイトル（文字列）
image … 画像のURL（文字列）。絶対URLにします
datePublished / dateModified … 日時。2026-08-30または2026-08-30T09:00:00+09:00の形式（ISO 8601）
author … PersonまたはOrganizationのオブジェクト。名前だけの文字列にはしません

パンくずを伝えたい（`BreadcrumbList`）

<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/blog/"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "この記事のタイトル"
        }
    ]
}
</script>

BreadcrumbListは、いまページが階層のどこにいるかを表します。うまく認識されると、検索結果のURL部分がパンくず表示になります。

itemListElement … ListItemの配列
position … 1から始まる順番（数値）
item … そのページのURL。最後の項目（現在ページ）では省略します

BreadcrumbListは、画面に表示するパンくず（navタグ）を、検索エンジン向けに書き添えるものです。

参考

ナビゲーションしたい（nav）

構造化データしたい（JSON-LD）

JSON-LDの書き方

サイト情報を伝えたい（WebSite）

記事情報を伝えたい（Article）

パンくずを伝えたい（BreadcrumbList）

リファレンス

構造化データしたい（`JSON-LD`）

サイト情報を伝えたい（`WebSite`）

記事情報を伝えたい（`Article`）

パンくずを伝えたい（`BreadcrumbList`）