티스토리 썸네일이 카카오톡 미리보기에서 안 나올 때 해결 방법
"카톡에 링크 보냈는데 썸네일이 없어?!" 이 상황, 티스토리 블로거라면 한 번쯤 겪어봤을 거예요. 대표 이미지가 안 나오면 괜히 허전하고 클릭도 잘 안 되죠.
안녕하세요, 티스토리를 운영하며 블로그 최적화에 진심인 블로거입니다. 저도 한동안 썸네일이 미리보기에서 누락돼서 한참 고생했거든요. 새 글을 올릴 때마다 카카오톡 미리보기를 확인했는데 이미지 없이 텍스트만 덩그러니 나오면… 그 허무함이란 😢 이번 글에서는 이 문제의 원인과 해결 방법을 아주 쉽게, 그리고 확실하게 알려드릴게요.
왜 썸네일이 안 보일까?
카카오톡에서 공유되는 링크 미리보기는 기본적으로 해당 페이지의 og:image 메타태그를 읽어서 썸네일을 설정해요. 그런데 티스토리 기본 스킨에서는 이 태그가 아예 생략되거나, 의도한 이미지가 반영되지 않는 경우가 많아요. 특히 특정 스킨에서는 첫 이미지나 대표 이미지가 자동으로 연결되지 않아, 카카오톡에서는 아무 이미지도 가져오지 못하는 상황이 발생하죠.
일반적인 해결법은 효과 없음
많은 블로거들이 대표 이미지 설정이나 플러그인 설정으로 문제를 해결하려고 해요. 하지만 이 방식은 근본적인 해결이 아니기 때문에 여전히 썸네일이 뜨지 않는 경우가 많습니다. 특히 카카오톡은 한 번 캐싱된 정보를 오래 유지하기 때문에, 수정 후에도 반영되지 않는 일이 비일비재하죠.
| 해결법 | 실제 반영 여부 | 설명 |
|---|---|---|
| 대표 이미지 등록 | X | HTML 메타에 반영되지 않음 |
| OG 태그 플러그인 | △ | 불안정, 스킨별 적용 다름 |
| HTML 직접 수정 | O | 확실하게 적용 가능 |
확실하게 해결하는 방법 (OG 메타태그 직접 삽입)
정답은 단 하나! 직접 HTML 코드에 og:image 태그를 추가하는 거예요. 티스토리에서는 아래처럼 data:post.firstImage를 활용하면 자동으로 첫 번째 이미지를 읽어올 수 있어요.
<b:if cond='data:post.firstImage'>
<meta expr:content='data:post.firstImage' property='og:image'/>
</b:if>
- 관리자 → 스킨 편집 → HTML 편집
-
<head>태그 안에 위 코드 삽입
적용 팁
코드는 삽입했는데도 썸네일이 안 뜬다면? 그럴 땐 다음 팁을 하나씩 체크해보세요. 이 팁들을 따르면 카카오톡에서도 깔끔하게 썸네일이 나올 가능성이 훨씬 높아져요.
| 팁 항목 | 설명 |
|---|---|
| 첫 이미지 위치 | 본문 맨 위에 배치할 것 |
| 이미지 크기 | 최소 300x300px 이상 권장 |
| 파일 용량 | 너무 크지 않게, 2MB 이내 |
| 카카오 캐시 삭제 | 카카오 디버거에서 URL 초기화 |
함께 보면 좋은 글
글 마무리 및 요약
이제 카카오톡에서 내 티스토리 글을 공유해도 썸네일이 당당히 잘 나올 거예요. OG 메타태그 하나 추가하는 것만으로도 블로그 링크의 인상이 확 바뀌니까, 꼭 적용해보세요. 클릭률도 달라지고, 블로그 이미지도 살릴 수 있답니다.
대표 이미지 설정만으로는 HTML에 og:image 태그가 자동 삽입되지 않기 때문에, 카카오톡 미리보기엔 표시되지 않을 수 있습니다.
og:image 메타태그를 HTML에 삽입하는 방식으로 해결하세요.
최소 300x300픽셀 이상이 권장됩니다. 너무 작은 이미지일 경우 썸네일로 표시되지 않을 수 있어요.
티스토리 관리자에서 스킨 편집 → HTML 편집으로 들어가 <head> 태그 안에 삽입하세요.
<head> 태그 안에 정확히 넣어야 미리보기에 반영됩니다.
카카오는 URL을 한 번 캐시하면 오래 유지되기 때문에, 캐시를 수동으로 삭제해야 최신 정보가 반영됩니다.
현재로선 HTML 직접 편집이 가장 확실한 방법이에요. 플러그인은 스킨에 따라 적용 여부가 다릅니다.
네, 카카오톡은 모바일 기준으로도 동일하게 og:image를 사용해 미리보기를 생성해요. 적용되면 어디서든 잘 보여요.
이번 글이 도움이 되셨나요? 썸네일 하나 안 뜬다고 무시하기엔, 진짜 중요한 부분이에요. 글을 공유할 때 첫 인상은 그 이미지가 다 하니까요. 저도 처음엔 '그까짓 썸네일 하나쯤이야' 했는데, 적용하고 나서 클릭률이 달라지는 걸 보고 바로 반성했습니다. 혹시 아직도 티스토리 썸네일 때문에 스트레스 받는 분이 있다면, 오늘 꼭! HTML 편집 들어가서 설정해보세요. 여러분의 블로그, 더 예쁘고 더 클릭 많이 받는 그날까지 함께할게요 😊 아래 댓글로 질문이나 피드백도 언제든 환영입니다!
티스토리, 썸네일, og태그, 카카오톡 미리보기, 블로그 스킨, og:image, HTML 편집, 카카오 디버거, 대표 이미지, 블로그 팁
댓글 쓰기