OG Image Generator
Configure parameters and generate a Signed URL to embed directly in your HTML.
Image Parameters
Loading...
Preview
Demo watermark includedEnter 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',
});