コンテンツにスキップ

vercel/og

@vercel/og Pages Pluginは、ウェブページのためのソーシャル画像をレンダリングするミドルウェアです。また、任意の画像を作成するためのAPIも含まれています。

名前が示すように、これは@vercel/og ↗によって動作しています。このプラグインとその基盤となるSatori ↗ライブラリは、Vercelチームによって作成されました。

インストール

@vercel/og Pages Pluginをインストールするには、次のコマンドを実行します：

Terminal window
npm install @cloudflare/pages-plugin-vercel-og

使用方法

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={{ display: "flex" }}>{ogTitle}</div>;
  },
  extractors: {
    on: {
      'meta[property="og:title"]': (props) => ({
        element(element) {
          props.ogTitle = element.getAttribute("content");
        },
      }),
    },
  },
  autoInject: {
    openGraph: true,
  },
});

プラグインは、6つのプロパティを持つオブジェクトを受け取ります：

  • imagePathSuffix: 生成された画像を利用可能にするためのパスサフィックス。例えば、このプラグインをfunctions/blog/_middleware.tsにマウントし、imagePathSuffixを/social-image.pngに設定し、/blog/hello-worldページを持つ場合、画像は/blog/hello-world/social-image.pngで利用可能になります。

  • component: 画像をレンダリングするために使用されるReactコンポーネント。デフォルトでは、Reactコンポーネントには基盤となるウェブページのパス名（例えば、/blog/hello-world）と等しいpathnameプロパティが与えられますが、extractorsオプションを使用してより動的なプロパティを提供することもできます。

  • extractors: 2つのオプションプロパティonとonDocumentを持つオプションのオブジェクト。これらのプロパティは、オブジェクトを受け取り、HTMLRewriter要素ハンドラーまたはドキュメントハンドラーを返す関数に設定できます。オブジェクトパラメータは、Reactコンポーネントに追加のプロパティを提供するために変更できます。上記の例では、要素ハンドラーを使用してウェブページからog:titleメタタグを抽出し、それをReactコンポーネントにogTitleプロパティとして渡します。これが、基盤となるウェブページの値を使用して動的な画像を作成するための主なメカニズムです。

  • options: @vercel/ogライブラリに直接渡されるオプションのオブジェクト ↗。

  • onError: ResponseまたはResponseのPromiseを返すオプションの関数。この関数は、imagePathSuffixにリクエストが行われ、extractorsが提供されているが、基盤となるウェブページが有効なHTMLでない場合に呼び出されます。デフォルトでは404レスポンスを返します。

  • autoInject: オプションのオブジェクトで、オプションのプロパティopenGraphを持ちます。trueに設定すると、プラグインは基盤となるウェブページにog:image、og:image:height、およびog:image:widthメタタグを自動的に設定します。

任意の画像を生成する

このプラグインのAPIを使用して、ミドルウェアとしてだけでなく、任意の画像を生成します。

例えば、以下のコードは「Hello, world!」と表示される画像を生成し、/greetで利用可能にします。

import React from "react";
import { ImageResponse } from "@cloudflare/pages-plugin-vercel-og/api";


export const onRequest: PagesFunction = async () => {
  return new ImageResponse(
    <div style={{ display: "flex" }}>Hello, world!</div>,
    {
      width: 1200,
      height: 630,
    }
  );
};

これは、基盤となる@vercel/ogライブラリ ↗が提供するのと同じAPIです。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings