블로그용 Open Graph 이미지 자동 생성 방법 (디자인 스킬 없이도 가능)

Source: Dev.to

왜 Open Graph 이미지가 중요한가

트위터나 LinkedIn에 링크를 공유했을 때 나타나는 미리보기 카드들을 아시나요? 그것이 바로 Open Graph 이미지이며, 클릭률을 좌우할 수 있습니다.

• OG 이미지가 없을 때 – 일반 텍스트만, 미리보기 없음, 참여도 낮음.
• 좋은 OG 이미지가 있을 때 – 눈길을 끄는, 전문적인, 높은 CTR.

OG Image API 사용하기

각 이미지를 직접 디자인하는 대신, 간단한 API 요청으로 실시간 생성할 수 있습니다.

curl -X POST https://ogimageapi.io/api/generate \
  -H "Content-Type: application/json" \
  -H "X-API-Key: your_key" \
  -d '{
    "title": "How to Build a SaaS in 2025",
    "subtitle": "A complete guide",
    "template": "blog",
    "theme": "dark"
  }' \
  --output og-image.png

그게 전부—요청 한 번, 이미지 한 장.

Next.js 블로그와 통합하기

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);

  const ogImageUrl = `https://ogimageapi.io/api/generate?title=${encodeURIComponent(post.title)}&template=blog&theme=dark`;

  return {
    props: { post, ogImageUrl }
  };
}

export default function BlogPost({ post, ogImageUrl }) {
  return (
    <>
      {/* ...post content... */}
    </>
  );
}

사용 가능한 템플릿

• blog – 기사에 최적
• product – 전자상거래 제품
• profile – 저자 페이지
• stats – 메트릭/대시보드
• event – 컨퍼런스/밋업

가격 정책

• 월 25장 이미지 무료 – 대부분 개인 블로그에 충분합니다.

직접 사용해 보기

ogimageapi.io에서 확인해 보세요.

OG 이미지를 만들 때 어떤 방법을 사용하시나요? 다른 접근법도 듣고 싶어요!