동적 OG 이미지란? 링크 공유 썸네일을 제대로 만드는 법

OG 이미지는 링크를 공유했을 때 보이는 대표 썸네일입니다. 글 제목과 설명이 좋아도 공유 카드가 비어 있거나 엉뚱한 이미지가 뜨면 클릭률은 떨어집니다. 특히 콘텐츠 사이트에서는 OG 이미지가 검색 결과와 SNS 유입의 첫인상 역할을 합니다.

이 글의 핵심은 단순합니다. OG 이미지는 예쁜 장식이 아니라 링크 유통을 위한 메타데이터 계약입니다. 페이지마다 제목, 설명, 이미지 URL, canonical URL이 정확해야 카카오톡, X, 디스코드, 페이스북 같은 플랫폼이 제대로 된 프리뷰를 만들 수 있습니다.

핵심 결론 먼저

좋은 링크 프리뷰는 네 가지가 맞아야 합니다.

OG 이미지 구현은 이미지를 하나 만드는 일이 아닙니다. 메타데이터 생성, 이미지 라우트, 캐시 정책, 실제 공유 검증이 한 세트입니다.

OG 이미지란 무엇인가

Open Graph는 웹페이지가 소셜 플랫폼에 자신을 설명하는 방식입니다. HTML head에 들어가는 og:title, og:description, og:image, og:url 같은 태그를 플랫폼 크롤러가 읽고 링크 카드를 만듭니다.

예를 들어 블로그 글을 카카오톡에 붙여 넣으면 카카오 서버가 해당 URL을 요청합니다. HTML head에서 OG 태그를 찾고, 이미지 URL을 다시 가져와 캐시에 저장한 뒤, 사용자에게 링크 카드를 보여 줍니다.

중요한 점은 사용자 브라우저가 아니라 플랫폼 크롤러가 먼저 본다는 것입니다. 그래서 로그인 뒤에만 보이는 이미지, robots에 막힌 이미지, 너무 큰 이미지, 느린 이미지 URL은 프리뷰에서 실패할 수 있습니다.

정적 OG와 동적 OG의 차이

정적 OG 이미지는 모든 페이지가 같은 대표 이미지를 씁니다. 구현은 쉽지만 글마다 차별점이 없습니다. 동적 OG 이미지는 페이지 제목, 카테고리, 날짜, 작성자 등을 이용해 글마다 다른 이미지를 만듭니다.

콘텐츠가 계속 쌓이는 VIBE 코딩 사이트라면 동적 OG가 유리합니다. 검색·SNS·메신저에서 글 단위 신호를 줄 수 있기 때문입니다.

Next.js App Router에서 동작하는 방식

Next.js App Router에서는 보통 두 파일이 역할을 나눕니다.

핵심은 페이지 데이터와 메타데이터 데이터가 어긋나면 안 된다는 점입니다. 상세 페이지 제목은 바뀌었는데 OG title이 예전 제목이면 공유 카드가 신뢰를 잃습니다. 가능하면 같은 데이터 소스에서 페이지와 metadata를 함께 생성하세요.

generateMetadata에서 해야 할 일

메타데이터 생성 함수는 페이지의 공유 계약을 만드는 곳입니다. 최소한 다음 값을 명확히 넣습니다.

• title
• description
• canonical URL
• openGraph title/description/url/images
• twitter card/title/description/images

좋은 설명문은 본문 첫 문장을 그대로 복사한 것이 아닙니다. 검색 결과와 공유 카드에서 보이는 광고문처럼 써야 합니다. 누가, 무엇을, 어떤 결과를 얻는지가 120~150자 안에 들어가면 좋습니다.

동적 이미지 라우트에서 해야 할 일

동적 OG 이미지는 보통 ImageResponse 계열로 만듭니다. 여기서 중요한 것은 디자인보다 안정성입니다.

• 크기는 1200×630 또는 1600×900 계열을 기준으로 잡습니다.
• 제목은 2~3줄 안에 들어오게 제한합니다.
• 좌우 안전 여백을 넉넉히 둡니다.
• 너무 작은 글자와 장식 요소를 피합니다.
• 외부 폰트 요청 실패에 대비합니다.
• 이미지 생성에 필요한 데이터 조회가 너무 느리지 않게 합니다.

