링크를 누군가에게 보냈는데 제목도 이상하고, 설명도 사이트 기본 문구로만 나오고, 이미지가 아예 안 뜨는 경우가 있습니다. 반대로 잘 만든 사이트는 카카오톡, X/Twitter, 페이스북, 디스코드, 슬랙에 URL만 붙여도 제목, 설명, 큰 썸네일이 깔끔하게 뜹니다. 이 차이를 만드는 핵심이 바로 OG 이미지와 공유 메타데이터입니다.

개발을 처음 배우는 입장에서는 이것이 단순한 이미지 업로드처럼 보일 수 있습니다. 하지만 실제로는 페이지의 HTML head, Open Graph 메타 태그, Twitter Card 태그, 이미지 생성 라우트, 캐시 정책, 공유 플랫폼 크롤러가 함께 움직이는 구조입니다. 특히 Q&A, 블로그, 상품, 뉴스처럼 상세 페이지가 많은 서비스에서는 페이지마다 고유한 제목과 이미지를 만들어야 하므로 동적 OG 이미지가 중요해집니다.

핵심 포인트: OG 이미지는 그냥 예쁜 썸네일이 아니라, 링크가 다른 플랫폼에서 어떻게 보일지를 결정하는 공유용 대표 이미지입니다. 페이지별로 제목·설명·이미지를 다르게 만들면 사용자가 링크를 눌러야 할 이유가 훨씬 선명해집니다.

OG 이미지란 무엇인가

링크를 공유했을 때 보이는 대표 이미지

OG 이미지는 Open Graph 이미지의 줄임말입니다. Open Graph는 원래 페이스북이 만든 링크 미리보기 규격인데, 지금은 카카오톡, 디스코드, 슬랙, 노션, 텔레그램, 여러 메신저와 SNS가 비슷한 방식으로 사용합니다.

예를 들어 어떤 Q&A 글을 공유한다고 생각해보겠습니다. URL만 보이면 이런 느낌입니다.

https://vibecoding365days.com/qna/example

이렇게 주소만 보이면 사용자는 이 링크가 무엇인지 바로 알기 어렵습니다. 하지만 OG 메타가 잘 잡혀 있으면 공유 화면에 제목, 설명, 이미지가 있는 카드가 뜹니다.

즉 OG 이미지는 링크 카드 안에서 가장 눈에 잘 띄는 시각 요소입니다. 글 제목이 좋아도 이미지가 없으면 공유 화면이 밋밋해지고, 반대로 이미지와 설명이 잘 붙으면 클릭률과 신뢰도가 올라갑니다.

OG 이미지와 일반 본문 이미지는 다르다

본문에 들어가는 이미지는 사용자가 페이지에 들어와서 보는 이미지입니다. 반면 OG 이미지는 사용자가 페이지에 들어오기 전, 링크를 공유받은 화면에서 먼저 보는 이미지입니다.

그래서 글 안에 이미지가 있다고 해서 자동으로 공유 썸네일이 예쁘게 잡히는 것은 아닙니다. 공유 플랫폼이 어떤 이미지를 가져갈지 명확히 알려줘야 합니다. 그 역할을 하는 것이 og:image입니다.

Open Graph와 Twitter Card의 차이

Open Graph는 대부분의 공유 플랫폼이 읽는 기본 규격

Open Graph 메타 태그는 HTML head 안에 들어갑니다. 핵심은 네 가지입니다.

예를 들어 Q&A 상세 페이지라면 og:title은 사이트 전체 제목이 아니라 해당 질문 제목이어야 합니다. og:description은 사이트 소개 문구가 아니라 답변 요약이어야 합니다. og:image는 모든 페이지가 같은 로고 이미지를 쓰는 것보다 질문별 썸네일을 쓰는 편이 좋습니다.

Twitter Card는 X/Twitter용 공유 카드 규격

X/Twitter는 Open Graph도 일부 참고하지만, twitter:* 메타를 별도로 넣는 것이 안전합니다. 대표적으로 다음 값을 씁니다.

