Cloudflare PagesとVercel OGを使用したダイナミックOGP画像生成の実装

Cloudflare PagesとVercel OGを組み合わせて、エッジでリアルタイムにOGP画像を生成する方法を紹介。SNSシェア向けの魅力的なOGP画像を、ページごとに手動作成する手間を省きながら実装できます。TypeScriptとReactで実装された実用的な例を解説しています。

今回は、Cloudflareのエッジで動作する動的OGP画像生成の実装方法について紹介します。SNSでのシェアを考えると、魅力的なOGP画像は非常に重要ですが、ページごとに手動でファイルを作成・アップロードするのは大変です。本記事では、Cloudflare PagesのFunctions機能とVercel OGライブラリを組み合わせて、エッジでリアルタイムにOGP画像を生成する方法を紹介します。

技術スタックについて

今回の作業は、以下の構成で作られたサイトに対して行いました。

Cloudflare Pages: CDN機能を備えた高速なホスティングサービスであり、エッジファンクションをサポート

React: コンポーネントベースでUIを定義できるJavaScriptライブラリ

TypeScript: 型安全性を確保し、開発効率と保守性を高めるためのJavaScriptのスーパーセット

ここにVercel OG用のプラグインをCloudflare Pages向けに最適化された、@cloudflare/pages-plugin-vercel-ogを追加していきます。

Cloudflare PagesのFunctions機能とミドルウェアの役割

Cloudflare PagesのFunctions機能は、従来のサーバーサイドロジックをCloudflareのエッジで実行できるようにする機能です。ミドルウェアは、リクエストとレスポンスの間に介在して処理を行う仕組みで、今回はこれを利用してOGP画像を動的に生成します。

ミドルウェアファイルは特定のパス構造を持つことで自動的に認識されます。今回の例では以下のパスを使用しています：

functions/[lang]/[post_slug]/_middleware.tsx

この構造は、/ja/post-1/social-image.pngのようなURLでアクセスされたときに自動的にミドルウェアが呼び出されることを意味します。

コード実装の詳細解説

まずは、コア実装部分を見ていきましょう。以下のコードは、functions/[lang]/[post_slug]/_middleware.tsxファイルの内容です：

import React from "react";
import vercelOGPagesPlugin from "@cloudflare/pages-plugin-vercel-og";

interface Props {
  ogTitle: string;
}

export const onRequest = vercelOGPagesPlugin<Props>({
  imagePathSuffix: "/social-image.png",
  component: ({ ogTitle, pathname }) => {
    return (
        <div
          style={{
            height: '100%',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#ffffff',
            padding: '40px',
          }}
        >
          <div
            style={{
              fontSize: '48px',
              fontWeight: 'bold',
              color: '#000000',
              marginTop: '40px',
              textAlign: 'center',
              maxWidth: '80%',
            }}
          >
            {ogTitle}
          </div>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              width: '80%',
            }}
          >
            <img
              src="https://example.com/logo.png"
              width="100"
              height="100"
              alt="Site Logo"
              style={{ marginRight: '10px' }}
            />
            <div
              style={{
                display: 'flex',
                fontSize: '32px',
                fontWeight: 'bold',
                color: '#333333',
              }}
            >
              SITE NAME
            </div>
          </div>
        </div>);
  },
  extractors: {
    on: {
      'meta[property="og:title"]': (props) => ({
        element(element) {
          props.ogTitle = element.getAttribute("content") ?? "";
        },
      }),
    },
  },
  options: {
    width: 1200,
    height: 630,
  },
  autoInject: {
    openGraph: true,
  },
});

このコードを詳細に解説していきます：

1. インターフェースの定義とジェネリクス

interface Props {
  ogTitle: string;
}

export const onRequest = vercelOGPagesPlugin<Props>({
  // 設定
});

TypeScriptのジェネリクスを使用して、vercelOGPagesPluginに型情報を提供しています。これにより、プロパティの型安全性を確保できます。PropsインターフェースではOGP画像に表示するタイトルを定義していますが、必要に応じてogDescriptionやogImageなどを追加できます。

2. プラグイン設定

imagePathSuffix: "/social-image.png",

この設定により、/ja/post-1/social-image.pngのようなパスでアクセスされたときにOGP画像が生成されます。URLパターンをカスタマイズしたい場合は、このパラメータを変更します。

3. コンポーネント設計

コンポーネント部分はReactを使用して画像のレイアウトとデザインを定義しています。インラインスタイルを使用していますが、実際のプロダクションコードでは共通のスタイル定義を分離すると保守性が高まります。

ポイントは以下の通りです：

フレキシブルレイアウトで様々な長さのタイトルに対応

適切なフォントサイズと配色でSNS上での視認性を確保

ロゴ画像とブランド名の配置でアイデンティティを表現

4. データ抽出ロジック

