JSON-LD構造化データの必要性と実装方法

本プロジェクトでの実装方針

このプロジェクト（log.eurekapu.com）では、以下の方針でJSON-LD構造化データを実装しています：

実装内容

[...slug].vueで一元管理
- すべてのMarkdown記事に対してJSON-LDを自動生成
- フロントマター（title, description, publishedAt, tags）から動的に構築
含まれるプロパティ
- headline: 記事タイトル
- description: 記事の説明
- datePublished / dateModified: 公開日・更新日
- author: 著者情報（Person型）
- publisher: 発行者情報（Organization型）
- image: サイトロゴ（favicon.svg）
- url: 記事のURL
- mainEntityOfPage: ページのメインエンティティ
- keywords: タグをカンマ区切りで設定
実装済み
- すでに[...slug].vueに実装されており、全記事に自動適用される
- 追加のコード変更は不要

実装理由

SEO効果：検索エンジンが記事の構造を正確に理解
AI検索対応：ChatGPT SearchやPerplexityでの引用精度向上
リッチリザルト：検索結果での視認性向上
保守性：フロントマターを更新するだけでJSON-LDが自動更新

なぜJSON-LD構造化データが必要なのか

1. 検索エンジンの理解を助ける

通常のHTMLは人間が読むために設計されていますが、記事の「意味」を検索エンジンやAIは正確に理解できません。JSON-LD（JavaScript Object Notation for Linked Data）は、機械が読み取れる形式でコンテンツの意味を明示的に伝えます。

例：

「この文章は記事である」
「公開日は2025年11月27日である」
「著者は〇〇である」
「タグは△△と□□である」

2. リッチリザルト（Rich Results）の表示

Googleなどの検索結果で、通常のリンクよりも目立つ表示（リッチスニペット）を得られます：

記事の公開日
著者名
評価（レビュー記事の場合）
パンくずリスト
よくある質問（FAQ）

これによりクリック率（CTR）が向上します。

3. AI検索エンジンへの対応

ChatGPT Search、Perplexity、Google SGE（Search Generative Experience）などのAI検索エンジンは、構造化データを活用してコンテンツを理解します。

構造化データがあると：

AIが記事の内容を正確に把握できる
引用元として選ばれやすくなる
信頼性の高い情報源として認識される

4. ナレッジグラフへの掲載

Googleのナレッジグラフやナレッジパネルに表示されやすくなり、ブランドの権威性が向上します。

どのように実装するか

JSON-LDの基本構造

JSON-LD構造化データは、<script type="application/ld+json">タグ内にJSON形式で記述します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事のタイトル",
  "description": "記事の説明",
  "datePublished": "2025-11-27",
  "dateModified": "2025-11-27",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "publisher": {
    "@type": "Organization",
    "name": "サイト名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "image": "https://example.com/article-image.jpg",
  "url": "https://example.com/article-path"
}
</script>

Schema.orgの種類

用途に応じて適切な@typeを選びます：

Article: ブログ記事、ニュース記事
BlogPosting: ブログ投稿
TechArticle: 技術記事
WebPage: 一般的なWebページ
FAQPage: よくある質問ページ
HowTo: ハウツー記事

実装コード

`[...slug].vue`での実装（実装済み）

本プロジェクトでは、[...slug].vueで動的にJSON-LDを生成しています：

<script setup lang="ts">
import { computed } from "vue"
import { queryCollection } from "#imports"

const route = useRoute()
const docPath = computed(() => {
  const normalized = route.path.replace(/\/$/, "")
  return normalized === "" ? "/" : normalized
})

const { data: doc } = await useAsyncData(
  `content-${docPath.value}`,
  () => queryCollection("pages").path(docPath.value).first(),
  { watch: [docPath] }
)

// JSON-LD構造化データ
useHead({
  script: computed(() => {
    if (!doc.value) return []

    return [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Article',
          headline: doc.value.title || 'Untitled',
          description: doc.value.description || '',
          datePublished: doc.value.publishedAt || '',
          dateModified: doc.value.publishedAt || '',
          author: {
            '@type': 'Person',
            name: 'log.eurekapu.com',
            url: 'https://log.eurekapu.com/about'
          },
          publisher: {
            '@type': 'Organization',
            name: 'log.eurekapu.com',
            logo: {
              '@type': 'ImageObject',
              url: 'https://log.eurekapu.com/favicon.svg'
            }
          },
          image: 'https://log.eurekapu.com/favicon.svg',
          url: `https://log.eurekapu.com${docPath.value}`,
          mainEntityOfPage: {
            '@type': 'WebPage',
            '@id': `https://log.eurekapu.com${docPath.value}`
          },
          keywords: doc.value.tags ? doc.value.tags.join(', ') : ''
        })
      }
    ]
  })
})
</script>

個別ブログページ（Vue）での実装例

静的なVueページ（pages/blog/example.vue）でも同様にJSON-LDを設定できます：

<script setup lang="ts">
useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: '記事タイトル',
        description: '記事の説明...',
        datePublished: '2025-11-27',
        dateModified: '2025-11-27',
        author: {
          '@type': 'Person',
          name: 'log.eurekapu.com',
          url: 'https://log.eurekapu.com/about'
        },
        publisher: {
          '@type': 'Organization',
          name: 'log.eurekapu.com',
          logo: {
            '@type': 'ImageObject',
            url: 'https://log.eurekapu.com/favicon.svg'
          }
        },
        image: 'https://log.eurekapu.com/favicon.svg',
        url: 'https://log.eurekapu.com/blog/example',
        mainEntityOfPage: {
          '@type': 'WebPage',
          '@id': 'https://log.eurekapu.com/blog/example'
        },
        keywords: 'タグ1, タグ2, タグ3'
      })
    }
  ]
})

useSeoMeta({
  title: '記事タイトル',
  description: '記事の説明...',
  articleAuthor: 'log.eurekapu.com',
  articlePublishedTime: '2025-11-27',
  articleModifiedTime: '2025-11-27',
  ogType: 'article',
})
</script>

検証方法

実装後は以下のツールで検証します：

1. Google Rich Results Test

https://search.google.com/test/rich-results
URLまたはコードを貼り付けて検証

2. Schema Markup Validator

https://validator.schema.org/
JSON-LDの構文と妥当性をチェック

3. ブラウザDevTools

// JSON-LDを確認
const jsonLd = document.querySelector('script[type="application/ld+json"]')
console.log(JSON.parse(jsonLd.textContent))

4. Google Search Console

拡張機能 → リッチリザルト
エラーと警告を確認

まとめ

JSON-LD構造化データは：

検索エンジンとAIにコンテンツを正確に伝える
リッチリザルトでCTRを向上させる
AI検索時代の必須SEO施策

本プロジェクトでは：

すべてのMarkdown記事に自動的にJSON-LDが適用される
フロントマターを正しく設定すれば追加作業は不要
[...slug].vueで一元管理されているため保守性が高い