OGP画像自動生成 実装ガイド

概要

SNSでシェア時にタイトル+アイコンを含む画像を自動生成する機能。ZennやNoteのようにシェアプレビューで記事タイトルが画像に表示される。

使用技術

• nuxt-og-image v5: Nuxt公式のOG画像生成モジュール
• Satori: VueコンポーネントをSVGに変換
• Google Fonts: Noto Sans JP（自動ダウンロード）

実装内容

nuxt.config.ts

modules: [
  // ... 他のモジュール
  "nuxt-og-image"
],

ogImage: {
  defaults: {
    width: 1200,
    height: 630,
    renderer: 'satori'
  },
  fonts: [
    'Noto+Sans+JP:400',
    'Noto+Sans+JP:700'
  ],
  runtimeBrowser: false,
  compatibility: {
    prerender: {
      satori: 'node',
      resvg: 'node'
    }
  }
}

OG画像テンプレート

apps/web/app/components/OgImage/OgImageTemplate.vue

• 紫グラデーション背景
• ターミナルアイコン（SVG、text要素は使用不可）
• 記事タイトル（中央配置）
• サイト名（右下）

注意: SatoriはSVGの<text>要素をサポートしていない。<path>に変換するか、テキストはVueテンプレートで表示する。

ページでの使用

// defineOgImage（v5のAPI）を使用
defineOgImage({
  component: 'OgImageTemplate',
  title: '記事タイトル'
});

useSeoMetaでogImage/twitterImageは設定不要。nuxt-og-imageが自動で設定する。

OG画像デザイン

┌──────────────────────────────────────────────────────┐
│  ████████████████████ (グラデーション背景)          │
│                                                      │
│                   [ターミナルアイコン]              │
│                                                      │
│              記事タイトル                            │
│         (大きく白文字で中央配置)                    │
│                                                      │
│                              log.eurekapu.com        │
└──────────────────────────────────────────────────────┘
サイズ: 1200 x 630px

確認方法

ローカル確認

pnpm dev

個別ページのOG画像URL:

# トップページ
http://localhost:3000/__og-image__/image/og.png

# 記事ページ
http://localhost:3000/__og-image__/image/2025-12-23/記事スラッグ/og.png

注意: /__og-image__/（一覧ページ）は開発モードでは動作しない。Nuxt DevToolsまたは個別URLで確認する。

デプロイ後確認

• OGP確認ツール
• Twitter Card Validator

生成フロー

1. pnpm generateを実行
2. nuxt-og-imageが全ページを巡回
3. 各ページのOG画像をdist/__og-image__/に生成
4. 静的ファイルとしてCloudflare Pagesにデプロイ

変更ファイル一覧