extractors: {
  on: {
    'meta[property="og:title"]': (props) => ({
      element(element) {
        props.ogTitle = element.getAttribute("content") ?? "";
      },
    }),
  },
},

この部分が特に重要です。ここでは、実際のHTMLページからメタ情報を抽出しています。CSSセレクタを使用してmeta[property="og:title"]要素を特定し、そのcontent属性を取得しています。

element.getAttribute("content") ?? ""という記述は、TypeScriptの型安全性のためのヌル合体演算子です。getAttributeはnullを返す可能性があるため、その場合は空文字列をフォールバックとして使用します。

5. 画像生成オプション

options: {
  width: 1200,
  height: 630,
},

生成される画像のサイズを指定しています。1200×630ピクセルはFacebookやTwitterなどの主要SNSで最適に表示されるサイズです。

6. メタタグ自動挿入

autoInject: {
  openGraph: true,
},

この設定により、生成された画像URLが自動的にOpenGraphメタタグに挿入されます。これにより、従来必要だった手動でのメタタグ追加が不要になります。

実装上の注意点とパフォーマンス最適化

キャッシュ戦略

OGP画像生成はCPUリソースを消費するため、適切なキャッシングが重要です。Cloudflareのエッジキャッシュを活用するために、以下の対策を検討してください：

Cache-Controlヘッダーの設定: 生成された画像に適切なキャッシュ期間を設定

条件付きリクエスト: ETagやLast-Modifiedを活用した効率的なキャッシュ検証

Cloudflare Cache Reserveの利用: 高トラフィックが予想される場合の検討

画像最適化

ロゴ画像などの外部リソースは、以下の点に注意してください：

画像サイズの最適化: 必要以上に大きな画像を使用しない

同一オリジンでのホスティング: 可能な限りCloudflareと同じネットワーク上にホスト

Content Security Policy (CSP)の設定: セキュリティリスクを低減

エラーハンドリング

実運用では様々なエッジケースに対応するため、以下のエラーハンドリングを追加することをお勧めします：

// エラーハンドリングの例
try {
  props.ogTitle = element.getAttribute("content") ?? "";
} catch (error) {
  console.error("Failed to extract og:title", error);
  props.ogTitle = "Default Title"; // フォールバックタイトル
}

導入手順とセットアップ

実際に導入する手順は以下の通りです：

必要なパッケージのインストール:

   npm install @cloudflare/pages-plugin-vercel-og react

プロジェクト構造の作成:

   functions/
     [lang]/
       [post_slug]/
         _middleware.tsx

Cloudflare Pagesへのデプロイ:

   npx wrangler pages publish .

環境変数の設定 (必要に応じて):
Cloudflare Dashboardから設定するか、wrangler.jsoncファイルで指定

発展的な使用例

基本実装を拡張する方法をいくつか紹介します：

動的テーマ:

   component: ({ ogTitle, pathname }) => {
     // パスに基づいてテーマカラーを変更
     const themeColor = pathname.includes('/news') ? '#ff0000' : '#0000ff';
     return (
       <div style={{ backgroundColor: themeColor }}>
         {/* コンテンツ */}
       </div>
     );
   }

追加メタデータの抽出:

   interface Props {
     ogTitle: string;
     ogDescription: string;
     ogCategory: string;
   }

   // extractorsを拡張
   extractors: {
     on: {
       'meta[property="og:title"]': (props) => ({
         element(element) {
           props.ogTitle = element.getAttribute("content") ?? "";
         },
       }),
       'meta[property="og:description"]': (props) => ({
         element(element) {
           props.ogDescription = element.getAttribute("content") ?? "";
         },
       }),
       'meta[name="category"]': (props) => ({
         element(element) {
           props.ogCategory = element.getAttribute("content") ?? "";
         },
       }),
     },
   },

条件付きレイアウト:
ページのタイプや内容に応じて異なるレイアウトを動的に適用することも可能です。

まとめ

Cloudflare PagesとVercel OGを組み合わせることで、エッジで動作する高パフォーマンスな動的OGP画像生成が実現できます。この方法の主なメリットは以下の通りです：

エッジでの実行: ユーザーに近い場所で処理が行われるため高速

メンテナンス性: ページごとに画像を用意する必要がなく管理が容易

コスト効率: 適切に実装すればほとんどの場合無料枠内で運用可能

スケーラビリティ: Cloudflareのグローバルネットワークによる自動スケーリング

この実装はブログやニュースサイト、EC、ポートフォリオなど様々なウェブサイトで活用できます。ぜひ、あなたのプロジェクトに取り入れてみてください。

この記事は2023年12月時点の情報に基づいています。Cloudflare PagesやVercel OGの仕様は変更される可能性があるため、最新の公式ドキュメントもご確認ください。

https://developers.cloudflare.com/pages/functions/plugins/vercel-og/

https://zenn.dev/monicle/articles/cloudflare-pages-vercel-og-remix

https://developers.cloudflare.com/pages/functions/routing/