0Pricing
HTML Academy · レッスン

JSON-LD構造化データの基礎

JSON-LDで機械可読な構造化データを追加します

「JSON-LD構造化データの基礎」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

構造化データとは

構造化データは、ページの内容が記事、レシピ、商品、イベントのどれなのかを記述する、機械可読なJSONです。検索エンジンはこれを使って、通常の青いリンクではなく、星評価、レシピカード、パンくずリストなどのリッチリザルトを表示します。

推奨形式はJSON-LD

Googleが推奨する形式はJSON-LDです。headまたはbody内に、1つ以上のschema.orgオブジェクトを含む<script type="application/ld+json">ブロックを1つ記述します。表示されるHTMLから分離されているため、追加や更新にテンプレートの書き換えは必要ありません。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "author": { "@type": "Person", "name": "Ada Lovelace" },
  "datePublished": "2024-05-01"
}
</script>

@contextと@type

すべてのJSON-LDオブジェクトには@context(ほぼ常に"https://schema.org")と@type(Article、Recipe、Product、FAQPageなどのschema.orgクラス)が必要です。@contextは、プロパティ名がどの語彙に属するものかをパーサーに伝えます。

Articleの一般的なプロパティ

Articleには、headline、image(URLまたは配列)、datePublished、dateModified、author(PersonまたはOrganizationオブジェクト)、publisher(logoを含むOrganization)を指定します。これらは、Googleのトップニュースカルーセルがページを候補として検討するために必要な最小限のフィールドです。

Productスキーマ

商品ページでは、name、image、description、brand、skuと、price、priceCurrency、availabilityを含むoffersサブオブジェクトを持つ@type Productを宣言します。aggregateRatingと組み合わせると、Googleは検索結果に星評価と価格スニペットを直接表示できます。

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Coddy Plus",
  "offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}

Breadcrumbスキーマ

BreadcrumbListはナビゲーション階層を記述します。各itemListElementは、position、name、item(URL)を持つListItemです。指定すると、Googleはスニペット内のURL行をラベル付きのパンくずリストに置き換えるため、クリック数の増加につながります。

FAQとHowTo

FAQPageとHowToのスキーマは、以前はSERPでリッチリザルトのウィジェットを有効にしていました。Googleはその後、FAQのリッチリザルトを一部のサイトカテゴリ(gov、edu)に制限しましたが、マークアップは音声アシスタントやその他の利用者にとって今も有用です。実際のFAQページには残しておいてください。

表示されるページとの一致

Googleは、ユーザーに見える内容と一致しないマークアップをペナルティの対象にします。ページに表示されない5つ星評価を宣言したり、ユーザーに表示されない9.99ドルの価格を記載したりしないでください。構造化データは、レンダリングされたコンテンツを正確に説明する必要があります。

Rich Results Testでの検証

GoogleのRich Results Test(search.google.com/test/rich-results)は、任意のURLまたは貼り付けたコードを解析し、検出したスキーマタイプを一覧表示して、必須プロパティの不足を警告します。構造化データを変更する前に実行してください。

1ページに複数のスキーマ

同じページに複数のJSON-LDブロック(たとえばArticle + BreadcrumbList + Organization)を宣言したり、単一の@graph配列にまとめたりできます。どちらの形式も有効です。ビルドパイプラインでテンプレート化しやすい方を選んでください。

再レンダリングなしでの更新

JSON-LDは、表示コンテンツとは別のscriptタグ内にあります。更新するにはJSONブロックを再生成してください。インデックス登録前にGooglebotが常に確実にJSを実行するとは限らないため、クライアントサイドJavaScriptだけで構造化データを挿入してはいけません。

理解度チェック

有効な構造化データにするために、すべてのJSON-LDオブジェクトに必ず含める必要があるトップレベルプロパティはどの2つですか?

まとめ

JSON-LDは、1つのapplication/ld+jsonスクリプトブロック内で構造化データを宣言し、@contextと@typeによって各オブジェクトを識別します。一般的なスキーマ(Article、Product、BreadcrumbList)は、マークアップがページに表示される内容を正確に反映している場合に、検索結果のリッチリザルトを有効にします。デプロイ前にRich Results Testで検証してください。

よくある質問

「JSON-LD構造化データの基礎」レッスンは無料ですか?

はい。「JSON-LD構造化データの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「JSON-LD構造化データの基礎」で何を学びますか?

JSON-LDで機械可読な構造化データを追加します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「JSON-LD構造化データの基礎」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか?

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. OpenGraph og:title og:description og:image
  2. Twitter Cardのmetaタグ
  3. JSON-LD構造化データの基礎
  4. 国際化ページのhreflang
← HTML Academyに戻る