여기서 summary_large_image는 말 그대로 큰 이미지가 있는 카드 형태입니다. 작은 요약 카드보다 시각적으로 훨씬 눈에 잘 띄기 때문에 글, Q&A, 상품, 랜딩 페이지 대부분에 유리합니다.

실무 기준: Open Graph와 Twitter Card를 둘 다 넣어두면 카카오톡, 페이스북, 디스코드, X/Twitter처럼 다양한 플랫폼에서 더 안정적으로 링크 프리뷰가 나옵니다.

정적 OG 이미지와 동적 OG 이미지

정적 OG 이미지는 한 장을 미리 만들어 두는 방식

정적 OG 이미지는 말 그대로 이미지 파일을 미리 만들어서 올리는 방식입니다. 예를 들어 public 폴더나 CDN에 og-default.png 같은 이미지를 넣고 모든 페이지가 그 이미지를 쓰게 할 수 있습니다.

장점은 단순합니다. 디자인 파일 하나만 있으면 되고, 생성 비용도 거의 없습니다. 회사 소개 페이지, 고정 랜딩 페이지, 이벤트 페이지처럼 내용이 자주 바뀌지 않는 곳에는 충분히 좋습니다.

단점은 모든 페이지가 비슷하게 보인다는 점입니다. Q&A가 100개, 블로그 글이 500개 있는데 모두 같은 썸네일이 뜨면 사용자는 어떤 링크가 어떤 내용인지 구분하기 어렵습니다.

동적 OG 이미지는 페이지마다 자동으로 만드는 방식

동적 OG 이미지는 URL에 따라 서버가 이미지를 그때그때 만들어 주는 방식입니다. 예를 들어 Q&A 상세 페이지가 있다면 다음처럼 동작합니다.

1. 사용자가 Q&A 페이지를 공유합니다.
2. 공유 플랫폼이 해당 페이지 HTML을 읽습니다.
3. HTML 안에서 og:image URL을 찾습니다.
4. 공유 플랫폼이 그 이미지 URL을 다시 요청합니다.
5. 서버가 질문 제목과 답변 요약을 DB에서 읽습니다.
6. 1200x630 PNG 이미지를 생성해서 응답합니다.
7. 공유 플랫폼은 그 이미지를 링크 카드에 표시하고 자체 캐시에 저장합니다.

이 방식의 장점은 페이지가 많아도 이미지 파일을 하나씩 만들 필요가 없다는 것입니다. Q&A가 새로 생기면 /qna/질문ID/opengraph-image 같은 URL이 자동으로 그 질문에 맞는 이미지를 만들어 줍니다.

Next.js에서 동적 OG 이미지는 어떻게 동작하나

generateMetadata가 공유 메타를 만든다

Next.js App Router에서는 페이지 파일에서 generateMetadata 함수를 사용해 SEO 메타를 만들 수 있습니다. 여기서 title, description뿐 아니라 openGraph와 twitter 값을 함께 반환합니다.

개념적으로는 이런 일을 합니다.

중요한 점은 페이지 title만 바꿔서는 부족하다는 것입니다. 브라우저 탭 제목은 바뀌어도 카카오톡이나 X가 읽는 og:title, og:description, og:image가 여전히 사이트 기본값이면 공유 미리보기는 그대로입니다.

opengraph-image.tsx가 실제 PNG를 만든다

Next.js에는 특별한 파일 규칙이 있습니다. 어떤 route segment 안에 opengraph-image.tsx를 만들면 그 경로의 Open Graph 이미지 라우트가 됩니다.

예를 들어 Q&A 상세 페이지가 다음 구조라면:

• src/app/qna/[questionId]/page.tsx
• src/app/qna/[questionId]/opengraph-image.tsx

이런 이미지 URL이 생깁니다.

/qna/abc-123/opengraph-image

opengraph-image.tsx 파일은 일반 페이지처럼 HTML을 보여주는 것이 아니라 PNG 이미지를 응답합니다. 보통 next/og의 ImageResponse를 사용합니다. 이 API는 JSX처럼 생긴 코드를 이미지로 렌더링해 줍니다.

