mcpField
B
blog-schema

blog-schema

github.com/infrasity-labsマーケティング・グロース15195 回インストール18 週間前に更新
リポジトリ

blog-schema について

blog-schema は、ブログ記事向けの JSON-LD 構造化データを生成し、関連するエンティティを単一の @graph ブロックにまとめるスキルです。記事、著者、組織、メディアの情報からマークアップを作成し、出力前に検証します。

主な機能

  1. 01BlogPosting などのスキーマ型を生成
  2. 02安定した @id でエンティティを関連付け
  3. 03単一の JSON-LD @graph ブロックを作成
  4. 04参照、日付、URL、各項目を検証
  5. 05HTML 埋め込み、JSON、MDX で出力

活用シーン

  1. 01ブログ記事に構造化データを追加
  2. 02著者と組織のエンティティマークアップを作成
  3. 03FAQ、パンくず、画像、動画を記述
  4. 04保存前に生成したスキーマを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill blog-schema

インストール後、Claude Code で/blog-schemaを入力して読み込まれたか確認します。

詳細

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

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

ワークフロー

ステップ 1:コンテンツを読む

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

  • タイトル(headline)
  • 著者(名前、役職、ソーシャルリンク、資格)
  • 日付(datePublished、dateModified / lastUpdated)
  • 説明(メタディスクリプション)
  • FAQ セクション(質問と回答のペア)
  • 画像(カバー画像の URL、寸法、代替テキスト、本文内の画像)
  • 組織情報(サイト名、URL、ロゴ)
  • 単語数(コンテンツの長さから概算)
  • タグ/カテゴリー(BreadcrumbList のカテゴリー用)
  • スラッグ(ファイル名または frontmatter から取得)
ステップ 2:BlogPosting スキーマを生成する

必須および推奨プロパティをすべて含む BlogPosting を作成します。

{
  "@type": "BlogPosting",
  "@id": "{siteUrl}/blog/{slug}#article",
  "headline": "Post title (max 110 chars)",
  "description": "Meta description (150-160 chars)",
  "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": "First 200 characters of content as excerpt..."
}

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

ステップ 3:Person スキーマを生成する

相互参照に使う安定した @id を持つ著者スキーマです。

{
  "@type": "Person",
  "@id": "{siteUrl}/author/{author-slug}#person",
  "name": "Author Name",
  "jobTitle": "Role or Title",
  "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": "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 の publisher には長方形のロゴが適しています。

ステップ 5:BreadcrumbList を生成する

コンテンツの階層を示すナビゲーション用パンくずリストのスキーマです。

{
  "@type": "BreadcrumbList",
  "@id": "{siteUrl}/blog/{slug}#breadcrumb",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{siteUrl}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Category Name",
      "item": "{siteUrl}/blog/category/{category-slug}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Post Title",
      "item": "{siteUrl}/blog/{slug}"
    }
  ]
}

カテゴリーがない場合は、2 番目のパンくず項目に「Blog」を使用し、URL には {siteUrl}/blog を指定します。

ステップ 6:FAQPage スキーマを生成する

ブログ記事の FAQ セクションから質問と回答のペアを抽出します。

{
  "@type": "FAQPage",
  "@id": "{siteUrl}/blog/{slug}#faq",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is the question?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The complete answer text (40-60 words with statistic)."
      }
    }
  ]
}

重要な注意点:Google は 2023 年 8 月以降、FAQ のリッチリザルトを政府および医療関連サイトに限定しています。ただし、FAQ スキーママークアップには、引き続き次のようなメリットがあります。

  • AI システム(ChatGPT、Perplexity、Gemini)が引用用に FAQ データを抽出します
  • 将来的にリッチリザルトの対象範囲が変更された場合に備え、コンテンツを構造化できます
  • コンテンツの整理状況を示すシグナルを向上させます
ステップ 7:VideoObject を生成する(動画がある場合)

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

{
  "@type": "VideoObject",
  "@id": "{siteUrl}/blog/{slug}#video-{index}",
  "name": "Video title",
  "description": "Video description excerpt (first 200 chars)",
  "thumbnailUrl": "https://img.youtube.com/vi/{videoId}/hqdefault.jpg",
  "uploadDate": "{ISO 8601 date}",
  "contentUrl": "https://www.youtube.com/watch?v={videoId}",
  "embedUrl": "https://www.youtube.com/embed/{videoId}",
  "duration": "PT{M}M{S}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": "Descriptive caption matching alt text"
}

画像の要件:

  • URL はクロール可能で、一般にアクセス可能である必要があります
  • 幅と高さは実際の画像の寸法を反映する必要があります
  • キャプションは画像の代替テキストと一致するか、内容が近いものにします
  • 推奨サイズ:1200x630(OG 対応)または 1920x1080
ステップ 8:検証と警告

非推奨のスキーマ型がないか確認し、検証ルールを適用します。

以下の非推奨の型は絶対に使用しないでください。

  • HowTo - 2023 年 9 月に非推奨(Google はリッチリザルトを表示しなくなりました)
  • SpecialAnnouncement - 2025 年 7 月に非推奨
  • Practice Problem - 非推奨(教育用マークアップ)
  • Dataset - 一般用途では非推奨
  • Sitelinks Search Box - 非推奨
  • Q&A - 2026 年 1 月に非推奨(FAQPage とは異なります)

検証項目:

  1. すべての @id 参照が @graph 内のエンティティを参照している
  2. dateModified が datePublished と同日またはそれ以降である
  3. headline が 110 文字を超えていない
  4. description が 50~160 文字である
  5. すべての URL が絶対 URL である(相対 URL ではない)
  6. 画像のサイズが正の整数である
  7. BreadcrumbList の position が 1 から始まる連番である
  8. FAQPage に 2 つ以上の質問がある

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

ステップ 9:出力

すべてのスキーマを @graph パターンを使用した単一の <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 パターンのメリット:

  • 複数ではなく単一の script タグを使用するため、HTML がすっきりします
  • 安定した @id 参照でエンティティをリンクできます(例:著者が @id で Person を参照します)
  • Google と AI システムは @graph 配列を正しく解析します
  • 単一のブロックとして管理・更新しやすくなります

出力形式:

  • 埋め込み HTML - <head> または </body> の前に貼り付けてすぐ使えます
  • スタンドアロン JSON - CMS のスキーマフィールドまたは API インジェクション用
  • MDX コンポーネント - プロジェクトで MDX を使用している場合は、コンポーネントでラップします

生成したスキーマを、ブログ記事ファイルまたは別のスキーマファイルに保存します。保存先はユーザーの希望に従ってください。

コメント