카톡 링크 미리보기가 이상할 때 — OG 태그가 있어도 안 뜨는 이유
OG 태그를 다 넣었는데도 카톡 미리보기에 이미지가 안 뜨거나 글자가 깨지나요? 캐시, 이미지 용량, 절대 주소 등 놓치기 쉬운 원인과 해결법을 알려드립니다.
내 얘기 맞네 — 왜 미리보기가 제멋대로 뜰까?
내 웹사이트나 블로그 링크를 카카오톡 채팅방에 공유했는데, 내가 원한 картинка가 아니라 엉뚱한 로고가 뜹니다. 제목도 다르고, 설명은 아예 나오지도 않습니다. 분명히 페이지는 멀쩡한데, 공유되는 모양새만 이상합니다.
이런 현상이 생기는 이유는 카카오톡이나 페이스북 같은 앱이 링크를 공유받을 때, 그 페이지에 숨겨진 '오픈 그래프(Open Graph)' 태그를 먼저 읽기 때문입니다. 오픈 그래프(줄여서 OG) 태그는 이 페이지의 제목, 설명, 대표 이미지가 무엇인지 알려주는 일종의 '명함'입니다.
문제는 이 '명함'을 제대로 만들어 뒀다고 생각했는데도 미리보기가 깨지는 경우가 많다는 점입니다. OG 태그를 넣는 것만으로는 부족합니다. 아래 세 가지 숨은 규칙을 지키지 않으면 카카오톡 챗봇(스크래퍼)이 명함을 제대로 읽지 못합니다.
1. **캐시(Cache):** 카카오톡은 한번 읽은 정보를 한동안 기억합니다. 태그를 고쳐도 옛날 미리보기를 계속 보여주는 주범입니다.
2. **이미지 규칙:** 이미지 크기(가로세로)와 용량(KB)이 정해진 기준을 넘으면 아예 표시를 포기합니다.
3. **주소 형식:** 이미지나 페이지 주소가 'https://'로 시작하는 완전한 형태가 아니면 챗봇이 길을 잃습니다.
범인 1순위: 지독한 캐시(Cache) 초기화하기
OG 태그를 수정했는데도 미리보기가 바뀌지 않는다면 99% 캐시 문제입니다. 캐시는 카카오톡 서버가 한 번 가져간 페이지 정보를 저장해두고 재활용하는 기술입니다. 매번 페이지를 새로 읽으면 느려지니, 일종의 '기억'에 의존하는 셈입니다. 특히 카카오톡은 이 기억력이 매우 좋아서, 몇 시간 혹은 며칠 동안 옛날 정보를 붙들고 있기도 합니다.
이 기억을 강제로 지우고 새로고침하게 만들어야 합니다. 카카오 개발자 사이트에서 제공하는 공식 도구를 쓰면 됩니다.
- 카카오 개발자 사이트의 'OG(오픈그래프) 캐시 초기화' 도구 페이지로 접속합니다.
- 미리보기가 이상하게 뜨는 내 페이지의 URL을 복사해 입력창에 붙여넣습니다.
- 바로 아래 '캐시 초기화' 버튼을 누릅니다.
- 잠시 후 페이지 하단에 새로운 미리보기 결과가 나타납니다. 여기서 이미지가 제대로 보이면 해결된 것입니다. 이제 카톡방에 다시 공유해 보세요.
- 만약 여기서도 문제가 해결되지 않는다면, 캐시가 아니라 OG 태그 자체에 다른 문제가 있는 것입니다.
까다로운 이미지 규칙: 크기와 용량 맞추기
포토샵이나 전문 편집 프로그램이 없다면 1200x630 픽셀과 500KB 용량을 동시에 맞추기 번거롭습니다. 이럴 때 브라우저에서 바로 쓸 수 있는 이미지 리사이즈 도구가 유용합니다.
툴즈의 '이미지 리사이즈·용량 압축' 도구는 별도 설치 없이 이미지 파일을 끌어다 놓기만 하면 됩니다. '픽셀 지정' 모드에서 가로를 '1200'으로 설정하고 '비율 유지'에 체크하면 세로가 자동으로 계산됩니다. 더 중요한 것은 '저장 포맷'과 '품질' 설정입니다. 포맷을 'WebP'나 'JPEG'로, 품질 슬라이더를 '80' 정도로 조절하면 화질 저하를 최소화하면서 용량을 획기적으로 줄일 수 있습니다. 변환된 이미지를 다운로드해서 서버에 올리고, 그 이미지 주소를 `og:image` 태그에 넣으면 됩니다.
- **절대 주소 사용:** `og:image` 태그에 들어가는 이미지 주소는 반드시 `https://`로 시작하는 전체 주소여야 합니다. 내 컴퓨터에 있는 경로(`/images/my_photo.png`)나 상대 경로를 쓰면 스크래퍼가 이미지를 찾지 못합니다.
- **권장 크기 준수:** 페이스북이 처음 제안한 OG 이미지의 황금 비율은 **1200 × 630 픽셀**입니다. 이 크기(또는 1.91:1 비율)로 만들어야 잘리지 않고 꽉 찬 미리보기가 나옵니다. 너무 작은 이미지는 무시될 수 있습니다.
- **파일 용량 제한:** 가장 흔히 놓치는 부분입니다. 카카오톡은 **500KB 이하**의 이미지만 허용하는 것으로 알려져 있습니다. 아무리 멋진 사진이라도 2MB짜리 고화질 원본을 그대로 올리면 용량 초과로 미리보기에 뜨지 않습니다. 페이스북은 8MB까지로 훨씬 넉넉합니다.
애초에 완벽한 태그 만들기 (feat. 생성 도구)
툴즈의 '메타 태그 생성기'는 카카오톡·페이스북 공유 미리보기와 구글 검색 결과를 동시에 보여주며 태그를 만들 수 있습니다. '제목'과 '설명' 입력칸 아래에는 글자 수와 함께 적정 길이를 알려주는 색상 막대(`pw-bar`)가 있어 내용이 잘릴지 미리 알 수 있습니다. '대표 이미지 URL' 입력칸에는 '권장 1200×630'이라고 명시되어 있어 규격을 잊지 않게 도와줍니다.
모든 정보를 입력한 뒤 생성된 태그 묶음을 복사해 내 웹페이지 HTML의 `<head>`와 `</head>` 태그 사이에 붙여넣기만 하면 됩니다.
<!-- 메타 태그 생성기로 만든 예시 -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>무선 드릴 추천 TOP 10 | 툴즈</title>
<meta name="description" content="2024년 최신 무선 드릴의 성능, 가격, 사용자 후기를 비교 분석해 최고의 제품을 추천합니다.">
<!-- Open Graph — 카카오톡·페이스북·라인 공유 미리보기 -->
<meta property="og:type" content="article">
<meta property="og:title" content="무선 드릴 추천 TOP 10 | 툴즈">
<meta property="og:description" content="2024년 최신 무선 드릴의 성능, 가격, 사용자 후기를 비교 분석해 최고의 제품을 추천합니다.">
<meta property="og:url" content="https://tools25.com/drill-top10">
<meta property="og:image" content="https://tools25.com/images/og-drill-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="툴즈">
<meta property="og:locale" content="ko_KR">
</head>자주 묻는 질문
캐시를 삭제했는데도 이미지가 그대로입니다.
카카오톡 캐시는 매우 강력해서 공식 도구로도 한 번에 안 지워질 때가 있습니다. 가장 확실한 방법은 이미지 파일명을 바꾸는 것(`og-image.png` → `og-image-v2.png`)입니다. 파일명이 바뀌면 100% 새로운 정보로 인식합니다. 그게 어렵다면 URL 끝에 `?v=2`처럼 임의의 값을 붙여 공유해 보세요.
페이스북에서는 잘 보이는데 카카오톡에서만 안 보입니다.
가장 큰 차이는 이미지 용량 제한입니다. 페이스북은 8MB까지 괜찮지만 카카오톡은 500KB를 넘으면 이미지를 표시하지 않을 가능성이 높습니다. 대표 이미지의 파일 크기를 먼저 확인하고, 500KB가 넘는다면 이미지 압축 도구로 줄여서 다시 시도해 보세요.
생성한 `og:` 태그는 어디에 넣어야 하나요?
생성된 메타 태그들은 모두 HTML 문서의 `<head>` 섹션 안에 들어가야 합니다. `<body>` 섹션에 넣으면 아무런 효과가 없습니다. 보통 `<title>` 태그 근처에 함께 넣어 관리합니다. `<head>` 안에서는 위쪽에 있을수록 스크래퍼가 빨리 인식하므로 가급적 상단에 배치하는 것이 좋습니다.
워드프레스나 블로그에서도 직접 수정할 수 있나요?
대부분 직접 HTML을 수정할 필요가 없습니다. 워드프레스의 경우 'Yoast SEO', 'Rank Math' 같은 SEO 플러그인을 설치하면 글 편집 화면에 '소셜 공유 이미지', '페이스북 이미지' 등을 등록하는 칸이 따로 생깁니다. 여기에 규격에 맞게 만든 이미지 URL을 넣으면 플러그인이 알아서 OG 태그를 생성해 줍니다.