1200x630을 많이 쓰는 이유

OG 이미지는 보통 1200x630 비율을 권장합니다. 비율로 보면 약 1.91:1입니다. 페이스북, 카카오톡, 디스코드, X/Twitter에서 비교적 안정적으로 보이는 크기입니다.

작은 이미지를 쓰면 흐릿하게 보일 수 있고, 정사각형이나 너무 긴 이미지를 쓰면 플랫폼이 임의로 잘라낼 수 있습니다. 그래서 특별한 이유가 없다면 1200x630을 기본값으로 두는 것이 안전합니다.

실제 구현 흐름을 한 장면으로 이해하기

사용자가 링크를 공유하는 순간 벌어지는 일

상황을 하나로 묶어 보겠습니다. 어떤 사람이 Q&A 링크를 카카오톡에 붙여 넣습니다. 그러면 카카오톡은 그 URL을 그냥 문자열로만 보여주지 않고, 먼저 사이트에 몰래 요청을 보냅니다. 이 요청을 흔히 크롤러 또는 공유 봇 요청이라고 부릅니다.

카카오톡 크롤러는 HTML head를 읽고 og:title, og:description, og:image를 찾습니다. 그리고 og:image에 적힌 주소로 다시 요청합니다. 그 주소가 동적 OG 이미지 라우트라면 Vercel/Next.js가 ImageResponse를 실행해서 PNG를 만들어 줍니다.

그 뒤 카카오톡은 그 결과를 자기 서버에 캐시합니다. 그래서 사이트를 수정했는데도 카카오톡에서 예전 이미지가 한동안 보일 수 있습니다. 이건 사이트가 안 바뀐 것이 아니라 공유 플랫폼 쪽 캐시가 남아 있는 경우가 많습니다.

캐시는 두 군데에서 걸릴 수 있다

동적 OG 이미지를 이해할 때 캐시를 꼭 알아야 합니다.

그래서 OG 이미지를 고친 직후 테스트할 때는 브라우저에서 이미지 URL을 직접 열어 200 image/png가 나오는지 확인하고, HTML에 og:image가 제대로 들어갔는지 확인해야 합니다. 공유 앱에서 바로 안 바뀌더라도 메타가 맞다면 조금 기다리거나 플랫폼의 캐시 갱신 도구를 써야 할 수 있습니다.

좋은 OG 이미지에 들어가야 할 요소

제목은 짧고 크게 보여야 한다

OG 이미지는 작은 모바일 화면에서도 보입니다. 그래서 제목은 길면 안 됩니다. 글 제목 전체를 무리하게 다 넣기보다 핵심만 크게 보여주는 것이 좋습니다.

좋은 제목 예시는 다음과 같습니다.

• 동적 OG 이미지란?
• 링크 공유 썸네일 만드는 법
• Q&A 공유 메타 설정하기
• Vercel에서 OG 이미지 생성하기

나쁜 제목은 너무 길고 정보가 분산된 형태입니다.

• Next.js App Router에서 Open Graph와 Twitter Card와 카카오톡 링크 공유 미리보기와 동적 이미지 생성과 캐싱을 모두 이해하는 완전 정복 가이드

이런 제목은 검색 제목으로도 길고, 이미지 안에서도 잘립니다.

설명은 한 문장으로 클릭 이유를 줘야 한다

설명은 사용자가 왜 눌러야 하는지 알려주는 역할입니다. 예를 들어 다음처럼 쓰면 좋습니다.

핵심은 기능명이 아니라 사용자가 얻게 될 결과입니다.

브랜드와 카테고리를 넣으면 신뢰가 올라간다

OG 이미지에는 보통 다음 요소가 들어가면 좋습니다.

1. 사이트명 또는 로고
2. 카테고리 또는 토픽
3. 글 제목
4. 짧은 요약
5. 도메인 또는 섹션명

예를 들어 Vive Coding 365라면 이미지 상단에 Vive Coding 365, 우측에 SEO와 링크 프리뷰, 중앙에 글 제목, 하단에 vibecoding365days.com/vibe-coding 같은 식으로 넣을 수 있습니다.

