API 문서

Arkain OG API를 사용하여 프로그래밍 방식으로 OG 이미지를 생성하세요.

빠른 시작

두 가지 방법으로 OG 이미지를 생성할 수 있습니다: GET 요청(간편)과 POST 요청(상세 설정).

API Playground
파라미터를 입력하고 미리보기를 확인하세요. 생성된 URL을 HTML meta 태그에 바로 사용할 수 있습니다.
https://og.arkain.com/api/v1/og?template=og%3Abasic
<meta property="og:image" content="https://og.arkain.com/api/v1/og?template=og%3Abasic" />
GET/api/v1/og
쿼리 파라미터로 간편하게 OG 이미지를 생성합니다. HTML meta 태그에서 바로 사용할 수 있습니다.

쿼리 파라미터

파라미터필수설명
template필수템플릿 이름 (예: og:basic)
title선택제목 텍스트
description선택설명 텍스트
tag선택태그 텍스트
logo선택로고 이미지 URL
image선택이미지 URL
font선택글꼴 (pretendard, inter, ...)
titleColor선택제목 색상 (예: #030712)
descColor선택설명 색상
bgColor선택배경 색상 (단색)

HTML Meta 태그 사용 예시

HTML
<meta property="og:image" content="https://og.arkain.com/api/v1/og?template=og:basic&title=My%20Website&description=Welcome%20to%20my%20site" />

Next.js에서 사용

app/layout.tsx
export const metadata = {
  openGraph: {
    images: [
      {
        url: "https://og.arkain.com/api/v1/og?template=og:basic&title=My%20App",
        width: 1200,
        height: 630,
      },
    ],
  },
}
POST/api/v1/images
JSON 본문으로 템플릿의 모든 속성을 세밀하게 제어할 수 있습니다.

cURL 예시

Terminal
curl -X POST https://og.arkain.com/api/v1/images \
  -H "Content-Type: application/json" \
  -d '{
    "name": "og:basic",
    "params": {
      "title": {
        "text": "My Website",
        "fontFamily": "pretendard",
        "fontWeight": 700,
        "fontSize": 52,
        "color": "#030712"
      },
      "description": {
        "text": "Welcome to my site",
        "fontFamily": "pretendard",
        "fontWeight": 400,
        "fontSize": 30,
        "color": "#030712"
      },
      "logo": {
        "url": "https://example.com/logo.png"
      }
    },
    "background": {
      "type": "color",
      "color": "#ffffff",
      "noise": 0.1
    },
    "canvas": {
      "width": 1200,
      "height": 630
    }
  }' --output og-image.png

fetch 예시

JavaScript
const response = await fetch("https://og.arkain.com/api/v1/images", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: "og:basic",
    params: {
      title: {
        text: "My Website",
        fontFamily: "pretendard",
        fontWeight: 700,
        fontSize: 52,
        color: "#030712",
      },
      description: {
        text: "Welcome to my site",
        fontFamily: "pretendard",
        fontWeight: 400,
        fontSize: 30,
        color: "#030712",
      },
      logo: { url: "https://example.com/logo.png" },
    },
    background: {
      type: "color",
      color: "#ffffff",
      noise: 0.1,
    },
    canvas: { width: 1200, height: 630 },
  }),
})

const blob = await response.blob()
// Use the blob as needed

사용 가능한 템플릿

10개의 템플릿을 사용할 수 있습니다. 각 템플릿의 기본값은 GET 엔드포인트에서 자동 적용됩니다.

OG Basic
Open Graph1200x630
og:basic
titletext제목 텍스트
descriptiontext설명 텍스트
logoimage로고 이미지 URL
GET 예시
https://og.arkain.com/api/v1/og?template=og:basic&title=Hello%20World&description=My%20description
OG Image Right
Open Graph1200x630
og:image-right
tagtext태그 텍스트
titletext제목 텍스트
logoimage로고 이미지 URL
imageimage우측 이미지 URL
GET 예시
https://og.arkain.com/api/v1/og?template=og:image-right&title=Hello%20World
OG Hero
Open Graph1200x630
og:hero
tagtext태그 텍스트
titletext제목 텍스트
imageimage히어로 이미지 URL
GET 예시
https://og.arkain.com/api/v1/og?template=og:hero&title=Hello%20World
OG Notice
Open Graph1200x630
og:notice
titletext제목 텍스트
descriptiontext설명 텍스트
logoimage로고 이미지 URL
GET 예시
https://og.arkain.com/api/v1/og?template=og:notice&title=Hello%20World&description=My%20description
OG Logos
Open Graph1200x630
og:logos
tagtext태그 텍스트
titletext제목 텍스트
logosimage[]로고 이미지 URL 배열
GET 예시
https://og.arkain.com/api/v1/og?template=og:logos&title=Hello%20World
X Header Basic
Twitter/X1500x500
x:header-basic
titletext제목 텍스트
descriptiontext설명 텍스트
GET 예시
https://og.arkain.com/api/v1/og?template=x:header-basic&title=Hello%20World&description=My%20description
X Header Minimalist
Twitter/X1500x500
x:header-minimalist
titletext제목 텍스트
descriptiontext설명 텍스트
GET 예시
https://og.arkain.com/api/v1/og?template=x:header-minimalist&title=Hello%20World&description=My%20description
X Header Logo
Twitter/X1500x500
x:header-logo
descriptiontext설명 텍스트
logoimage로고 이미지 URL
GET 예시
https://og.arkain.com/api/v1/og?template=x:header-logo&description=My%20description
Discord Banner Basic
Discord960x540
discord:banner-basic
titletext제목 텍스트
descriptiontext설명 텍스트
GET 예시
https://og.arkain.com/api/v1/og?template=discord:banner-basic&title=Hello%20World&description=My%20description
Discord Banner Logo
Discord960x540
discord:banner-logo
descriptiontext설명 텍스트
logoimage로고 이미지 URL
GET 예시
https://og.arkain.com/api/v1/og?template=discord:banner-logo&description=My%20description

지원 글꼴

GET 엔드포인트의 font 파라미터 또는 POST 엔드포인트의 fontFamily 속성에 사용할 수 있는 글꼴입니다.

pretendardnoto-sans-krspoqa-han-sans-neonanum-gothicblack-han-sansdo-hyeonjuagaegud2codinginteropen-sansnoto-sansnoto-sans-jpnoto-sans-tcnoto-sans-scrobotopoppinsmontserratlatomanropeubuntufigtreefira-sansfira-codefira-monosource-code-proibm-plex-monojetbrains-mono

응답

200PNG 이미지 (image/png)
400잘못된 요청 (파라미터 오류)
502폰트 로딩 실패
500서버 오류

성공 응답에는 Cache-Control: public, max-age=86400 헤더가 포함됩니다.