OG画像の自動生成スクリーンショットAPIで動的なソーシャルカードを作成

掲載日 2026年2月2日

ソーシャルプレビュー画像の作成をマニュアルで行うのはやめましょう。HTMLテンプレートとスクリーンショットAPIを使用して、美しいOG画像をその場で生成する方法を学びます。実際の例を使用した、コード中心のチュートリアルです。

完璧なブログ記事を作成するのに何時間も費やし、公開してTwitterで共有します。そして…退屈な灰色のボックス。プレビューなし。画像なし。誰もクリックしたくない、悲しくもむき出しのリンクだけ。

聞き覚えがありますか？OG（Open Graph）画像は、ソーシャル共有の縁の下の力持ちです。コンテンツがスクロールされて無視されるか、クリックされるかの違いは文字通りそれらにあります。そして、もしあなたがまだページごとにFigmaで手動で作成しているなら—話をする必要があります。

OG画像とは（そしてなぜ気にする必要があるのか）？

OG画像は、ソーシャルメディア、Slack、Discord、またはURLを展開する場所でリンクを共有するときに表示されるプレビューカードです。それらはHTMLの <meta> タグで定義されます。

<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:title" content="Your Awesome Title" />
<meta property="og:description" content="A compelling description" />

問題は？これらの画像を_手動で作成することはスケーラブルではありません。ブログ記事が100件ありますか？それは100枚の画像です。動的な商品ページがありますか？追いつくのは大変です。

解決策：OG画像をオンザフライで生成する

これは次の方法です。画像を事前に生成する代わりに、HTMLテンプレートをレンダリングし、スクリーンショットAPIを使用してリアルタイムでスクリーンショットを撮ります。フローは次のようになります。

OGカードのHTMLテンプレートを作成する
動的なパラメータ（タイトル、著者など）とともにホストする
スクリーンショットAPIに og:image metaタグをポイントさせる
完了。各ページには、ユニークで美しいプレビューカードが作成されます。

ステップ1：OGテンプレートを構築する

まず、ソーシャルカードをレンダリングする簡単なHTMLページを作成します。これは、アプリ内の専用ルートまたは静的HTMLファイルにすることができます。

<!-- /og-template?title=Hello%20World&author=John -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: system-ui, sans-serif;
      color: white;
    }
    h1 {
      font-size: 64px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .author {
      font-size: 28px;
      opacity: 0.9;
    }
    .logo {
      position: absolute;
      bottom: 40px;
      right: 60px;
      font-size: 24px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1 id="title">Your Title Here</h1>
  <p class="author">by <span id="author">Author Name</span></p>
  <div class="logo">yoursite.com</div>
  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById('title').textContent = params.get('title') || 'Untitled';
    document.getElementById('author').textContent = params.get('author') || 'Anonymous';
  </script>
</body>
</html>

ここで重要なのは次のとおりです。 1200x630ピクセルです。OG画像の魔法のサイズです。Twitter、Facebook、LinkedIn—すべてこの寸法でうまく機能します。

ステップ2：APIでスクリーンショットを撮る

さて、楽しい部分です。サーバーでPuppeteerを起動し（そしてヘッドレスChromeのすべてのドラマに対処し）、代わりにスクリーンショットAPIを使用してテンプレートをレンダリングします。

これは一般的なパターンを示すNode.jsの例です。

// Generate OG image URL using a screenshot API
function getOgImageUrl(title, author) {
  const templateUrl = encodeURIComponent(
    `https://yoursite.com/og-template?title=${encodeURIComponent(title)}&author=${encodeURIComponent(author)}`
  );
  
  // Most screenshot APIs follow this pattern:
  // Pass your template URL + dimensions, get back an image
  return `https://your-screenshot-api.com/capture?` +
    `url=${templateUrl}` +
    `&width=1200` +
    `&height=630` +
    `&format=png`;
}

ステップ3：メタタグに配線する

ページの <head>で、OG画像を動的に設定します。

// Next.js example (pages/_app.js or layout.tsx)
import Head from 'next/head';

export default function BlogPost({ post }) {
  const ogImage = getOgImageUrl(post.title, post.author);
  
  return (
    <>
      <Head>
        <meta property="og:image" content={ogImage} />
        <meta property="og:title" content={post.title} />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:image" content={ogImage} />
      </Head>
      <article>{/* Your content */}</article>
    </>
  );
}

ステップ4：キャッシングを追加する（重要！）

TwitterのクローラーがページをチェックするたびにAPIを呼び出したくはありません。キャッシングレイヤーを設定します。

// Edge function example (Vercel/Cloudflare)
export default async function handler(req) {
  const { title, author } = req.query;
  
  // Call your screenshot API
  const screenshotUrl = buildScreenshotUrl({
    url: `https://yoursite.com/og-template?title=${title}&author=${author}`,
    width: 1200,
    height: 630,
    format: 'png'
  });
  
  const response = await fetch(screenshotUrl);
  const imageBuffer = await response.arrayBuffer();
  
  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400, s-maxage=604800', // Cache for a week
    },
  });
}

これで、メタタグは独自の_エンドポイントを指し、結果をキャッシュします。

<meta property="og:image" content="https://yoursite.com/api/og?title=My%20Post&author=John" />

プロのヒント 🔥

Webフォントを使用する： Googleフォントはうまく機能します。スクリーンショットが実行される前にロードされることを確認してください。
ブランディングを追加する： ロゴ、グラデーション、パターン—フィードで認識できるようにします。
テキストを大きく表示する： ソーシャルカードはサムネイルとして表示されることがよくあります。タイトルの場合は48px以上。
バリデーターでテストする： プレビューするには Twitterのカードバリデーターそしておよび Facebookのデバッガー

を使用してください。

実際の例

このパターンは、多くの優れた開発者ブログで使用されています。 Vercel/Next.js：
彼らのOG画像には、投稿のタイトル、日付、読書時間が含まれています。 GitHub：
リポジトリカードには、スター、フォーク、説明が表示されます。 Dev.to：

著者アバターとリアクション数が表示される記事カード。

スクリーンショットAPIを使用すれば、20分で同じことができます。インフラストラクチャの維持も、Chromiumバイナリの管理も不要です。

// Full working example with error handling
async function generateOgImage(title, author, category) {
  const templateParams = new URLSearchParams({
    title: title.slice(0, 60), // Truncate long titles
    author,
    category: category || 'Blog'
  });
  
  const templateUrl = `https://yoursite.com/og-template?${templateParams}`;
  
  try {
    // Adapt this to your screenshot API of choice
    const response = await fetch(SCREENSHOT_API_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`
      },
      body: JSON.stringify({
        url: templateUrl,
        viewport: { width: 1200, height: 630 },
        format: 'png',
        waitUntil: 'networkidle' // Wait for fonts/images to load
      })
    });
    
    if (!response.ok) throw new Error('Screenshot failed');
    
    return await response.arrayBuffer();
  } catch (error) {
    console.error('OG generation failed:', error);
    // Return a fallback image
    return fetch('https://yoursite.com/default-og.png').then(r => r.arrayBuffer());
  }
}