OGP画像著者情報追加計画

目的

OGP画像をZenn風のデザインに改善し、著者情報（画像・名前）を表示させる。

Before（現状）

alt text

┌────────────────────────────────────────────────────────────┐
│            紫グラデーション背景                              │
│                                                            │
│                    [サイトアイコン SVG]                      │
│                         (100x100)                          │
│                                                            │
│                      記事タイトル                            │
│                     (52px, 白, 中央)                        │
│                                                            │
│                                       log.eurekapu.com ──┘│
└────────────────────────────────────────────────────────────┘

問題点

サイトアイコン（SVG）が邪魔 - 削除したい
著者情報がない - 誰が書いた記事かわからない
設定が分散 - JSON-LDでは log.eurekapu.com をauthor名として使用していた

After（実装後）

┌────────────────────────────────────────────────────────────┐
│            紫グラデーション背景                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │                    白いカード                          │  │
│  │                                                      │  │
│  │                  記事タイトル                          │  │
│  │                 (52px, 縦横中央)                       │  │
│  │                                                      │  │
│  │  [著者画像] Kei Komatsu              Eurekapu.com    │  │
│  └──────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────┘

alt text

改善点

サイトアイコン削除 - タイトルの視認性向上
白いカード追加 - Zenn風のデザイン
著者情報を左下に追加 - 丸い著者画像（GitHub アバター）+ 著者名
タイトルを縦横中央に配置 - スマホ等の小さい表示でも切れにくい
設定を一元化 - nuxt.config.ts の runtimeConfig で管理

実装結果

著者情報の設定

nuxt.config.ts に追加した設定：

runtimeConfig: {
  public: {
    author: {
      name: 'Kei Komatsu',
      image: 'https://github.com/keikomatsu.png',
      url: 'https://log.eurekapu.com/about'
    }
  }
}

変更したファイル

ファイル	変更内容
`nuxt.config.ts`	`runtimeConfig.public.author` を追加
`OgImageTemplate.vue`	サイトアイコン削除、白カード追加、著者画像・名前追加
`[...slug].vue`	`defineOgImage` に著者情報を渡す、JSON-LDで著者情報を参照

OgImageTemplate.vue の最終構成

<script setup lang="ts">
defineProps<{
  title: string
  authorName?: string
  authorImage?: string
}>()
</script>

<template>
  <!-- 紫グラデーション背景 -->
  <div class="og-container">
    <!-- 白いカード -->
    <div class="og-card">
      <!-- タイトル（縦横中央） -->
      <div class="title">{{ title }}</div>

      <!-- 下部バー -->
      <div class="bottom-bar">
        <!-- 著者情報（左下） -->
        <div class="author">
          <img :src="authorImage" />
          <span>{{ authorName }}</span>
        </div>
        <!-- サイト名（右下） -->
        <div class="site-name">Eurekapu.com</div>
      </div>
    </div>
  </div>
</template>

実装手順

nuxt.config.ts に author 設定を追加
著者画像を用意（GitHub アバター使用: https://github.com/keikomatsu.png）
OgImageTemplate.vue を修正
- サイトアイコンSVGを削除
- 白いカードを追加
- 著者画像と著者名を左下に追加
- サイト名を Eurekapu.com に変更
- タイトルを縦横中央に配置
[...slug].vue のJSON-LDを修正して runtimeConfig から著者情報を取得
ローカルで確認

確認方法

ローカルでOGP画像を確認：

http://localhost:3000/__og-image__/image/2025-12-31/ogp-author-info-improvement-plan/og.png

または、Nuxt DevToolsのOG Image タブで確認。

ビルド時間の問題（2025-12-31 追記）

問題

OGP画像に著者情報を追加したことでビルド時間が大幅に増加した。

ビルド時間の推移

コミット	内容	ビルド時間	状態
c8829ef	エッセイ追加（著者情報なし）	4m 13s	成功
3737195	OGP画像に著者情報追加	7m 13s	成功
c5d90b6	画像ファイル更新	5m 2s	失敗
19e45a4	Base64埋め込み	7m 32s	成功

原因

OGP画像生成時に著者画像を処理する時間が追加された
- 471枚のOGP画像 × 画像処理 = 約3分増加
- 各OGP画像の生成に1.5〜3秒かかっている
Base64埋め込みは効果が限定的
- 外部通信は不要になったが、画像デコード・処理の時間は変わらない
- 7m13s → 7m32s（むしろ微増）

試したこと

著者画像をBase64エンコードして埋め込み
- nuxt.config.ts の author.image を data:image/png;base64,... 形式に変更
- 画像サイズ: 約15KB（100x100px）
- 結果: 効果なし（7m32s）

未解決の課題

ビルド時間を4分台に戻す方法を検討
著者画像をさらに小さくする（5KB以下）
OGP画像のキャッシュ活用を検討
著者画像を削除してテキストのみにする案も検討

OGP画像 著者情報追加計画

OGP画像著者情報追加計画