---
title: "JSON-LDとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "JSON-LDの基本的な意味と、AIで作ったHTMLやZIPサイトを公開・共有する際にどう関係するかを初心者向けに解説。書き方の最小例と検証手順も紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-json-ld-html-share"
markdown: "https://giga-site.com/articles/what-is-json-ld-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# JSON-LDとは？HTML共有・AI生成サイトでの意味をやさしく解説

「ページにJSON-LDを入れてください」と言われたとき、何をどこに書けばいいか迷う方は少なくありません。JSON-LDはJavaScriptのオブジェクト記法を使ってページのメタ情報を記述するフォーマットで、HTMLの見た目を一切変えずに検索エンジンへ構造化情報を伝えられます。AIで生成した静的サイトにも後から1ブロック追加するだけで有効になるため、手軽さが特徴です。

> Source HTML: https://giga-site.com/articles/what-is-json-ld-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

JSON-LD（JavaScript Object Notation for Linked Data）は、Schema.orgが定めた語彙を使ってページの種類・名前・作者・日付などを記述するデータ形式です。<script type="application/ld+json">タグの中にJSONオブジェクトを書くだけで機能するため、既存のHTMLタグに属性を追加する必要がありません。GoogleはJSON-LDを最も推奨する実装方式として公式ドキュメントに明記しています。

最小構成は「@contextにhttps://schema.org、@typeにWebPage、nameにページタイトル」の3行程度です。AIツールで生成したHTMLには既にこのブロックが含まれている場合があり、その中身が正確かどうかをリッチリザルトテストで確認するのが最初のステップになります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

Claudeやv0などのAIツールで生成したLPや提案資料HTMLを、ギガサイト便のようなサービスでURLとして外部共有する場合、JSON-LDに記述した「datePublished（公開日）」「author（作成者）」「description（概要）」がGoogleのインデックスに取り込まれます。後日Googleで社名や製品名を検索したときに正しい情報が表示されるかどうかに直結します。

メール本文にHTMLファイルを添付するのではなくURLで共有する方式では、受け取った側のブラウザがページをそのままレンダリングします。このとき<title>タグと並んでJSON-LDのnameフィールドがブラウザのタブ名に影響するブラウザはまれですが、Slackのリンクプレビューはdescriptionフィールドを参照するため、JSON-LDのdescriptionとOGPのog:descriptionを一致させておくのが安全です。

## よくある誤解

「JSON-LDはJavaScriptなので動的サイトにしか使えない」という誤解があります。実際には静的HTMLファイルに直接埋め込むテキストデータであり、JavaScriptエンジンで実行される処理ではありません。サーバーもNode.jsも不要で、メモ帳で編集したHTMLに貼り付けても同様に機能します。

「JSON-LDを書くとページ速度が落ちる」という心配もよく聞きますが、<script type="application/ld+json">はブラウザがJSとして評価・実行しないため、レンダリングをブロックしません。数百バイト〜数キロバイトのテキストが増えるだけで、PageSpeedスコアへの実質的な影響はほぼゼロです。

## 安全に使うための注意点

JSON-LDの中に内部システムURLやAPIエンドポイントを記述しないよう注意してください。たとえばSameAs（同一エンティティの別URL）に社内Confluenceや認証が必要なダッシュボードURLを書くと、ソースを見た外部の人にURLが漏れます。公開可能なプロフィールページや公式SNSアカウントのURLのみ記載しましょう。

AIツールが自動生成したJSON-LDには、@typeがWebPageだけで具体的なスキーマ型（Article、ProductなどE）が設定されていないことがあります。型が曖昧だとGoogleがリッチリザルトを表示しません。公開前にSearch Consoleのリッチリザルトテストで「検出された構造化データ」を確認し、意図した@typeが認識されているか検証してください。

## よくある質問

### JSON-LDを書くときに最低限必要なフィールドは何ですか？

@context（https://schema.org）と@type（WebPageやArticleなど）の2つが必須です。Googleのリッチリザルト対象にするにはtype別の必須フィールドが追加されるため、使いたいtype名で「Google リッチリザルト 必須フィールド」と検索して仕様を確認してください。

### JSON-LDとMicrodataはどちらを選べばよいですか？

Googleが推奨するJSON-LDを選ぶのが現在のベストプラクティスです。MicrodataはHTMLタグに属性を直接付与する方式で、テンプレートを変更しないと追加できないため、AI生成HTMLへの後付けにはJSON-LDが格段に楽です。

### JSON-LDを複数のスキーマ型に対応させるにはどうしますか？

@graphプロパティを使い、配列内に複数の型オブジェクトを並べます。例えばArticleとBreadcrumbListを同時に記述したい場合は{"@context":"https://schema.org","@graph":[{Article定義},{BreadcrumbList定義}]}の形式にします。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "JSON-LDとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "JSON-LDの基本的な意味と、AIで作ったHTMLやZIPサイトを公開・共有する際にどう関係するかを初心者向けに解説。書き方の最小例と検証手順も紹介します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-json-ld-html-share",
  "url": "https://giga-site.com/articles/what-is-json-ld-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "JSON-LDを書くときに最低限必要なフィールドは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "@context（https://schema.org）と@type（WebPageやArticleなど）の2つが必須です。Googleのリッチリザルト対象にするにはtype別の必須フィールドが追加されるため、使いたいtype名で「Google リッチリザルト 必須フィールド」と検索して仕様を確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "JSON-LDとMicrodataはどちらを選べばよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Googleが推奨するJSON-LDを選ぶのが現在のベストプラクティスです。MicrodataはHTMLタグに属性を直接付与する方式で、テンプレートを変更しないと追加できないため、AI生成HTMLへの後付けにはJSON-LDが格段に楽です。"
      }
    },
    {
      "@type": "Question",
      "name": "JSON-LDを複数のスキーマ型に対応させるにはどうしますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "@graphプロパティを使い、配列内に複数の型オブジェクトを並べます。例えばArticleとBreadcrumbListを同時に記述したい場合は{\"@context\":\"https://schema.org\",\"@graph\":[{Article定義},{BreadcrumbList定義}]}の形式にします。"
      }
    }
  ]
}
```