카톡·슬랙 링크 미리보기가 안 나올 때: 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/sharing | URL 입력 후 “초기화”(캐시 삭제) 버튼. 카카오 계정 로그인 필요. |
| 페이스북 / 메신저 | Sharing Debugger — developers.facebook.com/tools/debug | “다시 스크랩(Scrape Again)” 클릭. 봇이 실제로 받은 응답과 오류도 보여줘 진단용으로도 최고. |
| 슬랙 | 별도 도구 없음 — 캐시가 비교적 짧게(약 30분) 유지 | 태그 수정 후 잠시 기다렸다가 링크를 다시 올리면 재수집됨. 급하면 URL 뒤에 ?v=2 같은 쿼리를 붙여 새 URL로 인식시키기. |
| X(트위터) | Card Validator는 미리보기 기능이 중단됨 — 공식 삭제 도구 없음 | 캐시 약 7일. 쿼리 파라미터를 바꾼 URL로 우회하거나 만료를 기다려야 함. |
| 링크드인 | Post Inspector — linkedin.com/post-inspector | URL을 검사하면 그 자리에서 캐시가 갱신됨. |
실전 예시: 카톡 공유에 옛날 썸네일이 나올 때
상황: 쇼핑몰 메인 이미지를 교체하고 og:image도 새 파일로 바꿨는데, 카카오톡에 공유하면 여전히 예전 상품 사진이 나옵니다. 실제 해결 순서는 이렇습니다.
- 먼저 서버가 내보내는 HTML에 새 태그가 실제로 들어있는지 확인합니다. SEO 메타태그 검사에 URL을 넣으면 title·description·OG 태그를 서버 응답 기준으로 한 번에 점검할 수 있습니다. (배포가 안 됐거나 CDN이 옛 HTML을 캐시 중이면 여기서 걸립니다.)
og:image값이https://로 시작하는 절대 URL인지, 브라우저 시크릿 창에서 그 이미지 주소를 직접 열었을 때 정상 표시되는지 확인합니다.developers.kakao.com/tool/debugger/sharing에 접속해 카카오 계정으로 로그인한 뒤, 문제의 URL을 입력하고 캐시 초기화 버튼을 누릅니다.- 같은 화면에서 다시 스크랩된 결과(제목·설명·이미지)가 새 콘텐츠로 나오는지 확인합니다. 여기까지 정상인데도 대화방에서 옛것이 보인다면, 그 대화방 메시지는 이미 렌더된 과거 카드라새 메시지로 다시 보내야 갱신된 미리보기가 나옵니다.
미리보기 자체는 뜨는데 이미지만 안 나올 때
제목·설명은 잡히는데 썸네일만 비어 있다면, 원인은 거의 이 중 하나입니다.
- 상대 경로 —
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라도 스크레이퍼가 받지 않습니다.
수정 후에는 오픈그래프 미리보기로 카드가 의도대로 나오는지 최종 확인하고, 그 다음에 각 플랫폼 캐시를 지우는 순서로 마무리하면 됩니다.
자주 묻는 질문
카톡에 링크를 보냈는데 미리보기가 아예 안 나옵니다. 뭐부터 확인하나요?
OG 태그를 수정했는데 왜 옛날 미리보기가 계속 나오나요?
og:image 권장 크기는 얼마인가요?
React/Vue 같은 SPA인데 미리보기가 안 됩니다. 반드시 SSR로 바꿔야 하나요?
미리보기 수정 후 이미 보낸 메시지도 새 카드로 바뀌나요?
이 가이드와 함께 쓰면 좋은 도구
관련 가이드
- robots.txt 작성법: 문법·예제·흔한 실수robots.txt의 규칙 문법과 사이트 유형별 예제, 색인을 망치는 흔한 실수를 정리했습니다.
- hreflang 설정 가이드: 다국어 SEO 중복을 막는 법다국어 사이트의 hreflang 태그를 올바르게 구성하고 x-default·상호참조 실수를 피하는 법.