0Pricing
Sveltejs Academy · レッスン

SvelteKitのJSON-LD構造化データ

JSON-LDスキーマを埋め込み、検索エンジンがコンテンツを理解しやすくします。

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

構造化データ

JSON-LDを使うと、検索エンジンが理解できる機械可読形式でページの内容を記述できます。

scriptタグの追加

svelte:headに<script type="application/ld+json">を含めます。

<svelte:head>
  {@html jsonLd}
</svelte:head>

JSONの構築

ページを説明するJSオブジェクトを文字列化します。

$: jsonLd = `<script type="application/ld+json">${JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Article",
  headline: post.title
})}<\/script>`;

スキーマの種類

一般的な種類には、Article、Product、Recipe、Event、Organization、BreadcrumbListがあります。

SEO上のメリット

検索結果にリッチスニペットとして星評価、価格、パンくずリスト、FAQアコーディオンなどを表示できます。

Google Search Console

Googleの構造化データテストツールでJSON-LDを検証します。

複数のスキーマ

1つのページに、異なるスキーマ用のJSON-LDブロックを複数含めることができます。

スパムを避ける

実際にページに存在する内容だけを記述してください。スキーマを操作すると、手動によるペナルティを受ける可能性があります。

保守性

データを受け取り、一般的なページの種類に対応するJSON-LD文字列を返すヘルパーを作成します。

ローカライズ

国際SEOに対応するため、nameやdescriptionなどのフィールドをロケールごとに翻訳します。

OGとの組み合わせ

JSON-LDとOGタグは互いに補完し合います。どちらもページの発見性と共有性を高めます。

簡単な確認

JSON-LDはどのような形式を使いますか？

まとめ

svelte:headにschema.orgのJSON-LDを埋め込むと、検索結果のリッチな機能とSEOの向上につながります。

よくある質問

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

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

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

JSON-LDスキーマを埋め込み、検索エンジンがコンテンツを理解しやすくします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

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

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

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

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

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

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

  1. 動的メタタグのsvelte:head
  2. OpenGraphとTwitter Cardのメタデータ
  3. SvelteKitのJSON-LD構造化データ
  4. Canonical URLとサイトマップの生成
← Sveltejs Academyに戻る