著者情報の必要性と実装方法

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

このプロジェクト（log.eurekapu.com）では、以下の方針で著者情報を実装しています：

実装内容

メタ情報のみ設定（視覚的表示なし）
- [...slug].vueでOGPメタタグ（articleAuthor）を設定
- [...slug].vueでJSON-LD構造化データ（author, publisher）を設定
- /aboutページで著者プロフィールを提供
視覚的な日付・著者表示は削除
- パンくずリストに日付が表示されるため重複を避ける
- 著者名の重複表示も不要と判断
- メタ情報として検索エンジンが読み取れれば十分

実装理由

SEO効果：検索エンジンとAI検索が著者情報を認識
ユーザー体験：パンくずリストとの重複を避けてシンプルに
保守性：メタ情報の一元管理

なぜ著者情報が必要なのか

1. Googleの「E-E-A-T」評価基準

Googleは2022年12月に、品質評価基準に**「Experience（経験）」**を追加し、「E-E-A-T」を重視するようになりました：

Experience（経験）：著者が実際に体験しているか
Expertise（専門性）：著者がその分野の専門家か
Authoritativeness（権威性）：著者や組織が権威を持っているか
Trustworthiness（信頼性）：コンテンツが信頼できるか

著者情報を明示することで、コンテンツの信頼性をGoogleは評価しやすくなります。

2. YMYL（Your Money or Your Life）コンテンツでの重要性

以下のトピックは、ユーザーの人生や財産に影響を与える「YMYL」として、特に厳しく評価されます：

医療・健康情報
金融・投資情報
法律・税務情報
ニュース・時事問題

これらの分野では、著者の専門性と信頼性が必須です。著者情報がないと、ランキングで大きく不利になります。

3. AI検索エンジンでの引用精度

ChatGPT Search、Perplexity、Google SGEなどは、情報の信頼性を判断する際に著者情報を参照します。

例：

ユーザー: 「Nvidiaの競合優位性は?」
AI: 「log.eurekapu.comの分析によると、Nvidiaには9つの防御壁があります... (著者: ○○, 投資アナリスト, 2025年11月24日)」

著者情報があると：

引用されやすい
情報源として信頼される
専門性が認識される

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

Googleのナレッジグラフやナレッジパネルに、著者として表示される可能性があります。これにより：

個人ブランドの構築
権威性の向上
他の記事への波及効果

5. ユーザーの信頼獲得

ユーザーは「誰が書いたのか」を気にします。著者情報があると：

情報の信頼性が高まる
読者とのつながりが生まれる
ブランドロイヤルティが向上

技術リファレンス

必要なメタデータ

1. OGPメタタグ

<meta property="article:author" content="log.eurekapu.com" />

2. JSON-LD構造化データ

{
  "@context": "https://schema.org",
  "@type": "Article",
  "author": {
    "@type": "Person",
    "name": "山田太郎",
    "url": "https://log.eurekapu.com/about",
    "sameAs": [
      "https://twitter.com/example",
      "https://github.com/example"
    ]
  }
}

3. HTMLタグ（セマンティック）

<span itemprop="author" itemscope itemtype="https://schema.org/Person">
  <a itemprop="url" href="/about">
    <span itemprop="name">山田太郎</span>
  </a>
</span>

Schema.orgのPersonプロパティ

プロパティ	説明	例
`name`	著者名（必須）	`log.eurekapu.com`
`url`	プロフィールページ	`https://log.eurekapu.com/about`
`sameAs`	ソーシャルメディアプロフィール	`["https://twitter.com/...", "https://github.com/..."]`
`image`	著者の写真	`https://log.eurekapu.com/author-photo.jpg`
`jobTitle`	職業・肩書	`投資アナリスト`
`worksFor`	所属組織	`{"@type": "Organization", "name": "ABC Corp"}`

組織（Organization）として著者を設定する場合

{
  "@context": "https://schema.org",
  "@type": "Article",
  "author": {
    "@type": "Organization",
    "name": "log.eurekapu.com",
    "url": "https://log.eurekapu.com",
    "logo": {
      "@type": "ImageObject",
      "url": "https://log.eurekapu.com/favicon.svg"
    }
  }
}

実装コード

`[...slug].vue`で著者情報を追加

<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] }
)

// OGP + 著者情報
useSeoMeta({
  title: () => doc.value?.title || 'ページが見つかりません',
  description: () => doc.value?.description || '',
  articlePublishedTime: () => doc.value?.publishedAt || '',
  articleModifiedTime: () => doc.value?.publishedAt || '',
  articleAuthor: 'log.eurekapu.com', // 著者名
  ogType: 'article',
  ogUrl: () => `https://log.eurekapu.com${docPath.value}`,
})

// 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'
          },
          publisher: {
            '@type': 'Organization',
            name: 'log.eurekapu.com',
            logo: {
              '@type': 'ImageObject',
              url: 'https://log.eurekapu.com/favicon.svg'
            }
          },
          url: `https://log.eurekapu.com${docPath.value}`,
        })
      }
    ]
  })
})
</script>

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

pages/blog/example.vueでの実装例：

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

useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: '記事タイトル',
        datePublished: '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'
          }
        },
        url: 'https://log.eurekapu.com/blog/example',
      })
    }
  ]
})
</script>

`pages/about.vue`の作成

著者プロフィールページ：

<script setup lang="ts">
useSeoMeta({
  title: 'About - log.eurekapu.com',
  description: 'log.eurekapu.comは、日々の学びや発見を記録していく個人ログサイトです。',
  ogType: 'profile',
  ogUrl: 'https://log.eurekapu.com/about',
})

useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Person',
        name: 'log.eurekapu.com',
        url: 'https://log.eurekapu.com',
        sameAs: [
          'https://twitter.com/example',
          'https://github.com/example'
        ],
        description: 'テクノロジー、投資、科学に関する記事を執筆しています。'
      })
    }
  ]
})
</script>

<template>
  <main class="about-page">
    <h1>About</h1>
    <p>
      log.eurekapu.comは、日々の学びや発見を記録していく個人ログサイトです。
      技術メモ、投資分析、科学トピックなどを綴っています。
    </p>
  </main>
</template>

検証方法

1. Google Rich Results Test

https://search.google.com/test/rich-results
URLを入力して「著者」が認識されているか確認

2. Schema Markup Validator

https://validator.schema.org/
JSON-LDのauthorを確認

3. ブラウザDevTools

// OGPメタタグを確認
document.querySelector('meta[property="article:author"]')?.content

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

よくある間違い

❌ 著者情報が欠落

useSeoMeta({
  title: '記事タイトル',
  description: '説明',
  // articleAuthor がない
})

✅ 著者情報を設定

useSeoMeta({
  title: '記事タイトル',
  description: '説明',
  articleAuthor: 'log.eurekapu.com',
})

❌ JSON-LDでauthorが欠落

{
  "@type": "Article",
  "headline": "記事タイトル",
  "datePublished": "2025-11-27"
  // author がない
}

✅ JSON-LDでauthorを設定

{
  "@type": "Article",
  "headline": "記事タイトル",
  "datePublished": "2025-11-27",
  "author": {
    "@type": "Person",
    "name": "log.eurekapu.com"
  }
}

まとめ

著者情報は：

Googleの E-E-A-T 評価基準で重要
YMYL コンテンツでは必須
AI検索での引用精度を向上
ユーザーの信頼獲得に貢献

本プロジェクトでは：

OGPメタタグ（articleAuthor）とJSON-LD（author, publisher）でメタ情報を設定
視覚的な表示は削除（パンくずリストと重複するため）
検索エンジンが読み取れる形で著者情報を提供