1 回の API 呼び出しで Open Graph イメージを生成、Next.js は不要

Astro 統合: ビルド時に OG イメージを生成

Astro の静的サイト生成により、これが特にクリーンになります。 を取得する動的 API ルートを作成します。 ビルド中の OG イメージは静的として提供されます .png ファイル。

// src/pages/og/[slug].png.ts
import type { APIRoute, GetStaticPaths } from 'astro';

// Your posts data source (markdown, CMS, database, etc.)
import { getAllPosts } from '@/lib/posts';

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { title: post.title, description: post.description },
  }));
};

export const GET: APIRoute = async ({ props }) => {
  const res = await fetch('https://api.botoi.com/v1/og/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      title: props.title,
      description: props.description,
      theme: 'dark',
    }),
  });

  const imageBuffer = await res.arrayBuffer();

  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable',
    },
  });
};

その間 astro build, このルートは投稿ごとに PNG を生成します。 出力ファイルは次の場所にあります。 あなたの dist/og/ ディレクトリを静的資産として保存します。 ランタイムイメージ生成なし、サーバーレスなし 機能、コールドスタートなし。

ページヘッド内の画像を参照します。

<!-- In your BaseLayout.astro or page head -->
<meta property="og:image" content={\`https://yoursite.com/og/\${slug}.png\`} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={\`https://yoursite.com/og/\${slug}.png\`} />

すべてのページには固有のソーシャル カードが取得され、ビルド中に 1 回生成され、CDN によって永久にキャッシュされます。

Django と Rails の統合

サーバーレンダリングフレームワークは、オンデマンドで OG イメージを生成し、結果をキャッシュできます。

ジャンゴ

# views.py
import requests
from django.http import HttpResponse
from django.views.decorators.cache import cache_page


@cache_page(60 * 60 * 24)  # Cache for 24 hours
def og_image(request, slug):
    post = get_object_or_404(Post, slug=slug)

    response = requests.post(
        'https://api.botoi.com/v1/og/generate',
        json={
            'title': post.title,
            'description': post.description,
            'theme': 'dark',
        },
        timeout=5,
    )

    return HttpResponse(
        response.content,
        content_type='image/png',
    )

# urls.py
urlpatterns = [
    path('og/<slug:slug>.png', views.og_image, name='og_image'),
]

の @cache_page デコレータは生成されたイメージを 24 時間保存します。 最初のあと リクエストに応じて、Django は API を再びヒットすることなく、キャッシュされた PNG を直接提供します。

レール

# app/controllers/og_images_controller.rb
class OgImagesController < ApplicationController
  def show
    post = Post.find_by!(slug: params[:slug])

    response = HTTP.post(
      'https://api.botoi.com/v1/og/generate',
      json: {
        title: post.title,
        description: post.description,
        theme: 'dark'
      }
    )

    expires_in 24.hours, public: true
    send_data response.body.to_s, type: 'image/png', disposition: 'inline'
  end
end

# config/routes.rb
get 'og/:slug.png', to: 'og_images#show'

どちらの例も同じパターンに従います。スラッグで投稿を検索し、タイトルと説明を POST します。 API に送信し、キャッシュ ヘッダーを含む PNG を返します。 フレームワークはキャッシュを処理します。 API ハンドル 画像の生成。

ヘッドレス CMS 統合: 公開時に生成

コンテンツが Strapi、Contentful、Sanity などのヘッドレス CMS に存在する場合、OG を生成できます。 編集者が投稿を公開または更新するたびに画像が表示されます。 コンテンツに対して起動する Webhook を接続する 変化します。

汎用 Webhook ハンドラー

// Webhook handler (any Node.js server or serverless function)
import { writeFileSync } from 'fs';

export async function handleCmsPublish(payload) {
  const { title, description, slug } = payload.entry;

  const res = await fetch('https://api.botoi.com/v1/og/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, description, theme: 'light' }),
  });

  const buffer = Buffer.from(await res.arrayBuffer());

  // Save to your public/static directory or upload to S3/R2
  writeFileSync(\`./public/og/\${slug}.png\`, buffer);

  console.log(\`Generated OG image for: \${slug}\`);
}

Strapi ライフサイクル フック

// Strapi lifecycle hook: src/api/post/content-types/post/lifecycles.js
module.exports = {
  async afterUpdate(event) {
    const { result } = event;

    const res = await fetch('https://api.botoi.com/v1/og/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: result.title,
        description: result.description,
        theme: 'dark',
      }),
    });

    // Upload to your CDN or save locally
    const buffer = Buffer.from(await res.arrayBuffer());
    await strapi.plugins.upload.services.upload.upload({
      data: { path: \`og/\${result.slug}.png\` },
      files: { buffer, name: \`\${result.slug}.png\`, type: 'image/png' },
    });
  },
};

このアプローチは、コンテンツ編集者が CMS 経由で公開し、開発者が CMS 経由で公開しないチームに役立ちます。 テキストが変更されるたびにビルド パイプラインを実行したいと考えています。 OG イメージは、 投稿のタイトルまたは説明を変更します。

ボーナス: 任意の URL から OG メタデータを抽出

Botoi API は次の機能も提供します /v1/url-metadata、これは逆のことを行います。URL を指定すると、フェッチします。 ページを検索し、その Open Graph タグを抽出します。 これは、リンク プレビューやソーシャル カードを構築するのに役立ちます バリデーター、または SEO 監査ツール。

curl -X POST https://api.botoi.com/v1/url-metadata \\
  -H "Content-Type: application/json" \\
  -d '{"url": "https://github.com/astro-community/astro-embed"}'

応答：

{
  "success": true,
  "data": {
    "url": "https://github.com/astro-community/astro-embed",
    "status": 200,
    "title": "GitHub - astro-community/astro-embed",
    "description": "Components to embed third-party media in Astro projects",
    "og": {
      "title": "astro-embed",
      "description": "Components to embed third-party media in Astro projects",
      "image": "https://opengraph.githubassets.com/...",
      "type": "object",
      "url": "https://github.com/astro-community/astro-embed",
      "site_name": "GitHub"
    }
  }
}

これを使用して、アプリ内にリンク プレビュー コンポーネントを構築します。

async function getLinkPreview(url: string) {
  const res = await fetch('https://api.botoi.com/v1/url-metadata', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ url }),
  });

  const { data } = await res.json();

  return {
    title: data.og?.title ?? data.title,
    description: data.og?.description ?? data.description,
    image: data.og?.image,
    siteName: data.og?.site_name,
  };
}

両方のエンドポイントを結合します: を使用します。 /v1/url-metadata 自分のページがソーシャル上でどのように表示されるかを確認するには プラットフォーム、および /v1/og/generate 見栄えの良い画像を作成します。

あなたもSatoriを運営してみませんか？

あなたはできる。 Satori はオープンソースであり、高品質の出力を生成します。 しかし、自分で実行すると次のような意味になります。

• カスタム フォントのインストールとバンドル (Satori はシステム フォントを使用しません)
• 画像レンダリング用の Node.js ランタイムまたは Edge Function のセットアップ
• JSX から SVG へのテンプレートを作成し、resvg を使用して SVG を PNG に変換する
• 大きな画像をレンダリングする際のサーバーレス プラットフォームでのメモリ制限の処理
• Satori の API の進化に伴うパイプラインの維持

API 呼び出しは、これらすべてを 1 つの HTTP リクエストに置き換えます。 OG イメージのニーズが次のような場合 簡単な (タイトル + 説明 + ブランド)、API アプローチにより、セットアップにかかる時間を節約でき、 継続的なメンテナンス。