카톡 링크 미리보기 안 뜨는 이유, og 태그와 캐시
카카오톡 대화창에 링크를 붙였는데 회색 네모만 뜨거나, 이미지를 바꿨는데도 계속 예전 썸네일이 나오는 경우가 있습니다. 원인은 크게 두 갈래뿐입니다. 공유 봇이 그 페이지를 못 읽었거나, 이미 읽어 둔 옛 결과를 보여주고 있거나입니다.
미리보기 카드는 내 휴대폰이 만드는 게 아닙니다. 링크를 붙이는 순간 카카오의 스크랩 봇이 그 주소를 직접 방문해, HTML 맨 위 <head> 안의 오픈그래프(og) 태그를 읽어 카드를 그립니다. 그래서 "내 브라우저에선 잘 보이는데"는 근거가 되지 못합니다.
요약 ① 카드는
og:title·og:description·og:image세 값으로 그려집니다. 이미지가 비면 대개og:image가 없거나 그 주소가 열리지 않는 것입니다. ② 공유 봇은 자바스크립트를 실행하지 않습니다. '페이지 소스 보기'에 태그가 없으면 봇도 못 봅니다. ③ 태그를 고쳤는데 옛 카드가 그대로면 캐시입니다. 카카오 디버거에서 그 URL의 캐시를 초기화해야 바뀝니다.
카드는 봇이 읽어서 만듭니다
오픈그래프는 페이지가 스스로 "나는 제목이 이거고 대표 이미지는 이거다"라고 선언하는 규격입니다. 규격 문서(ogp.me)가 정한 필수 속성은 og:title, og:type, og:image, og:url 네 가지입니다.
여기에 og:description을 더한 다섯 개가 실제 카드에 그대로 쓰입니다. 카카오톡 카드는 이미지·제목·설명·도메인 순으로 이 값을 배치합니다.
중요한 건 이 값을 봇이 처음 받은 HTML에서만 읽는다는 점입니다. 로그인 뒤에 보이는 화면이나, 자바스크립트가 나중에 채워 넣는 값은 봇의 시야 밖입니다.
카드가 아예 안 뜰 때 — 도구 없이 확인하는 순서
특별한 프로그램 없이 브라우저만으로 세 가지를 순서대로 확인하면 원인이 거의 좁혀집니다.
1. '페이지 소스 보기'에서 og: 를 찾습니다
문제의 페이지를 PC 크롬에서 열고 마우스 오른쪽 버튼 → 페이지 소스 보기를 누릅니다(윈도우 Ctrl+U, 맥 Cmd+Option+U). 그다음 Ctrl+F로 og:를 검색합니다.
여기서 '검사(개발자 도구)'가 아니라 소스 보기여야 합니다. 검사 창은 자바스크립트가 다 돌아간 뒤의 결과를 보여주지만, 소스 보기는 봇이 받는 원본 HTML을 그대로 보여줍니다. 검사 창엔 있는데 소스 보기엔 없다면, 그게 바로 카드가 안 뜨는 이유입니다.
터미널을 쓸 수 있다면 같은 확인을 한 줄로 할 수 있습니다.
curl -s https://example.com/page | grep 'og:'
2. og:image 주소를 새 탭에 붙여 넣습니다
og:image에 적힌 주소를 복사해 새 탭에 그대로 붙여 넣습니다. 여기서 이미지가 안 열리면 카드에서도 그 자리는 비어 있습니다.
이미지 주소는 https로 시작하는 전체 주소로 적는 편이 안전합니다. /img/card.png 같은 상대경로는 읽는 쪽에 따라 해석하지 못할 수 있습니다.
크기도 봅니다. 페이스북 공유 문서 기준으로 허용 최소 크기는 200×200픽셀, 큰 카드로 보이게 하려면 1200×630픽셀 이상을 권장하며 비율은 1.91:1에 가깝게, 파일은 8MB를 넘지 않아야 합니다.
3. 시크릿 창으로 열어 봅니다
로그아웃 상태에서도 그 페이지가 보이는지 확인합니다. 로그인이나 회원 등급이 필요한 페이지라면 봇도 똑같이 막혀서 카드를 만들 수 없습니다.
저희 도구로 확인하기. 위 세 단계를 매번 반복하기 번거롭다면, 주소만 넣으면 같은 확인이 한 번에 끝납니다. 저희 서버가 여러분 대신 그 페이지를 받아 og 태그를 읽고, 카카오톡 카드 모양으로 그려 줍니다.
가입·설치 없이 주소만 넣으면 저희 서버가 대신 페이지를 받아 og 태그를 읽고 카톡 카드 모양으로 보여 줍니다.
카드 아래에는 og:title·og:description·og:image·og:site_name·og:type·twitter:card·twitter:title·twitter:image·canonical 값이 그대로 나열되고, 비어 있는 항목은 —로 표시됩니다.
앞의 세 개 중 빠진 게 있으면 누락된 태그로 따로 짚어 줍니다. 페이지는 열렸는데 og 태그도 <title>도 없으면 "공유 시 카드가 만들어지지 않습니다"라고 알려 줍니다.
한 가지 알아 둘 점이 있습니다. og:image가 상대경로로 적혀 있어도 도구는 전체 주소로 바꿔 보여줍니다. 원본 태그에 상대경로가 적혀 있는지는 앞서 말한 소스 보기로 확인해야 합니다.
옛날 이미지로 뜰 때 — 캐시입니다
태그를 고치고 배포까지 끝냈는데 카톡에서만 예전 카드가 나온다면, 태그가 아니라 캐시를 보고 있는 것입니다. 카카오톡은 자체 스크랩 봇이 URL 단위로 읽은 결과를 보관합니다.
그래서 새 카드를 보려면 캐시를 지워야 합니다. 카카오 개발자 사이트의 공유 디버거에서 해당 주소를 넣고 캐시를 초기화하면 다음 공유부터 새 태그가 반영됩니다. 이 도구는 카카오계정 로그인이 필요합니다.
급하게 확인만 하고 싶다면 주소 끝에 ?v=2 같은 값을 붙여 보는 방법도 있습니다. 봇은 이를 다른 주소로 보고 새로 읽습니다. 다만 이렇게 만든 주소를 계속 공유용으로 쓰면 통계가 흩어지므로 임시 확인용으로만 쓰는 게 좋습니다.
자주 막히는 지점
| 증상 | 흔한 원인 |
|---|---|
| 제목·설명은 나오는데 이미지만 빈 회색 | og:image 누락, 또는 그 주소가 열리지 않음 |
| 카드가 통째로 안 뜸 | 로그인 필요·봇 차단으로 페이지를 못 받음 |
| 소스 보기엔 태그가 없음 | 태그를 자바스크립트로만 넣고 있음 |
| 고쳤는데 옛 카드 | 공유 봇 캐시 |
| 미리보기 도구와 실제 카톡이 다름 | 도구는 현재 태그, 카톡은 캐시된 값을 보여줌 |
미리보기 도구가 "차단되었다"고 알려 주는 경우도 있습니다. 이건 여러분 태그 문제가 아니라 그 사이트가 데이터센터에서 오는 접속을 막고 있다는 뜻입니다. 유튜브·구글 페이지가 대표적이며, 카카오·페이스북 봇은 다른 경로로 접속하므로 실제 카드는 정상적으로 만들어질 수 있습니다.
네이버 블로그도 예외입니다. PC 주소(blog.naver.com)는 프레임 구조라 글 본래의 태그 대신 블로그 서비스 자체의 정보가 읽힙니다. 그래서 도구는 이 경우 모바일 주소(m.blog.naver.com)로 바꿔 확인하고, 바꿨다는 사실을 화면에 알려 줍니다.
정리
- 카드는 카카오의 스크랩 봇이 페이지를 직접 방문해
<head>의 og 태그를 읽어 만듭니다. 내 브라우저 화면은 근거가 아닙니다. - 규격상 필수 속성은
og:title·og:type·og:image·og:url이고, 카드 모양을 좌우하는 건 여기에og:description을 더한 값들입니다. - 확인 순서는 ① 페이지 소스 보기에서
og:검색 ②og:image주소를 새 탭에서 열어 보기 ③ 시크릿 창으로 로그인 없이 열리는지 확인입니다. og:image는 전체 주소로, 1200×630픽셀 이상·1.91:1 비율·8MB 이하가 안전합니다.- 태그가 멀쩡한데 옛 카드가 보이면 캐시입니다. 카카오 공유 디버거에서 그 URL의 캐시를 초기화하십시오.
가입·설치 없이 주소만 넣으면 저희 서버가 대신 페이지를 받아 og 태그를 읽고 카톡 카드 모양으로 보여 줍니다.
자주 묻는 질문
태그를 고쳤는데 카톡에선 옛날 이미지가 그대로예요.
카카오톡은 스크랩 봇이 URL 단위로 읽어 둔 결과를 보관합니다. 페이지를 아무리 새로고침해도 대화창의 카드는 그 보관된 값에서 나오므로 바뀌지 않습니다. 카카오 개발자 사이트의 공유 디버거에서 해당 주소의 캐시를 초기화해야 다음 공유부터 새 카드가 만들어집니다.
og:image는 몇 픽셀로 만들어야 하나요?
페이스북 공유 문서 기준으로 허용되는 최소 크기는 200×200픽셀이고, 큰 이미지 카드로 보이게 하려면 1200×630픽셀 이상을 권장합니다. 비율은 1.91:1에 가깝게, 파일 크기는 8MB를 넘기지 않아야 합니다. 이 규격이 여러 서비스에서 사실상 공통으로 쓰입니다.
어떤 링크는 카드가 뜨고 어떤 링크는 안 뜹니다. 차이가 뭔가요?
봇이 그 주소에서 og 태그를 읽을 수 있었는지의 차이입니다. 로그인이 필요한 페이지, 봇 접속을 막아 둔 페이지, 태그를 자바스크립트로만 넣는 페이지는 봇이 읽을 게 없어 카드가 만들어지지 않습니다. 페이지 소스 보기에 og:가 보이는지부터 확인하면 대부분 갈립니다.
미리보기 도구에서는 잘 나오는데 실제 카톡 카드는 다릅니다.
보고 있는 시점이 다르기 때문입니다. 미리보기 도구는 지금 이 순간 페이지에 적힌 태그를 읽어 보여주고, 카카오톡은 봇이 예전에 읽어 둔 값을 보여줍니다. 둘이 다르면 태그는 이미 고쳐진 상태이고 캐시만 남은 것이므로, 캐시를 초기화하면 일치하게 됩니다.