AI에게 어떻게 요청하면 되나

가장 짧은 요청 문장

AI에게는 이렇게 말하면 됩니다.

상세 페이지에 페이지별 Dynamic OG Image와 Twitter Card 메타를 붙여줘. 카카오톡, X/Twitter, 디스코드에서 제목, 설명, 썸네일이 페이지별로 다르게 보이게 해줘.

이 문장만으로도 방향은 전달됩니다. 하지만 실제 개발에서는 요구사항을 더 구체적으로 주는 것이 좋습니다.

개발자용 상세 요청 템플릿

아래처럼 요청하면 AI가 훨씬 정확하게 구현합니다.

실제 프롬프트 예시는 이렇습니다.

Next.js App Router에서 /vibe-coding/[slug] 상세 페이지마다 동적 OG 이미지를 구현해줘. generateMetadata에서 openGraph와 twitter 메타를 글별로 설정하고, opengraph-image.tsx에서 ImageResponse로 1200x630 PNG를 생성해줘. 이미지에는 글 제목, excerpt, topic, 사이트명을 넣어줘. 카카오톡, X/Twitter, 페이스북, 디스코드에서 링크 공유 시 제목·설명·썸네일이 제대로 보이게 하고, 회귀 테스트도 추가해줘.

비개발자용 요청 문장

개발 용어가 부담스럽다면 이렇게 말해도 됩니다.

링크를 카톡이나 X에 공유했을 때 사이트 기본 이미지가 아니라 이 글만의 제목, 설명, 썸네일이 뜨게 만들어줘. 글마다 자동으로 다른 공유 이미지를 만들어 주면 좋겠어.

AI는 이 요청을 개발 용어로 바꾸면 Dynamic Open Graph Image, Twitter Card, link preview metadata 구현으로 이해해야 합니다.

구현할 때 자주 실수하는 부분

title과 og:title을 헷갈리는 문제

브라우저 탭 제목이 잘 나온다고 공유 제목도 잘 나오는 것은 아닙니다. title은 브라우저와 검색 결과에 영향을 주고, og:title은 공유 카드에 영향을 줍니다. 물론 둘을 같은 값으로 맞출 수는 있지만, 둘 다 명시적으로 확인해야 합니다.

이미지를 만들었는데 og:image에 연결하지 않는 문제

opengraph-image.tsx를 만들었더라도 페이지 메타에서 og:image가 원하는 URL을 가리키지 않으면 공유 플랫폼이 다른 이미지를 가져갈 수 있습니다. Next.js의 파일 기반 메타가 자동으로 잡히는 경우도 있지만, 동적 상세 페이지에서는 명시적으로 image URL을 넣어 테스트하는 편이 안전합니다.

이미지 안에 글자를 너무 많이 넣는 문제

OG 이미지는 포스터가 아닙니다. 작은 모바일 미리보기에서도 읽혀야 하므로 제목은 짧고 크게, 설명은 한두 줄 정도가 좋습니다. 자세한 내용은 페이지 안에서 읽게 해야 합니다.

공유 플랫폼 캐시를 버그로 착각하는 문제

사이트 코드는 맞는데 카카오톡이나 X에서 예전 이미지가 계속 보일 수 있습니다. 이때는 먼저 브라우저에서 og:image URL을 직접 열어 PNG가 새로 나오는지 확인해야 합니다. HTML 메타도 맞고 이미지 URL도 맞다면, 남은 문제는 플랫폼 캐시일 가능성이 큽니다.

체크리스트

발행 전 확인할 것

1. 페이지 title이 글 제목 중심으로 보이는가
2. og:title이 사이트 기본 제목이 아니라 페이지 제목인가
3. og:description이 사이트 기본 설명이 아니라 글 요약인가
4. og:image가 1200x630 이미지 URL을 가리키는가
5. twitter:card가 summary_large_image인가
6. twitter:image가 같은 공유 이미지를 가리키는가
7. canonical URL이 원본 상세 페이지인가
8. 이미지 URL을 직접 열면 200 image/png가 나오는가
9. 모바일에서 이미지 안 텍스트가 너무 작지 않은가
10. 배포 후 실제 라이브 URL에서 다시 확인했는가

