블로그 링크 공유 시 썸네일이 이상하게 뜬다면? 블로거(Blogger) 대표 이미지 오류 해결법

카카오톡·페이스북에 블로그 글 링크를 공유했는데 엉뚱한 이미지가 뜬다면 꼭 확인해보세요

블로그 글을 카카오톡이나 페이스북 같은 곳에 링크로 공유했을 때, 글 안에 넣은 이미지가 아니라 전혀 상관없는 이미지(혹은 블로그의 예전 대표 이미지)가 썸네일로 뜨는 경우가 있습니다. 원인을 정확히 파악하고 나면 아주 간단하게 해결할 수 있는 문제인데, 오늘은 그 원인과 해결법을 정리해보겠습니다.

1. 증상 확인하기

이런 증상이 있다면 이 글이 도움이 될 거예요.

글 본문에는 원하는 이미지가 잘 들어가 있는데, 링크 공유 시에는 다른 이미지가 뜬다
이미지가 전혀 안 뜨거나, 블로그의 로고/예전 사진처럼 게시물과 무관한 이미지가 뜬다
글을 여러 번 고쳐도 공유 미리보기 이미지가 바뀌지 않는다

2. 실제 사례로 비교해보기

실제로 겪은 오류 상황과, 수정 후 정상적으로 반영된 모습을 비교해보면 이해가 훨씬 빠릅니다.

❌ 오류 발생 이미지

✅ 정상 반영된 모습

3. 원인: 블로거의 "대표 이미지 자동 인식" 조건

블로거(Blogger)는 게시물 링크를 공유할 때 보여줄 대표 이미지(og:image)를 자동으로 결정합니다. 이때 본문에 있는 아무 이미지나 가져오는 게 아니라, 특정 조건을 만족하는 이미지만 "정식 게시물 이미지"로 인식해요.

가장 흔한 원인은 이미지 태그(<img>)에 width, height, data-original-width, data-original-height 속성이 빠져 있는 경우입니다. 특히 HTML을 직접 작성해서 이미지를 넣는 방식(URL을 코드에 바로 붙여넣는 방식)을 쓰는 경우 이 속성들이 누락되기 쉽습니다.

이 속성이 없으면 블로거는 "이건 제대로 된 게시물 이미지가 아니다"라고 판단하고, 대신 블로그 전체의 기본 대표 이미지로 대체해버립니다. 딱 위 비교 사진의 "오류 발생" 상황과 정확히 일치하는 원인이에요.

4. 해결 방법

① 이미지 태그에 4가지 속성 추가하기

이미지 태그에 아래처럼 4개 속성을 추가해주면 됩니다.

<img src="이미지_URL"
     width="1600"
     height="900"
     data-original-width="1600"
     data-original-height="900"
     alt="이미지 설명" />

Tip. 정확한 원본 이미지 픽셀 크기를 몰라도 괜찮습니다. 이미지 스타일에 height: auto;를 함께 넣어주면, 화면에는 항상 실제 이미지 비율대로 표시되기 때문에 1600 x 900 같은 고정값을 그대로 써도 문제없이 잘 작동합니다.

② 블로거 기본 삽입 기능 활용하기

가장 확실한 방법은 이미지를 URL로 직접 붙여넣지 않고, 블로거 편집기의 "이미지 삽입" 버튼으로 올리는 거예요. 이렇게 넣으면 블로거가 필요한 속성을 자동으로 붙여줘서 애초에 이런 문제가 생기지 않습니다.

5. 코드를 고쳤는데도 안 바뀐다면 — 플랫폼 캐시 문제

이미지 태그를 수정하고 다시 발행했는데도 계속 예전 이미지가 뜬다면, 블로그 문제가 아니라 공유 플랫폼이 예전 미리보기를 캐시(저장)해두고 있는 것일 수 있습니다. 플랫폼마다 캐시를 갱신하는 주기와 방법이 달라요.

플랫폼	특징	해결 방법
페이스북 / 인스타그램	캐시를 오래 유지	공유 디버거에서 "다시 스크랩하기" 클릭
카카오톡	캐시가 특히 오래 유지되는 편, 강제 초기화 도구 없음	시간이 지나면 자동 갱신되거나, 링크 끝에 `?v=2` 같은 값을 붙여 새 링크로 인식시키기
텔레그램	캐시 갱신이 비교적 빠름	대부분 별도 조치 없이 최신 이미지로 바로 반영됨

6. 체크리스트로 정리

썸네일 오류, 이 순서로 확인하세요

대표로 쓸 이미지의 <img> 태그에 width/height, data-original-width/data-original-height가 있는지 확인
없다면 4개 속성을 추가하고 다시 발행 (정확한 숫자가 아니어도 OK)
페이스북 공유 디버거로 서버 쪽 데이터가 정상인지 먼저 확인
서버는 정상인데 특정 메신저에서만 계속 옛날 이미지가 뜬다면, 그 플랫폼의 캐시 문제이니 시간을 두거나 링크에 ?v=2를 붙여 재확인

이 순서대로 확인하면 대부분의 "링크 공유 시 썸네일이 이상하게 뜨는" 문제를 해결할 수 있습니다. 특히 직접 HTML로 이미지를 삽입하는 방식으로 포스팅하시는 분들은, 앞으로 이미지 태그에 이 4가지 속성 넣는 걸 습관처럼 체크해보시길 추천드려요.