지난달 동네 반찬가게 사장님께 전화가 왔습니다. 새로 만든 홈페이지 주소를 단골 단톡방에 올렸는데, 링크 아래에 사진도 설명도 없이 회색 상자와 함께 "제목 없음"만 떴다는 겁니다. 몇 분이 "이거 스팸 아니에요?"라고 물었고, 사장님은 결국 링크를 지웠다고 하셨습니다.
홈페이지는 멀쩡히 열리는데 카톡 미리보기만 깨지는 경우, 원인은 거의 항상 세 가지 중 하나입니다. 이번에 실제로 고친 순서대로 정리해 봅니다.
카톡은 링크를 어떻게 미리보기로 만들까
카카오톡은 링크가 올라오면 해당 페이지를 한 번 읽어 가서, 페이지 머리(head) 안에 적힌 OG(Open Graph) 태그를 찾습니다. 제목은 og:title, 설명은 og:description, 사진은 og:image에서 가져옵니다. 이 값이 없거나 읽지 못하면 카톡은 보여줄 게 없으니 "제목 없음"이나 주소만 덩그러니 띄웁니다.
원인 1. OG 태그가 아예 없다
반찬가게 사이트가 딱 이 경우였습니다. 화면 디자인은 공들여 만들었지만 head 안에는 title 하나뿐이었습니다. 다음 네 줄을 추가하는 것으로 절반은 해결됐습니다.
- og:title — 가게 이름과 한 줄 소개 (예: 손맛반찬 | 매일 아침 만드는 동네 반찬)
- og:description — 영업시간, 위치 같은 핵심 한 문장
- og:image — 대표 이미지의 전체 주소(https://로 시작)
- og:url — 홈페이지 대표 주소
자주 하는 실수는 og:image에 /images/main.jpg처럼 상대 경로를 적는 것입니다. 카톡 서버는 이 경로를 해석하지 못하니 반드시 도메인까지 포함한 전체 주소를 적어야 합니다.
원인 2. 이미지 규격이 맞지 않는다
태그를 넣고 나니 제목은 떴는데, 이번엔 사진이 잘려서 반찬통 모서리만 보였습니다. 사장님이 휴대폰으로 찍은 세로 사진(3000×4000, 약 5MB)을 그대로 쓴 탓이었습니다.
미리보기 이미지는 1200×630 가로형, 용량은 1MB 이하가 가장 무난합니다. 카톡·페이스북·스레드 모두 이 비율 기준으로 잘라 보여주기 때문에, 중요한 요소는 가운데에 두고 가장자리에 글자를 넣지 않는 게 안전합니다.
이 단계에서는 우리가 만든 무료 웹 도구의 OG 이미지 생성기를 썼습니다. 가게 사진을 올려 1200×630 규격으로 맞춰 내려받으면 되고, 용량이 크면 같은 곳의 WebP 변환으로 줄일 수 있어 따로 편집 프로그램을 켤 필요가 없었습니다.
원인 3. 카톡이 예전 미리보기를 기억하고 있다
태그도 넣고 이미지도 바꿨는데 단톡방에 다시 올리니 여전히 "제목 없음"이었습니다. 카카오톡은 한 번 읽은 링크 정보를 한동안 캐시로 저장해 두기 때문입니다.
이럴 때는 카카오 디벨로퍼스의 공유 디버거에서 주소를 넣고 캐시 초기화를 누르면 됩니다. 급할 때는 주소 뒤에 ?v=2 같은 값을 붙여 새 링크처럼 보내는 방법도 있지만, 근본 해결은 캐시 초기화입니다.
5분 점검 순서
- 내 사이트에서 마우스 오른쪽 → 페이지 소스 보기 → og:title, og:image가 있는지 확인
- og:image 주소를 브라우저 주소창에 직접 붙여 넣어 사진이 열리는지 확인
- 이미지가 1200×630 가로형, 1MB 이하인지 확인
- 카카오 공유 디버거에서 캐시 초기화
- 나와의 채팅방에 링크를 보내 최종 확인
결과
이 다섯 단계를 마친 뒤 사장님이 단톡방에 링크를 다시 올리셨고, 이번엔 반찬이 가득 담긴 사진과 가게 이름이 제대로 떴습니다. 그날 저녁에만 "주문 어떻게 해요?" 문의가 여섯 건 들어왔다고 합니다. 링크 미리보기는 손님이 가게를 처음 만나는 간판입니다. 홈페이지를 새로 열었다면 공유하기 전에 한 번만 점검해 보시길 권합니다.
