Communityコーディング&開発github.com

ブログスキーマ — JSON-LD構造化データ生成

ブログ記事用の完全かつ検証済みJSON-LDスキーママークアップを@graphパターンで生成します。複数のスキーマタイプを1つのスクリプトタグにまとめ、安定した@id参照でエンティティをリンクします。

ブログスキーマ — JSON-LD構造化データ生成 とは?

このスキルは、ブログ記事のJSON-LD構造化データを自動生成するためのものです。BlogPosting、Person、Organization、BreadcrumbList、FAQPage、ImageObject、VideoObjectの最大7種類のスキーマを@graphパターンで1つの<script>タグに統合し、検索エンジンとAIシステム(ChatGPT、Perplexity、Gemini)の両方に対して最適化されたマークアップを提供します。各エンティティは安定した@idフラグメントで相互参照され、特定のスキーマタイプ(HowTo、SpecialAnnouncementなど)の非推奨チェックや、文字数制限、画像サイズ、日付の整合性などのバリデーションも自動的に行います。対応プラットフォームはClaude Code、Cursor、CodexなどのAIエージェントで、出力形式は埋め込みHTML、スタンドアロンJSON、MDXコンポーネントから選択可能です。3つ以上のスキーマタイプを使用するページはAIからの引用確率が約13%向上することが確認されており、このスキルはAI抽出と検索エンジン理解の両方を最大化します。

対応~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/AgriciDaniel/claude-blog/tree/main/skills/blog-schema

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ブログスキーマ — JSON-LD構造化データ生成 は何をしますか?

ブログ記事用の完全かつ検証済みJSON-LDスキーママークアップを@graphパターンで生成します。複数のスキーマタイプを1つのスクリプトタグにまとめ、安定した@id参照でエンティティをリンクします。

ワークフロー

ステップ1: コンテンツの読み取り

ブログ記事を読み取り、スキーマに関連するすべてのデータを抽出します。

  • タイトル(見出し)
  • 著者(名前、役職、ソーシャルリンク、資格情報)
  • 日付(datePublished、dateModified / lastUpdated)
  • 説明(メタディスクリプション)
  • FAQセクション(質問と回答のペア)
  • 画像(カバー画像URL、寸法、代替テキスト、インライン画像)
  • 組織情報(サイト名、URL、ロゴ)
  • 文字数(コンテンツの長さからおおよそ)
  • タグ/カテゴリ(BreadcrumbListカテゴリ用)
  • スラッグ(ファイル名またはフロントマターから)

ステップ2: BlogPostingスキーマの生成

必要なプロパティと推奨プロパティをすべて含めた完全なBlogPostingを生成します。

{
  "@type": "BlogPosting",
  "@id": "{siteUrl}/blog/{slug}#article",
  "headline": "記事のタイトル(最大110文字)",
  "description": "メタディスクリプション(150〜160文字)",
  "datePublished": "YYYY-MM-DD",
  "dateModified": "YYYY-MM-DD",
  "author": { "@id": "{siteUrl}/author/{author-slug}#person" },
  "publisher": { "@id": "{siteUrl}#organization" },
  "image": { "@id": "{siteUrl}/blog/{slug}#primaryimage" },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{siteUrl}/blog/{slug}"
  },
  "wordCount": 2400,
  "articleBody": "コンテンツの最初の200文字を抜粋として..."
}

必須プロパティ: @type、headline、datePublished、author、publisher、image。 推奨プロパティ: description、dateModified、mainEntityOfPage、wordCount、articleBody(抜粋)。

ステップ3: Personスキーマの生成

相互参照のための安定した@idを持つ著者スキーマ。

{
  "@type": "Person",
  "@id": "{siteUrl}/author/{author-slug}#person",
  "name": "著者名",
  "jobTitle": "役職または肩書き",
  "url": "{siteUrl}/author/{author-slug}",
  "sameAs": [
    "https://twitter.com/handle",
    "https://linkedin.com/in/handle",
    "https://github.com/handle"
  ]
}

オプションプロパティ(利用可能な場合に含める):

  • alumniOf — 教育機関(Organizationタイプ)
  • worksFor — 雇用主(同じエンティティの場合はOrganizationの@idを参照)

ステップ4: Organizationスキーマの生成

ブログの親組織エンティティ。

{
  "@type": "Organization",
  "@id": "{siteUrl}#organization",
  "name": "組織名",
  "url": "{siteUrl}",
  "logo": {
    "@type": "ImageObject",
    "url": "{siteUrl}/logo.png",
    "width": 600,
    "height": 60
  },
  "sameAs": [
    "https://twitter.com/org",
    "https://linkedin.com/company/org",
    "https://github.com/org"
  ]
}

ロゴ要件: 有効な画像URLである必要があります。Googleはロゴの最小サイズ112x112px、最大幅600pxを推奨しています。BlogPostingの発行者には長方形のロゴが推奨されます。

ステップ5: BreadcrumbListの生成

コンテンツ階層を示すナビゲーションブレッドクラムスキーマ。

{
  "@type": "BreadcrumbList",
  "@id": "{siteUrl}/blog/{slug}#breadcrumb",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "{siteUrl}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "カテゴリ名",
      "item": "{siteUrl}/blog/category/{category-slug}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "記事タイトル",
      "item": "{siteUrl}/blog/{slug}"
    }
  ]
}

