가게 홈페이지 주소를 단톡방에 올렸는데, 사진 없이 파란 글씨만 뜬 적 있으신가요.
광고비를 들여 만든 링크인데 썸네일이 없으면 클릭률이 눈에 띄게 떨어집니다. 손님 입장에서는 눌러도 되는 링크인지 알 수가 없으니까요.
이 글에서는 카톡 공유 썸네일이 안 뜰 때 확인할 네 가지를 순서대로 알려 드립니다. 개발을 몰라도 눈으로 찾을 수 있는 것만 담았습니다.
공유 썸네일은 어디서 오나요
홈페이지 안에 적어 둔 오픈그래프 태그를 메신저가 대신 읽어 옵니다.
오픈그래프 태그(링크를 공유할 때 보여 줄 제목·설명·사진을 적어 두는 표시)는 화면에는 안 보입니다. 홈페이지 코드 맨 위쪽에 조용히 들어 있습니다.
카카오톡, 네이버 블로그, 슬랙 같은 앱은 링크를 받으면 그 페이지를 열어 이 태그를 읽습니다. 그리고 읽은 내용으로 미리보기 카드를 만듭니다.
비유하자면 명함과 같습니다. 명함에 회사 이름과 사진을 적어 두면 상대가 그대로 보고, 빈 명함이면 아무것도 못 보는 거죠.
증상별로 원인이 다릅니다. 「한눈에 보기」로 정리했습니다.
| 증상 | 가장 흔한 원인 | 먼저 확인할 것 |
|---|---|---|
| 사진 없이 주소만 뜬다 | 썸네일 태그가 아예 없음 | 태그가 들어 있는지 확인 |
| 사진 자리가 회색으로 비어 있다 | 이미지 주소가 틀렸거나 파일이 없음 | 이미지 주소를 새 창에 붙여 열기 |
| 예전 사진이 계속 뜬다 | 앱이 저장해 둔 캐시가 남음 | 주소 끝에 값을 붙여 새 주소로 공유 |
| 제목이 엉뚱하게 뜬다 | 제목 태그가 페이지마다 같음 | 페이지별 제목을 따로 지정 |
| 아예 미리보기가 안 생긴다 | 로그인해야 열리는 페이지 | 비로그인 상태로 주소 열어 보기 |
출처: 오픈그래프 공식 문서
한 줄 정리: 썸네일은 앱이 만드는 게 아니라 우리 홈페이지가 알려 주는 것입니다.
확인 1. 썸네일용 태그가 페이지에 있나요
태그가 없으면 어떤 앱에서도 사진이 안 뜹니다.
가장 흔한 원인이 이겁니다. 특히 페이지를 새로 추가했을 때, 새 페이지에만 태그가 빠져 있는 경우가 많습니다.
확인은 간단합니다. 우리 홈페이지 주소를 나에게 보내기로 한 번 공유해 보세요. 메인 화면은 잘 뜨는데 상세 페이지만 안 뜬다면 그 페이지에 태그가 빠진 것입니다.
들어가야 할 항목은 세 가지입니다. 공유할 때 보일 제목, 한 줄 설명, 그리고 사진 주소입니다.
예를 들어, 직원 4명인 동네 필라테스 학원이 체험 수업 페이지를 새로 만들었다고 해 볼게요. 제목은 "1회 체험 수업 신청"으로 적습니다. 설명은 "평일 저녁반 예약 가능", 사진은 수업 사진으로 지정하면 됩니다.
잇다웹에서 만든 홈페이지는 검색 노출 설정이 기본으로 들어갑니다. 무엇이 포함되는지는 무료 제공 서비스에서 확인하실 수 있습니다.
한 줄 정리: 메인은 뜨는데 특정 페이지만 안 뜨면 그 페이지의 태그를 의심하세요.
확인 2. 썸네일 이미지, 캔바로 몇 픽셀로 만들까요
가로 1200 × 세로 630픽셀로 만들면 대부분 잘리지 않습니다.
이 비율이 가로로 긴 미리보기 카드에 가장 잘 맞습니다. 정사각형 사진을 넣으면 위아래가 잘려 글자가 사라지는 일이 자주 생깁니다.
캔바 같은 무료 디자인 도구에서 크기를 직접 입력해 새 디자인을 만들면 됩니다. 가로 1200, 세로 630을 넣고 시작하세요.
만들 때 지킬 점을 표로 정리했습니다.
| 항목 | 권장 | 이유 |
|---|---|---|
| 크기 | 가로 1200 × 세로 630픽셀 | 미리보기 카드 비율과 맞음 |
| 글자 위치 | 가운데 쪽에 크게 | 가장자리는 잘릴 수 있음 |
| 글자 수 | 10자 안팎 | 휴대폰에서 작게 보임 |
| 파일 형식 | JPG 또는 PNG | 어떤 앱에서나 열림 |
| 이미지 주소 | https 로 시작하는 전체 주소 | 짧은 주소는 못 읽는 앱이 있음 |
이미지 주소가 https 로 시작하는지 꼭 보세요. 사진 자리가 회색으로 비어 있다면 열에 아홉은 이 문제입니다.
한 줄 정리: 1200 × 630으로 만들고, 글자는 가운데에 크게 넣으세요.
확인 3. 사진을 바꿨는데 예전 사진이 그대로 떠요
앱이 저장해 둔 캐시 때문입니다. 잘못 설정한 게 아닙니다.
캐시(한 번 읽은 내용을 잠시 저장해 두는 것)는 앱마다 따로 남습니다. 카카오톡에서 예전 사진이 떠도 네이버에서는 새 사진이 뜨는 경우가 그래서 생깁니다.
가장 쉬운 방법은 주소를 살짝 바꿔 공유하는 것입니다. 주소 끝에 물음표와 짧은 값을 붙이면 앱은 새 주소로 인식합니다.
예를 들어 원래 주소 뒤에 ?v=2 를 붙여 보세요. 같은 페이지가 열리지만 미리보기는 새로 만들어집니다.
시간이 지나면 캐시는 저절로 사라집니다. 급하지 않다면 하루쯤 기다렸다가 다시 공유해 보셔도 됩니다.
한 줄 정리: 예전 사진이 뜨면 주소 뒤에 값을 하나 붙여 새 주소로 공유해 보세요.
확인 4. 로그인해야 보이는 페이지는 아닌가요
로그인해야 열리는 페이지는 썸네일이 만들어지지 않습니다.
미리보기를 만드는 쪽은 사람이 아니라 프로그램입니다. 이 프로그램은 로그인을 할 수 없습니다.
그래서 회원 전용 공지나 주문 확인 페이지는 아무리 태그를 넣어도 사진이 안 뜹니다. 정상입니다.
확인 방법은 쉽습니다. 브라우저 시크릿 창(로그인 기록 없이 여는 창)에 주소를 붙여 열어 보세요. 로그인 화면이 뜬다면 그 페이지는 공유용으로 맞지 않습니다.
공유할 일이 많은 내용은 누구나 열 수 있는 페이지로 따로 만드세요. 이벤트 안내, 체험 신청, 메뉴 소개가 여기에 해당합니다. 웹사이트 템플릿 보기에서 이런 페이지 구성을 미리 볼 수 있습니다.
한 줄 정리: 시크릿 창에서 안 열리는 페이지는 썸네일도 안 만들어집니다.
알아두면 좋은 용어
세 단어만 알면 업체와 대화가 됩니다.
| 용어 | 쉬운 뜻 | 비유·예시 |
|---|---|---|
| 오픈그래프 태그 | 공유할 때 보여 줄 제목·설명·사진을 적어 둔 표시 | 링크가 들고 다니는 명함 |
| 캐시 | 한 번 읽은 내용을 잠시 저장해 두는 것 | 자주 쓰는 물건을 앞주머니에 넣어 두는 것 |
| 픽셀 | 화면을 이루는 작은 점의 개수 | 사진의 가로세로 크기를 재는 자 |
한 줄 정리: 용어 세 개만 알면 무엇을 고쳐 달라고 할지 정확히 말할 수 있습니다.
오늘 할 수 있는 실행 체크리스트
20분이면 우리 홈페이지 주요 페이지를 다 확인할 수 있습니다.
- □ 홈페이지 주소를 나에게 보내기로 공유해 미리보기 확인하기
- □ 자주 공유하는 페이지 3개도 같은 방법으로 확인하기
- □ 썸네일 이미지를 가로 1200 × 세로 630픽셀로 새로 만들기
- □ 이미지 주소가 https 로 시작하는지 확인하기
- □ 시크릿 창에 주소를 붙여 로그인 없이 열리는지 보기
- □ 예전 사진이 뜨면 주소 뒤에 값을 붙여 다시 공유해 보기
한 줄 정리: 자주 공유하는 페이지 3개만 먼저 고쳐도 체감 효과가 큽니다.
자주 묻는 질문
카톡에서는 안 뜨는데 네이버에서는 뜹니다. 왜 그런가요
앱마다 캐시를 따로 갖고 있어서 그렇습니다. 한쪽에서 먼저 읽어 둔 내용이 남아 있으면 새 사진으로 안 바뀝니다. 주소 끝에 ?v=2 같은 값을 붙여 새 주소로 공유해 보세요. 그래도 같으면 이미지 주소가 https 로 시작하는지 다시 확인하시면 됩니다.
썸네일 사진을 페이지마다 다르게 할 수 있나요
네, 페이지마다 따로 지정할 수 있습니다. 실제로 그렇게 하시는 편이 좋습니다. 이벤트 페이지에는 이벤트 사진을, 메뉴 페이지에는 메뉴 사진을 넣으면 클릭률이 올라갑니다. 최소한 자주 공유하는 페이지 3개는 따로 지정해 두세요.
사진 없이 글씨만 떠도 괜찮지 않나요
받는 사람 입장에서는 어떤 링크인지 알기 어렵습니다. 특히 단톡방처럼 링크가 여러 개 올라오는 곳에서는 사진 없는 링크가 그냥 넘어갑니다. 썸네일 하나 만드는 데 20분이면 충분하니 자주 쓰는 페이지부터 해 두세요.
홈페이지를 업체에 맡겼는데 뭐라고 요청하면 되나요
"페이지별 오픈그래프 태그를 넣어 주세요"라고 하시면 됩니다. 여기에 어떤 페이지가 문제인지 주소를 함께 보내면 더 빠릅니다. 썸네일 이미지는 사장님이 직접 만들어 보내 주셔도 됩니다.
한 줄 정리: 요청할 때는 문제 페이지 주소와 원하는 사진을 같이 보내세요.
우리 홈페이지의 어떤 페이지에 썸네일이 빠져 있는지 함께 보고 싶다면 무료 견적 상담에 주소만 보내 주세요.
사진: Unsplash (photo-1758274252264-004520474c0c, photo-1748326650737-33500fdfda30, photo-1487611459768-bd414656ea10)