OneWebDesk

카톡·슬랙 링크 미리보기가 안 나올 때: OG 태그 해결법

메신저·SNS 공유 시 미리보기가 안 뜨거나 옛날 것이 나오는 원인과 OG 태그·캐시 해결 절차.

카카오톡에 링크를 붙여넣었는데 썸네일 없이 맨 URL만 덜렁 나오거나, 사이트를 리뉴얼했는데도 공유하면 몇 달 전 옛날 이미지와 제목이 계속 나오는 경우가 있습니다. 슬랙에서는 미리보기가 아예 안 펼쳐지고, 페이스북에서는 엉뚱한 사진이 잡히기도 하죠. 원인은 거의 항상 두 가지 중 하나입니다.OG(Open Graph) 태그가 잘못됐거나, 플랫폼의 스크레이퍼 캐시가 옛날 것을 물고 있거나입니다.

이 가이드는 미리보기가 만들어지는 원리(스크레이퍼 동작 방식)부터, 필수 태그와 이미지 규격, 플랫폼별 캐시 삭제 방법, 이미지만 안 나올 때의 원인 진단까지 순서대로 정리합니다. 읽고 나면 “카톡 미리보기 안 나옴” 문제의 9할은 직접 해결할 수 있습니다.

미리보기는 누가 어떻게 만드나 — 스크레이퍼의 동작 원리

링크를 공유하면 미리보기를 만드는 것은 사용자의 브라우저가 아니라 플랫폼의 서버(스크레이퍼 봇)입니다. 카카오톡·슬랙·페이스북·X의 봇이 해당 URL에 직접 HTTP 요청을 보내 HTML을 받아온 뒤,<head> 안의 og:title·og:description·og:image 메타 태그를 읽어 카드를 조립합니다. 여기서 결정적인 특징이 하나 있습니다.

  • 대부분의 스크레이퍼는 자바스크립트를 실행하지 않습니다. 서버가 처음 응답한 HTML 원문에 OG 태그가 없으면, 브라우저에서는 태그가 보여도 미리보기에는 반영되지 않습니다.
  • 그래서 React·Vue 같은 SPA에서 클라이언트 사이드로만 메타 태그를 주입하면 미리보기가 깨집니다. 해결책은 SSR(서버 사이드 렌더링), 정적 프리렌더링, 혹은 봇 요청만 프리렌더 서버로 보내는 방식입니다.
  • 스크레이퍼는 각자 고유한 User-Agent를 씁니다. 예: facebookexternalhit, Slackbot-LinkExpanding, Twitterbot, kakaotalk-scrap. 방화벽이나 봇 차단 규칙이 이 UA를 막고 있으면 미리보기가 안 나옵니다.

내 페이지가 스크레이퍼 눈에 어떻게 보이는지는 오픈그래프 미리보기 도구로 URL을 넣어보면 카카오톡·슬랙·페이스북 카드 형태로 바로 확인할 수 있습니다.

필수 태그와 이미지 규격

미리보기 카드에 최소한으로 필요한 태그는 4개이고, 트위터(X)용 카드 태그를 더하면 안전합니다. 모두 <head> 안에 있어야 하며, 특히 og:image는 규격을 지켜야 합니다.

  • og:title — 카드 제목. 40~60자 이내가 잘리지 않습니다.
  • og:description — 요약 1~2문장. 플랫폼에 따라 80~200자에서 잘립니다.
  • og:image반드시 https 절대 URL이어야 합니다 (/img/thumb.png 같은 상대 경로는 대부분의 스크레이퍼가 해석하지 못합니다). 권장 크기는 1200×630px(비율 1.91:1), 형식은 JPG/PNG, 용량은 가급적 1MB 이하 (페이스북 상한 8MB, 카카오는 큰 이미지에서 실패하는 경우가 잦음).
  • og:url — 이 페이지의 대표(canonical) URL. 파라미터가 붙은 변형 URL이 흩어지는 것을 막습니다.
  • twitter:card — X에서 큰 썸네일을 원하면 summary_large_image로 지정. X는 OG 태그를 폴백으로 읽긴 하지만 이 태그가 있어야 카드 형태가 확정됩니다.

태그를 하나하나 손으로 쓰기 번거롭다면 오픈그래프 태그 생성기에 제목·설명·이미지 URL만 넣고 완성된 메타 태그 블록을 복사해 붙여넣는 것이 실수(따옴표 누락, 속성 오타, 상대 경로)를 막는 가장 빠른 길입니다.

옛날 미리보기가 계속 나오는 이유 — 플랫폼 캐시 지우기

태그를 고쳤는데도 옛날 썸네일이 나온다면 코드 문제가 아닙니다. 스크레이퍼는 매번 사이트를 새로 읽지 않고한 번 수집한 결과를 캐시해 두는데, 이 캐시가 며칠에서 몇 주까지 유지됩니다. 플랫폼마다 캐시를 강제로 비우는 공식 경로가 있습니다.

플랫폼디버거 / 캐시 삭제 위치비고
카카오톡카카오 개발자 사이트의 공유 디버거 — developers.kakao.com/tool/debugger/sharingURL 입력 후 “초기화”(캐시 삭제) 버튼. 카카오 계정 로그인 필요.
페이스북 / 메신저Sharing Debugger — developers.facebook.com/tools/debug“다시 스크랩(Scrape Again)” 클릭. 봇이 실제로 받은 응답과 오류도 보여줘 진단용으로도 최고.
슬랙별도 도구 없음 — 캐시가 비교적 짧게(약 30분) 유지태그 수정 후 잠시 기다렸다가 링크를 다시 올리면 재수집됨. 급하면 URL 뒤에 ?v=2 같은 쿼리를 붙여 새 URL로 인식시키기.
X(트위터)Card Validator는 미리보기 기능이 중단됨 — 공식 삭제 도구 없음캐시 약 7일. 쿼리 파라미터를 바꾼 URL로 우회하거나 만료를 기다려야 함.
링크드인Post Inspector — linkedin.com/post-inspectorURL을 검사하면 그 자리에서 캐시가 갱신됨.