OG 이미지는 큰 화면에서 보는 배너가 아니라 작은 카드입니다. 작은 카드에서 읽히는 제목과 대비가 가장 중요합니다.

이미지 크기와 디자인 기준

플랫폼마다 이미지를 자르는 방식이 다릅니다. 그래서 가장자리에는 중요한 텍스트를 두지 않습니다.

텍스트가 너무 많으면 썸네일이 아니라 문서 캡처처럼 보입니다. 제목, 카테고리, 짧은 보조 문장 정도면 충분합니다.

캐시를 반드시 이해해야 한다

OG 이미지를 바꿨는데 공유 카드가 그대로인 경우가 많습니다. 이유는 플랫폼 캐시입니다.

그래서 운영 절차에는 캐시 검증이 들어가야 합니다.

1. 페이지 HTML에서 OG 태그가 올바른지 확인합니다.
2. og:image URL이 직접 열리는지 확인합니다.
3. 플랫폼 debugger나 validator로 재수집을 요청합니다.
4. 실제 메신저나 SNS에서 링크를 붙여 봅니다.
5. 그래도 안 바뀌면 이미지 URL에 버전/hash를 바꿉니다.

가장 확실한 방법은 이미지 파일명이 내용 변경 시 달라지게 만드는 것입니다. 같은 URL의 이미지만 덮어쓰면 플랫폼 캐시가 오래 남을 수 있습니다.

실제 검증 절차

공개 전에는 다음 순서로 확인합니다.

• 상세 페이지 HTML에 og:title, og:description, og:image가 있는가?
• og:image URL이 200으로 열리는가?
• 이미지 Content-Type이 올바른가?
• 이미지 크기가 너무 작거나 너무 크지 않은가?
• 제목이 카드 안에서 잘리지 않는가?
• 공유 플랫폼 debugger에서 새 카드가 보이는가?

이 검증 없이 "이미지 생성 코드가 있다"고 끝내면 안 됩니다. OG는 코드가 아니라 외부 플랫폼이 읽는 계약이기 때문입니다.

AI에게 맡기는 프롬프트

이 글의 동적 OG 이미지를 구현하라. generateMetadata와 opengraph-image가 같은 데이터 소스를 쓰게 하고, title/description/image/canonical URL을 모두 설정하라. 이미지는 작은 링크 카드에서 읽히도록 제목 2~3줄, 안전 여백, 높은 대비를 유지하라. 구현 후 HTML head의 OG 태그, 이미지 URL 200 응답, 플랫폼 공유 미리보기 검증 방법을 보고하라.

이렇게 지시하면 AI가 단순히 예쁜 이미지만 만들지 않고 운영 가능한 링크 프리뷰를 완성합니다.

자주 실수하는 부분

첫째, 상대 경로를 og:image에 넣는 실수입니다. 대부분의 플랫폼은 절대 URL을 기대합니다.

둘째, 이미지를 로그인 뒤에 두는 실수입니다. 크롤러가 접근할 수 없는 이미지는 프리뷰에 나오지 않습니다.

셋째, 제목이 너무 길어 잘리는 실수입니다. OG 이미지는 모바일 카드에서 먼저 봐야 합니다.

넷째, 캐시를 모르는 실수입니다. 코드가 맞아도 플랫폼 캐시가 남아 있으면 사용자에게는 예전 카드가 보입니다.

체크리스트

• title과 description이 본문 첫 문장 복붙이 아닌가?
• og:image가 절대 URL인가?
• 이미지 URL이 공개 200 응답인가?
• 모바일 카드에서 제목이 읽히는가?
• 플랫폼 캐시 재수집을 확인했는가?
• 이미지 파일명에 버전 또는 hash가 들어가는가?
• 실제 카카오톡/디스코드/X 공유에서 카드가 보이는가?

마무리

동적 OG 이미지는 SEO 장식이 아닙니다. 콘텐츠가 검색, 메신저, SNS를 통해 이동할 때 붙는 포장지입니다. 포장지가 비어 있으면 좋은 글도 덜 클릭됩니다.

좋은 OG는 제목·설명·이미지·캐시 검증이 함께 맞는 상태입니다. 이 네 가지를 운영 루프로 만들면 링크 공유 썸네일은 매번 운에 맡기는 요소가 아니라 관리 가능한 성장 채널이 됩니다.