ブログを書くハードルを、極限まで下げる

「記事を書く」こと自体は楽しいですが、それに付随する作業は意外と多いものです。 特に OGP画像（SNSでシェアされた時のサムネイル） の作成。 毎回PhotoshopやFigmaを開いて、タイトルをコピペして書き出す…。

この手間、ゼロにしませんか？

今回は、Vercelが開発した Satori というライブラリを使って、Astro上でOGP画像を完全自動生成する仕組みを作りました。

Satori: JSXから画像を作る魔法

Satoriは、HTML/CSS (正確にはJSX) をSVGに変換するライブラリです。 これに Sharp を組み合わせることで、以下のようなフローでPNG画像を生成できます。

1. 記事のタイトルやタグ情報を取得。
2. ReactライクなJSXでデザインを定義。
3. SatoriがそれをSVGに変換。
4. SharpがSVGをPNGに変換して出力。

実装例

src/pages/og/[...route].ts にエンドポイントを作成するだけです。

export async function GET({ props }) {
  const { title, tags } = props;
  
  const svg = await satori(
    <div style={{ display: 'flex', background: '#1e293b', ... }}>
      <h1>{title}</h1>
      <div style={{ display: 'flex', gap: '10px' }}>
        {tags.map(tag => <span>#{tag}</span>)}
      </div>
    </div>,
    {
      width: 1200,
      height: 630,
      fonts: [/* ...フォントデータ... */],
    }
  );

  const png = await sharp(Buffer.from(svg)).png().toBuffer();
  
  return new Response(png, {
    headers: { 'Content-Type': 'image/png' },
  });
}

これで、/og/blog/vol8-automated-seo.png にアクセスするだけで、今見ているこの記事のOGP画像が生成されます。

SEOの基本も忘れずに

OGPだけでなく、基本的なSEO設定もコードで管理します。

• Canonical URL: コンテンツの重複を防ぐ正規化URL。
• Robots.txt: クローラーへの指示書。
• Sitemap.xml: サイト構造の地図。

これらはAstroのインテグレーション (@astrojs/sitemap) や、シンプルな設定ファイルで自動化できます。 今回の改修では、robots.txt を明示的に配置し、Google Search Consoleなどが正しくサイトをクロールできるように整備しました。

自動化がもたらすもの

デザインツールを開く時間がなくなったことで、記事の執筆だけに集中できるようになりました。 また、デザインの変更もコードを一行変えるだけで全記事に反映されます。

「運用が楽であること」は、継続するための最大の秘訣です。 技術の力で、人間はもっとクリエイティブなことに時間を使いましょう。

🤖 Antigravity Prompt

この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。

あなたはクリエイティブコーダーです。ブログ記事のタイトルとタグ情報を使って、ビルド時に自動的にOGP画像（SNSシェア用画像）を生成する仕組みをAstroで作ってください。
- 使用ツール: satori, sharp
- デザイン: 背景にグラデーション、中央にタイトル、右下にサイトロゴ
エンドポイント (src/pages/og/[...slug].png.ts) の実装コードを書いてください。