og-image

OG 画像ジェネレーター

html2png.dev を使用して、Open Graph やソーシャルメディアのプレビュー画像を生成します。

標準サイズ

プラットフォーム	サイズ	アスペクト比
Facebook/LinkedIn	1200×630	1.91:1
Twitter/X	1200×675	1.78:1 (16:9)
Twitter Large	1200×600	2:1
正方形	1200×1200	1:1

エンドポイント

POST https://html2png.dev/api/convert

例

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
</head>
<body class="flex items-center justify-center" style="width: 1200px; height: 630px; font-family: Inter, sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
  <div class="text-center text-white px-16">
    <h1 class="text-7xl font-extrabold mb-6 leading-tight">How to Build APIs</h1>
    <p class="text-3xl opacity-90 mb-8">A complete guide to RESTful design</p>
    <div class="flex items-center justify-center gap-4">
      <div class="w-16 h-16 rounded-full bg-white/20"></div>
      <span class="text-xl">By John Doe · 10 min read</span>
    </div>
  </div>
</body>
</html>'

主な要素

タイポグラフィ：

• 大きく太字の見出し（60～80px）
• 読みやすいサブ見出し（24～32px）
• 背景に対して高いコントラスト

レイアウト：

• 中央揃え、または左揃えのコンテンツ
• ゆとりのあるパディング（60～100px）
• 明確な視覚的階層

背景：

• グラデーションオーバーレイ
• 控えめなパターン
• ブランドカラー

画像：

• 著者のアバター（円形、80～120px）
• ロゴ（上隅、または中央）
• 装飾要素（控えめに）

CDN リソース

フォント：

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

アイコン：

<script src="https://unpkg.com/lucide@latest"></script>

ヒント

• 文字をくっきり表示するには、常に deviceScaleFactor=2 を使用します
• フォントの読み込みには delay=1000 を使用します
• テキストは最小限に抑えます（見出しは最大3～5語）
• 小さいサイズでも確認します（フィード内では画像が圧縮されます）
• 読みやすくするため、高いコントラストを使用します

レート制限

IP ごとに1時間あたり50リクエスト。