좋은 메타 설명 기준

메타 설명은 120~160자 정도가 무난합니다. 너무 짧으면 맥락이 부족하고, 너무 길면 잘립니다. 좋은 설명은 보통 다음 세 가지를 포함합니다.

• 이 글이 다루는 문제
• 독자가 얻게 될 결과
• 핵심 기술 또는 상황

예를 들어 이 글의 설명은 이렇게 잡을 수 있습니다.

카카오톡, X/Twitter, 페이스북, 디스코드에서 링크를 공유할 때 제목·설명·썸네일이 제대로 보이게 하는 동적 OG 이미지와 Open Graph 메타 설정을 자세히 설명합니다.

문제는 링크 공유 미리보기이고, 결과는 제목·설명·썸네일이 제대로 보이는 것이며, 핵심 기술은 동적 OG 이미지와 Open Graph 메타입니다.

Vive Coding 365에서는 어떻게 활용하면 좋은가

Q&A 상세 페이지

Q&A는 질문마다 제목과 답변 요약이 다릅니다. 따라서 모든 Q&A가 같은 사이트 기본 이미지로 보이면 아깝습니다. 질문 제목과 답변 요약이 공유 이미지에 들어가면, 사용자는 링크를 열기 전에도 어떤 내용인지 바로 이해합니다.

예를 들어 연애 질문, 코딩 질문, 배포 질문, Git 오류 질문이 모두 Q&A에 들어올 수 있습니다. 이때 각 질문별 OG 이미지가 다르면 공유 화면에서 콘텐츠의 맥락이 분명해집니다.

VIBE 코딩 가이드

/vibe-coding 글은 학습 콘텐츠입니다. 여기서는 글 제목, 학습 주제, 핵심 요약, 사이트명을 넣은 이미지가 좋습니다. 예를 들어 이 글이라면 다음 요소가 들어가면 됩니다.

VIBE 코딩 사전

사전 항목은 용어 설명이 핵심이므로, 용어명과 한 줄 정의를 크게 보여주면 좋습니다. 예를 들어 DOM, CORS, Promise, Hydration 같은 용어를 공유했을 때 이미지 안에 용어와 쉬운 설명이 뜨면 학습 자료처럼 보입니다.

마무리

OG 이미지는 작아 보이지만 콘텐츠 운영에서 매우 중요한 장치입니다. 사용자가 링크를 클릭하기 전에 가장 먼저 보는 것이 공유 카드이고, 그 공유 카드의 인상을 결정하는 것이 제목, 설명, 이미지입니다.

특히 Q&A, 블로그, 뉴스, 사전처럼 상세 페이지가 많은 서비스에서는 정적 이미지 한 장보다 동적 OG 이미지가 훨씬 유리합니다. 페이지별 데이터를 읽어서 제목과 요약을 이미지에 넣으면, 콘텐츠가 공유되는 순간에도 그 페이지의 맥락이 살아납니다.

핵심 요약:

• OG 이미지는 링크 공유 시 보이는 대표 썸네일입니다.
• Open Graph 메타는 카카오톡, 페이스북, 디스코드 등에서 중요합니다.
• Twitter Card 메타는 X/Twitter 공유 카드에 중요합니다.
• Next.js에서는 generateMetadata와 opengraph-image.tsx로 동적 공유 메타를 만들 수 있습니다.
• ImageResponse를 쓰면 1200x630 PNG를 코드로 생성할 수 있습니다.
• 공유 플랫폼은 자체 캐시가 있으므로 배포 직후 바로 안 바뀌어도 메타와 이미지 URL을 먼저 확인해야 합니다.
• AI에게 요청할 때는 Dynamic OG Image, Open Graph metadata, Twitter Card, summary_large_image, ImageResponse라는 키워드를 함께 주면 좋습니다.