Next.js App Router 기반 동적 OG Image 생성 및 클릭률 2~3배 향상 설계

Context

단순 텍스트 URL 공유 시 낮은 사용자 인게이지먼트 발생 문제 해결 필요. 정적 이미지로는 수많은 동적 페이지에 대응하는 확장성 확보에 한계 노출.

Technical Solution

• 정적 페이지 대상 Metadata export를 통한 단순 HTML head 태그 주입 설계
• 동적 콘텐츠 대응을 위한 generateMetadata 함수 기반 Request-time 메타데이터 연산 구조 채택
• Satori 엔진 기반 @vercel/og 라이브러리를 활용한 JSX to SVG to PNG 렌더링 파이프라인 구축
• Edge Runtime 적용을 통한 이미지 생성 지연 시간 최소화 및 전역 배포 최적화
• 외부 API 연동을 통한 이미지 생성 엔드포인트 유지보수 비용 제거 및 인프라 단순화
• twitter:card 설정을 summary_large_image로 지정하여 시각적 점유율 최대화 전략 적용