VibeCoding 365 로고 VibeCoding 365

링크 공유 썸네일이 비는 이유 | 동적 OG 이미지 계약 맞추기

카카오톡과 SNS에서 링크 카드가 비거나 엉뚱한 이미지가 뜰 때 확인하는 OG 메타데이터 계약 가이드입니다. 동적 OG, canonical 일치, 플랫폼 캐시 재수집 순서를 처음부터 자세히 적었습니다.

심층 학습 가이드

링크 공유 썸네일이 비는 이유 | 동적 OG 이미지 계약 맞추기

심층 학습 가이드

링크 공유 썸네일이 비는 이유 | 동적 OG 이미지 계약 맞추기

title, description, image, canonical과 캐시 재수집까지

핵심 주제
SEO와 링크 프리뷰
예상 시간
5분
업데이트
2026.04.26
키워드
OG 이미지 · Open Graph · 동적 OG

글 제목과 설명이 좋아도 공유 카드가 비어 있거나 엉뚱한 이미지가 뜨면 클릭은 떨어집니다. OG 이미지는 예쁜 장식이 아니라 링크 유통을 위한 메타데이터 계약입니다. 페이지마다 제목, 설명, 이미지 URL, canonical이 맞아야 카카오톡과 X, 디스코드, 페이스북이 프리뷰를 만듭니다.

읽는 데는 약 10분이면 됩니다. 이미 한 장만 만드는 일이 아니라, 메타데이터 생성과 이미지 라우트, 캐시, 실제 공유 검증이 한 세트라는 점을 먼저 잡습니다. 예쁜 시안만 만들고 메타를 안 맞추면, 공유했을 때 빈 카드가 나와 클릭이 사라집니다. 구현과 검증을 같은 작업으로 묶어 두세요.

소셜 링크 프리뷰
플랫폼이 OG를 읽어 썸네일을 만드는 흐름

막히는 지점도 비슷합니다. 이미지 시안만 예쁘게 만들고 head 태그를 안 맞추거나, 배포 URL이 아닌 로컬만 확인하거나, 이미지를 바꿨는데 플랫폼 캐시를 비우지 않는 경우입니다. 아래는 계약 네 칸부터 재수집까지 한 번에 닫는 순서입니다.

프리뷰가 깨지는 네 칸

요소역할실패 시
title카드 제목클릭 이유가 약해짐
description요약맥락이 안 보임
image썸네일빈 카드나 엉뚱한 이미지
urlcanonical중복 URL과 캐시 혼선

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

OG 메타 head
head의 OG 태그가 카드의 원천

정적 OG와 동적 OG

정적 OG는 모든 페이지가 같은 대표 이미지를 씁니다. 구현은 쉽지만 글마다 차별이 없습니다. 동적 OG는 제목과 카테고리 등으로 글마다 다른 이미지를 만듭니다. 콘텐츠 사이트라면 동적이 클릭 이유에 유리합니다.

Next.js App Router에서 맞출 것

generateMetadata에서 title, description, openGraph.images, alternates.canonical을 페이지 데이터와 맞춥니다. 이미지 라우트(예: opengraph-image)는 크롤러가 접근 가능해야 하고, 보통 1200x630 근처를 씁니다.

💡 Tip: 로컬에서 예쁘게 보여도 크롤러가 못 받으면 실패입니다. 배포 URL로 디버거를 돌리세요.

캐시를 빼먹으면 옛 썸네일이 남는다

플랫폼은 OG를 캐시합니다. 이미지를 바꿨는데 카드가 그대로면 캐시입니다. Facebook Sharing Debugger, X Card Validator 등으로 재수집합니다. 이미지 URL을 버전 쿼리로 바꾸는 방법도 있습니다.

⚠️ 주의: canonical과 og:url이 어긋나면 플랫폼이 다른 페이지를 캐시할 수 있습니다. 공개 URL 하나로 맞추세요.

검증 순서

배포 URL의 HTML head에 og:title, og:description, og:image가 있는지 확인합니다. 이미지 URL을 새 탭으로 열어 200인지 봅니다. 카카오/X/Facebook 디버거로 재수집합니다. 모바일에서도 카드가 깨지지 않는지 봅니다.

AI에게 맡길 때

「예쁜 OG 만들어줘」보다 「generateMetadata와 이미지 라우트를 페이지 slug 기준으로 연결하고, 1200x630, 크롤러 접근 가능, canonical 일치」처럼 계약을 적습니다.

이미지 디자인에서 자주 깨지는 것

텍스트가 너무 작으면 모바일 카드에서 읽히지 않습니다. 좌우 여백을 두고, 제목은 한두 줄로 자릅니다. 배경과 글자 대비가 낮으면 「이미지는 있는데 정보가 없는」 카드가 됩니다. 브랜드 색을 쓰되, 제목이 먼저 읽히는지를 기준으로 잡습니다.

파일은 WebP나 PNG/JPEG 모두 가능하지만, 크롤러가 200으로 받는지가 더 중요합니다. 인증이 필요한 CDN 경로, 만료되는 서명 URL은 피합니다.

프레임워크가 달라도 같은 계약

Next.js의 generateMetadata는 예시일 뿐입니다. Astro나 Cloudflare Worker HTML이어도 og:title, og:description, og:image, og:url만 head에 정확히 있으면 플랫폼은 같은 방식으로 카드를 만듭니다. 생성 지점이 어디든 크롤러가 받는 HTML이 진실입니다.

로컬 프리뷰만 보고 끝내면 실패합니다. 배포 URL의 「페이지 소스 보기」로 태그를 확인하고, 이미지 URL을 새 탭에서 열어 보세요.

운영 중 이미지가 바뀌는 경우

글 제목을 고치면 동적 OG도 다시 그려야 합니다. 이미지 URL이 같으면 플랫폼 캐시가 옛 그림을 붙잡을 수 있으니, 빌드 해시나 ?v=를 붙이거나 디버거로 재수집합니다. 팀에서는 「제목 변경 PR에 OG 재검증」을 체크리스트에 넣으면 사고가 줄어듭니다.

출처와 링크

조사 기준: 2026년 7월. 플랫폼 캐시 동작은 바뀔 수 있으니 배포 후 디버거로 재확인하세요.

자주 묻는 질문

모든 페이지에 같은 OG를 써도 되나요?

가능하지만 콘텐츠 사이트에서는 글마다 차별이 없어 클릭이 약해질 수 있습니다. 홈은 정적, 글은 동적으로 나누는 경우가 많습니다.

이미지 크기 권장은?

많은 플랫폼이 1200x630 비율을 잘 처리합니다. 너무 크면 다운로드가 느려 프리뷰가 실패할 수 있습니다.

바꿨는데 카드가 그대로면?

플랫폼 캐시일 가능성이 큽니다. Sharing Debugger 등으로 재수집하거나 이미지 URL에 버전을 붙이세요.

로그인 필수 페이지의 OG는?

크롤러가 로그인 없이 HTML과 이미지를 받아야 합니다. 봇용 공개 메타와 이미지를 따로 두는 설계가 필요합니다.

Astro나 Cloudflare만 쓰는데 Next 설명이 맞나요?

태그 계약(og:*)은 프레임워크와 무관합니다. Next 예시는 생성 지점을 보여 주는 것이고, 다른 스택도 head에 같은 필드를 넣으면 됩니다.

CDN 이미지와 같은 도메인 이미지는?

둘 다 가능합니다. 중요한 것은 HTTPS, 200 응답, 크롤러 접근, 안정적인 URL입니다.