실전 예시: 카톡 공유에 옛날 썸네일이 나올 때

상황: 쇼핑몰 메인 이미지를 교체하고 og:image도 새 파일로 바꿨는데, 카카오톡에 공유하면 여전히 예전 상품 사진이 나옵니다. 실제 해결 순서는 이렇습니다.

  1. 먼저 서버가 내보내는 HTML에 새 태그가 실제로 들어있는지 확인합니다. SEO 메타태그 검사에 URL을 넣으면 title·description·OG 태그를 서버 응답 기준으로 한 번에 점검할 수 있습니다. (배포가 안 됐거나 CDN이 옛 HTML을 캐시 중이면 여기서 걸립니다.)
  2. og:image 값이 https://로 시작하는 절대 URL인지, 브라우저 시크릿 창에서 그 이미지 주소를 직접 열었을 때 정상 표시되는지 확인합니다.
  3. developers.kakao.com/tool/debugger/sharing에 접속해 카카오 계정으로 로그인한 뒤, 문제의 URL을 입력하고 캐시 초기화 버튼을 누릅니다.
  4. 같은 화면에서 다시 스크랩된 결과(제목·설명·이미지)가 새 콘텐츠로 나오는지 확인합니다. 여기까지 정상인데도 대화방에서 옛것이 보인다면, 그 대화방 메시지는 이미 렌더된 과거 카드라새 메시지로 다시 보내야 갱신된 미리보기가 나옵니다.

미리보기 자체는 뜨는데 이미지만 안 나올 때

제목·설명은 잡히는데 썸네일만 비어 있다면, 원인은 거의 이 중 하나입니다.

  • 상대 경로og:image/thumb.png처럼 도메인 없이 시작. 절대 https URL로 교체.
  • 봇 차단robots.txt가 이미지 경로를 막고 있거나, 방화벽/CDN 봇 차단 규칙이facebookexternalhit·kakaotalk-scrap 같은 UA를 403으로 거절.
  • 용량·크기 초과 — 수 MB짜리 원본 이미지는 스크레이퍼가 타임아웃 내에 받지 못하고 포기하기도 합니다. 1200×630, 1MB 이하로 리사이즈.
  • 잘못된 Content-Type — 이미지 URL이 image/jpeg 같은 이미지 MIME이 아니라text/html을 반환(리다이렉트 페이지, 핫링크 방지 등)하면 무시됩니다.
  • 인증서 오류 — 이미지 호스트의 SSL 인증서가 유효하지 않으면 https라도 스크레이퍼가 받지 않습니다.

수정 후에는 오픈그래프 미리보기로 카드가 의도대로 나오는지 최종 확인하고, 그 다음에 각 플랫폼 캐시를 지우는 순서로 마무리하면 됩니다.

자주 묻는 질문

카톡에 링크를 보냈는데 미리보기가 아예 안 나옵니다. 뭐부터 확인하나요?
서버가 응답하는 HTML 원문에 og:title과 og:image 태그가 있는지부터 확인하세요. SPA에서 자바스크립트로만 태그를 넣으면 카카오 스크레이퍼가 읽지 못합니다. 다음으로 방화벽이나 봇 차단이 kakaotalk-scrap User-Agent를 막고 있지 않은지, og:image가 https 절대 URL인지 확인합니다.
OG 태그를 수정했는데 왜 옛날 미리보기가 계속 나오나요?
플랫폼 스크레이퍼가 이전에 수집한 결과를 캐시하고 있기 때문입니다. 카카오는 개발자 사이트의 공유 디버거에서 캐시 초기화, 페이스북은 Sharing Debugger에서 다시 스크랩을 실행하면 즉시 갱신됩니다. 슬랙은 약 30분 뒤 다시 올리면 되고, X는 공식 삭제 도구가 없어 URL에 쿼리 파라미터를 붙여 우회하는 것이 현실적입니다.
og:image 권장 크기는 얼마인가요?
1200×630픽셀(1.91:1 비율)이 페이스북·카카오·슬랙·X에서 모두 잘 나오는 표준 규격입니다. 형식은 JPG나 PNG, 용량은 1MB 이하를 권장합니다. 최소 200×200 미만이거나 수 MB가 넘으면 일부 플랫폼이 이미지를 버립니다.
React/Vue 같은 SPA인데 미리보기가 안 됩니다. 반드시 SSR로 바꿔야 하나요?
스크레이퍼 대부분이 자바스크립트를 실행하지 않으므로 첫 HTML 응답에 태그가 있어야 합니다. 전체 SSR 전환이 부담이면 공유 대상 페이지만 정적 프리렌더링하거나, 봇 User-Agent 요청만 프리렌더 서버로 보내는 방법(동적 렌더링)으로도 해결됩니다.
미리보기 수정 후 이미 보낸 메시지도 새 카드로 바뀌나요?
아니요. 이미 전송된 메시지의 카드에는 전송 시점에 렌더된 미리보기가 남습니다. 캐시를 지운 뒤 링크를 새 메시지로 다시 보내야 갱신된 카드가 표시됩니다.

이 가이드와 함께 쓰면 좋은 도구

관련 가이드