カテゴリがない場合は、2番目のブレッドクラム項目として「Blog」を使用し、URLは {siteUrl}/blog とします。

ステップ6: FAQPageスキーマの生成

ブログ記事のFAQセクションからQ&Aペアを抽出します。

{
  "@type": "FAQPage",
  "@id": "{siteUrl}/blog/{slug}#faq",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "質問は何ですか?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "完全な回答テキスト(統計情報を含む40〜60語)。"
      }
    }
  ]
}

重要な注意: Googleは2023年8月以降、FAQリッチリザルトを政府および医療サイトに制限しました。ただし、FAQスキーママークアップには以下の価値があります。

  • AIシステム(ChatGPT、Perplexity、Gemini)が引用のためにFAQデータを抽出する
  • 将来のリッチリザルト対象変更に備えてコンテンツを構造化する
  • コンテンツ整理シグナルを向上させる

ステップ7: VideoObjectの生成(動画がある場合)

記事に埋め込まれた各YouTube動画に対して、VideoObjectスキーマを生成します。

{
  "@type": "VideoObject",
  "@id": "{siteUrl}/blog/{slug}#video-{index}",
  "name": "動画タイトル",
  "description": "動画説明の抜粋(最初の200文字)",
  "thumbnailUrl": "https://img.youtube.com/vi/{videoId}/hqdefault.jpg",
  "uploadDate": "{ISO 8601 日付}",
  "contentUrl": "https://www.youtube.com/watch?v={videoId}",
  "embedUrl": "https://www.youtube.com/embed/{videoId}",
  "duration": "PT{M}分{S}秒",
  "interactionStatistic": {
    "@type": "InteractionCounter",
    "interactionType": { "@type": "WatchAction" },
    "userInteractionCount": {viewCount}
  }
}

各VideoObjectを@graph配列に追加します。@idフラグメントには #video-1、#video-2 などを使用します。動画メタデータは埋め込みのnoscriptフォールバック、または blog-google を使用してYouTube Data APIから抽出します。

ステップ7.5: ImageObjectの生成

記事のプライマリ画像に対するカバー画像スキーマ。

{
  "@type": "ImageObject",
  "@id": "{siteUrl}/blog/{slug}#primaryimage",
  "url": "https://cdn.pixabay.com/photo/.../image.jpg",
  "width": 1200,
  "height": 630,
  "caption": "代替テキストと一致する説明的なキャプション"
}

画像要件:

  • URLはクロール可能で一般にアクセス可能である必要があります
  • 幅と高さは実際の画像寸法を反映する必要があります
  • キャプションは画像の代替テキストと一致するか、密接に関連している必要があります
  • 推奨寸法: 1200x630(OG互換)または1920x1080

ステップ8: 検証と警告

非推奨のスキーマタイプをチェックし、検証ルールを適用します。

絶対に使用してはいけない非推奨タイプ:

  • HowTo — 2023年9月に非推奨化(Googleはリッチリザルトを表示しなくなりました)
  • SpecialAnnouncement — 2025年7月に非推奨化
  • PracticeProblem — 非推奨(教育用マークアップ)
  • Dataset — 一般的な用途では非推奨
  • SitelinksSearchBox — 非推奨
  • Q&A — 2026年1月に非推奨化(FAQPageとは別物)

検証チェック:

  1. すべての@id参照が@graph内のエンティティに解決できること
  2. dateModifiedがdatePublishedと同じかそれ以降であること
  3. headlineが110文字を超えないこと
  4. descriptionが50〜160文字の範囲内であること
  5. すべてのURLが絶対パス(相対パスではない)であること
  6. 画像の寸法が正の整数であること
  7. BreadcrumbListのpositionが1から始まる連番であること
  8. FAQPageに少なくとも2つの質問が含まれていること

AI引用最適化に関する注意: 3つ以上のスキーマタイプを使用するページは、AIによる引用確率が約13%高くなります。このスキルは最大7つのタイプ(BlogPosting、Person、Organization、BreadcrumbList、FAQPage、ImageObject、VideoObject)を生成し、検索エンジンの理解とAI抽出の両方を最大化します。

ステップ9: 出力

すべてのスキーマを@graphパターンを使用して1つの<script>タグにまとめます。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    { "@type": "BlogPosting", ... },
    { "@type": "Person", ... },
    { "@type": "Organization", ... },
    { "@type": "BreadcrumbList", ... },
    { "@type": "FAQPage", ... },
    { "@type": "VideoObject", ... },
    { "@type": "ImageObject", ... }
  ]
}
</script>

@graphパターンの利点:

  • 複数のスクリプトタグではなく1つで済む — HTMLがすっきり
  • 安定した@id参照によるエンティティリンク(例: authorがPersonの@idを参照)
  • GoogleやAIシステムが@graph配列を正しく解析
  • 1つのブロックとして保守・更新が容易

出力オプション:

  • 埋め込みHTML — <head> または </body> の前に貼り付け可能
  • スタンドアロンJSON — CMSのスキーマフィールドやAPI注入用
  • MDXコンポーネント — プロジェクトがMDXを使用している場合、コンポーネントとしてラップ

生成されたスキーマは、ユーザーの好みに応じてブログ記事ファイルまたは別のスキーマファイルに保存します。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

関連スキル