Free

OG画像生成器

パラメータを設定してSigned URLを生成し、HTMLに直接貼り付けてください。

画像パラメータ

読み込み中...

プレビュー

デモウォーターマーク付き
タイトルを入力するとプレビューが表示されます

サーバーサイド署名（開発者向け）

バックエンドで署名するには、以下のコードを参照してください。シークレットキーはAPIキー作成時に一度だけ表示されます。

const crypto = require('crypto');

function signOgUrl(secretKey, params) {
  const ts = Math.floor(Date.now() / 1000).toString();
  const kid = 'YOUR_KEY_ID'; // Dashboard에서 복사

  const signable = { ...params, ts, kid };

  // 알파벳 순 정렬 후 canonical string 생성
  const canonical = Object.entries(signable)
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([k, v]) => `${k}=${v}`)
    .join('&');

  const sig = crypto
    .createHmac('sha256', secretKey)
    .update(canonical)
    .digest('hex');

  const qs = new URLSearchParams({ ...signable, sig });
  return `https://og.planhub.kr/v1/og?${qs}`;
}

const url = signOgUrl(process.env.OGSHOT_SECRET_KEY, {
  title: 'My Blog Post',
  theme: 'dark',
});