Next.js App Router에서 구글 검색 노출(SEO)을 위한 Dynamic OG Image 자동 생성법

블로그나 서비스를 트위터, 카카오톡, 링크드인에 공유할 때 글의 제목과 카테고리가 예쁘게 그려진 썸네일 이미지가 자동으로 뜬다면 클릭률(CTR)이 급격히 상승합니다.

과거에는 포스트마다 일일이 포토샵이나 피그마로 썸네일을 만든 뒤 업로드해야 했지만, Next.js 13+ App Router에서는 @vercel/og (ImageResponse) 기능 덕분에 코드 몇 줄로 포스트 제목이 실시간 삽입된 **동적 OG 이미지(Dynamic Open Graph Image)**를 100% 자동 생성할 수 있습니다.

이번 포스트에서는 Next.js 프로젝트에 동적 OG 이미지를 적용하는 방법을 단계별로 알아봅니다.

1. ImageResponse 동작 원리

@vercel/og 기술은 Satori 라이브러리를 기반으로 작동합니다.
HTML/CSS(JSX) 스타일 코드를 입력받아 에지 네트워크(Edge Runtime)에서 찰나의 순간에 PNG 이미지로 렌더링하여 클라이언트에게 전달합니다.

• 장점:
  • 포스트 빌드 타임 저장이 아닌 온디맨드(On-demand) 렌더링
  • Tailwind CSS 형태의 인라인 스타일링 지원
  • 한글 커스텀 폰트(Gmarket Sans, Pretendard 등) 탑재 가능

2. OG Image 라우트 핸들러 만들기

app/posts/[slug]/opengraph-image.tsx 위치에 아래 코드를 작성해 보세요. Next.js가 해당 경로를 자동으로 인식하여 메타태그를 생성해 줍니다.

import { ImageResponse } from 'next/og';
 
export const runtime = 'edge';
 
export const alt = 'GoldenWhale Blog Post';
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = 'image/png';
 
export default async function Image({ params }: { params: { slug: string } }) {
  // 포스트 데이터 가져오기 (예시)
  const title = decodeURIComponent(params.slug).replace(/-/g, ' ');

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 48,
          background: 'linear-gradient(to bottom right, #0f172a, #1e293b)',
          color: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'center',
          padding: '80px',
        }}
      >
        <div
          style={{
            fontSize: 20,
            color: '#38bdf8',
            marginBottom: 20,
            fontWeight: 'bold',
          }}
        >
          GOLDENWHALE TECH BLOG
        </div>
        <div
          style={{
            fontSize: 52,
            fontWeight: 'bold',
            lineHeight: 1.3,
            wordBreak: 'keep-all',
          }}
        >
          {title}
        </div>
      </div>
    ),
    {
      ...size,
    }
  );
}

3. SEO 메타데이터 자동 연동

opengraph-image.tsx 파일이 포스트 디렉토리 안에 위치해 있으면, Next.js의 generateMetadata 설정 시 <head> 태그 내부에 아래와 같은 Open Graph 태그가 자동으로 삽입됩니다.

<meta property="og:image" content="https://yourdomain.com/posts/my-post-slug/opengraph-image" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

💡 성능 및 캐싱 팁

• export const runtime = 'edge';를 반드시 추가하여 초고속 에지 서버리스 환경에서 실행되도록 하세요.
• 공유 시 로딩 시간을 줄이기 위해 Vercel Edge Network의 Cache-Control 헤더가 자동으로 적용되어, 첫 렌더링 이후에는 CDN 캐시에서 이미지 파일이 바로 반환됩니다.

이제 썸네일 제작에 드는 시간을 0으로 줄이고, 소셜 미디어 유입률과 SEO 검색 순위를 동시에 끌어올려 보세요!