Free

OG Image Generator

Configure parameters and generate a Signed URL to embed directly in your HTML.

Image Parameters

Loading...

Preview

Demo watermark included
Enter a title to see a preview

Server-side Signing (for developers)

To sign URLs in your backend, refer to the code below. Your Secret Key is shown only once when you create an API key.

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',
});