WhatsApp 링크 미리보기가 표시되지 않나요? og:image 해결 방법
WhatsApp 링크 미리보기가 표시되지 않는 문제는 거의 항상 다음 다섯 가지 원인 중 하나에 기인합니다: 페이지에 og:image 태그가 없거나, 이미지 URL이 공개적으로 접근 불가능하거나, 이미지의 비율이 맞지 않아 WhatsApp이 잘라내거나, 잘라낸 영역은 적절하지만 미리보기가 오래되었거나, 상점의 SEO 플러그인이 경쟁 태그를 출력하고 있는 경우입니다. 이 가이드에서는 각 원인과 WhatsApp이 새로 고침을 강제로 수행할 수 없는 이유, 그리고 WooCommerce 상점에서 변경해야 할 사항을 다룹니다.
짧은 답변
WhatsApp는 페이지의 Open Graph 태그를 사용하여 링크 미리보기를 생성합니다. og:image가 누락되었거나 접근할 수 없거나, 1200×630 크기의 카드 형태가 아닌 경우, 공유된 링크는 일반 링크 형태나 회색 타일, 혹은 잘린 제품 사진으로 표시됩니다. 대부분의 WooCommerce 스토어는 제품 페이지에 대해 og:image를 전혀 설정하지 않습니다. SEO 플러그인이 정적 피처드 이미지로 대체되는데, 이때 정사각형 또는 세로형 제품 사진의 양쪽 끝이나 상단이 잘리게 됩니다.
1. 페이지에 og:image 태그가 없습니다
가게에서 가장 흔한 원인입니다. WordPress와 WooCommerce는 기본적으로 제품, 카테고리 또는 상점 페이지에 og:image를 생성하지 않으며, Open Graph를 처리하지 않는 테마를 사용하면 해당 태그가 완전히 누락됩니다.
해결 방법: 페이지 소스를 확인하여 og:image 태그가 존재하는지, 절대 경로(상대 경로가 아닌 전체 https://… URL)인지, 그리고 로드 후 JavaScript로 주입되지 않고 서버에서 렌더링되었는지 확인하십시오. WhatsApp은 귀하의 JavaScript를 실행하지 않습니다.
curl -s https://your-store.com/product/example | grep -i 'og:image'
빈 결과가 반환된다면 그것이 정답입니다: WhatsApp에는 표시할 이미지가 없습니다.
2. 이미지 URL이 공개적으로 접근 불가능함
WhatsApp의 크롤러는 모든 익명 클라이언트와 동일한 방식으로 이미지를 가져옵니다. 로그인 페이지 뒤에 있는 URL, localhost의 URL, 원시 IP 주소, 또는 robots.txt에 의해 차단된 경로에 있는 URL은 모두 실패합니다.
해결책: URL이 인증 정보 없이 이미지를 반환하는지 확인하십시오.
curl -I https://your-store.com/wp-content/uploads/product.jpg
200 OK와 image/png 또는 image/jpeg의 Content-Type을 원합니다.
robots.txt 함정. 소셜 크롤러는 robots.txt을 존중하므로, 이미지를 포함하는 경로를 차단하는 규칙은 미리 보기를 깨뜨립니다. 이는 오진하기 쉬운 방식으로 문제를 일으킵니다. Meta의 디버거는 *"이미지로 처리할 수 없습니다. 손상되었거나 잘못된 형식일 수 있습니다"*라고 보고하는데, 이는 깨진 렌더링처럼 보입니다. curl에서는 이를 재현할 수 없습니다. 왜냐하면 curl이 robots.txt을 무시하기 때문입니다. 이미지가 Disallow: 규칙이 적용된 경로에서 제공되는 경우, 파일이 얼마나 유효하든 미리 보기가 실패합니다. 우리는 FastOG의 자체 렌더링 경로에서 이 문제를 겪었고, longest-match Allow: 오버라이드를 통해 해결했습니다.
3. WhatsApp가 제품 이미지를 잘라내며 — 사진을 편집해도 해결되지 않습니다
이것은 상인들이 "WhatsApp에서 제품 이미지가 잘려 나간다"고 묘사하는 증상이며, 제대로 이해할 가치가 있는 유일한 증상입니다.
플랫폼은 제공된 이미지를 1200×630 프레임으로 잘라냅니다. 정사각형이거나 세로로 긴 제품 사진의 경우 측면이나 상단이 잘리며, 로고 타일은 늘어납니다. Photoshop에서 소스 사진을 직접 잘라내는 것은 실패할 수밖에 없는 시도입니다. WhatsApp은 카드의 가로세로 비율에 따라 잘라내기 영역을 결정하기 때문이며, 다음 제품 사진은 또 다른 모양을 가지고 있기 때문입니다.
해결책은 소유한 사진이 아니라 제공하는 이미지를 변경하는 것입니다. 제품 사진이 이미 포함된 1200×630 크기의 카드를 전송하면 플랫폼은 더 이상 잘라낼 부분이 없게 됩니다.
4. 올바른 WhatsApp 링크 미리보기 이미지 크기
표준 Open Graph 이미지 크기는 1200×630 픽셀(1.91:1 비율)이며, 이는 WhatsApp을 포함한 주요 플랫폼들이 기대하는 형태입니다. 1200×630 크기를 제공하면 미리보기가 의도대로 렌더링되지만, 1000×1000 정사각형 이미지를 제공하면 WhatsApp이 프레임에 꽉 차도록 이미지를 잘라냅니다.
파일 크기는 5 MB 미만으로 유지하세요. 1200×630 크기의 텍스트 및 제품 카드는 일반적으로 PNG 형식으로 200 KB에서 500 KB 사이 크기를 가집니다.
왜 이 비율이 표준이 되었는지 알아보세요: OG Image Size: 1200×630 Explained
5. 미리보기가 오래되었으며 WhatsApp 새로 고침을 강제할 수 없습니다
태그, URL, 그리고 카드 모양이 모두 올바른데도 미리보기가 여전히 잘못 표시된다면, 이는 캐시 문제입니다.
WhatsApp은 미리보기를 캐싱합니다. 이 캐시는 수신자의 앱에 저장되므로 어떤 도구로도 WhatsApp에 새로 고침을 요청할 수 없습니다 — 디버거도, API도, 저희도 불가능합니다. WhatsApp은 어떠한 형태의 프로그래밍 방식 새로 고침도 제공하지 않으므로, 누를 수 있는 버튼이 없습니다. 그렇지 않다고 주장하는 사람은 Facebook의 동작을 설명하는 것이지 WhatsApp의 동작을 설명하는 것이 아닙니다.
할 수 있는 일은 WhatsApp이 다음에 페이지를 읽을 때 올바른 이미지가 대기하고 있도록 하는 것입니다. 이것이 FastOG의 커버 URL이 콘텐츠 기반 주소(content-addressed)로 설계된 이유입니다: 제품의 제목, 가격, 또는 이미지를 변경하면 URL도 함께 변경되므로, 다음 읽기 작업에서는 오래된 카드를 가져올 수 없습니다. 그 읽기가 언제 발생하는지는 WhatsApp에 달려 있습니다.
두 가지 관련 플랫폼도 동일한 방식으로 동작합니다 — LinkedIn과 X도 무효화 API를 제공하지 않으며, 일반적으로 약 1주일 이내에 다시 읽기를 수행합니다. 급한 경우 자체 검사 도구로 이를 재촉할 수 있습니다:
| 플랫폼 | 도구 | 미리보기 새로 고침을 강제할 수 있나요? |
|---|---|---|
| (없음) | 아니요 — 미리보기는 수신자의 앱에 캐시됨 | |
Sharing Debugger — developers.facebook.com/tools/debug |
예 — "Scrape Again" 버튼 및 프로그래밍 방식 지원 | |
Post Inspector — linkedin.com/post-inspector |
다시 읽기를 재촉함 | |
| X / Twitter | Card Validator — cards-dev.twitter.com/validator |
다시 읽기를 재촉함 |
WhatsApp 문제를 위해 Facebook 디버거 사용하기. WhatsApp을 새로 고칠 수는 없지만 URL을 Sharing Debugger에 붙여넣는 것은 여전히 가치가 있습니다. 이는 WhatsApp이 수행하는 방식과 동일하게 페이지를 가져와서 실제로 발견한 것(누락된 태그, 접근 불가 이미지, 잘못된 형식 등)을 보고하기 때문입니다. 이를 WhatsApp 캐시를 수정하는 도구가 아닌, 태그를 검증하는 도구로 사용하십시오.
6. WooCommerce 스토어에서 이 문제 해결하기
WooCommerce에서는 실패 원인이 주로 테마가 아닌 SEO 플러그인에서 발생하므로, 워크플로우를 정확히 설명할 가치가 있습니다.
- 태그가 기본적으로 존재하지 않습니다. WooCommerce는
og:image,product, 또는 쇼핑몰 페이지에 대한product_cat을 기본 제공하지 않습니다. - SEO 플러그인이 이를 잘못 보완합니다. Yoast, Rank Math, All in One SEO, SEOPress는
og:image을 출력하지만, 제품 페이지에서는 *정적 대표 이미지(static featured image)*를 참조합니다. 이는 정사각형 또는 세로형 사진으로, WhatsApp이 이를 잘라내는 원인이 됩니다. - 중복 태그에 주의하세요. 두 플러그인이 모두
og:image을 출력하면 플랫폼 중 하나가 이를 선택하지만, 기대한 태그가 아닐 수 있습니다. 소스 코드를 확인하고 페이지에서og:image태그가 몇 개 출력되는지 세어보세요.
FastOG for WooCommerce는 다른 접근 방식을 취합니다. 자체 렌더링 서비스에서 라이브 카탈로그 데이터(제목, 가격, 세일 배지, 평점, 제품 사진)를 사용하여 1200×630 크기의 카드 이미지를 생성한 후, 이미 실행 중인 SEO 플러그인 대신 경쟁 태그를 출력하지 않고 해당 커버를 전달합니다. 따라서 페이지에는 하나의 og:image만 남으며, 이는 원본 제품 사진이 아닌 1.91:1 비율에 맞게 구성된 카드입니다.
커버는 라이브 카탈로그 데이터에서 생성되므로 카드의 가격이 페이지의 가격과 일치하며, 할인된 제품에는 세일 배지가 표시됩니다. 제품을 저장할 때 플러그인은 Facebook에게 페이지를 다시 읽도록 요청합니다. Facebook은 프로그래밍 방식으로 캐시를 새로 고침할 수 있는 유일한 플랫폼입니다. WhatsApp, LinkedIn, X는 자체 일정에 따르며, 플러그인은 이를 명확히 명시하고 스스로 제공할 수 없는 새로 고침을 약속하지 않습니다.
- 설치: WordPress.org의 FastOG for WooCommerce
- 세부 정보 및 FAQ: WooCommerce 통합 페이지
WhatsApp가 실제로 볼 내용을 확인하세요
변경하기 전에 크롤러가 보는 것처럼 페이지를 살펴보세요. 제품 URL을 See Your Links The Way Buyers Do에 붙여넣으세요. 이 도구는 페이지를 가져와 현재 Open Graph 태그를 읽고, WhatsApp, X, Messenger가 렌더링하는 결과를 FastOG 커버(동일한 제품 데이터로 생성)와 함께 나란히 보여줍니다. 회원가입이 필요 없습니다.
원시 태그를 직접 검사하고 싶다면 Open Graph Meta Tag Generator를 사용하여 마크업을 확인하거나, og:image Not Showing? How to Fix It의 참조를 살펴보세요.
자주 묻는 질문
왜 WhatsApp에서 제품 이미지가 잘려 보이나요?
WhatsApp은 제공된 이미지를 1200×630 프레임으로 잘라냅니다. 정사각형 또는 세로형 제품 사진은 양쪽 끝이나 상단이 잘려 나갑니다. 이미 1200×630 크기로 구성된 카드를 제공하면(제품 사진이 카드 안에 맞게 배치된 상태), 플랫폼이 추가로 잘라낼 부분이 없게 됩니다.
WhatsApp 링크 미리보기를 강제로 새로 고칠 수 있나요?
아니요. WhatsApp은 새로 고침 API나 디버거를 제공하지 않으며, 캐시된 미리보기는 수신자의 앱에 저장됩니다. 올바른 이미지가 다음 읽기 작업을 위해 대기 중인지 확인하는 것만이 유일한 방법입니다. Facebook은 예외적으로 프로그래밍 방식으로 다시 스크래핑하는 기능을 제공합니다.
Facebook 공유 디버거에는 이미지가 표시되는데, WhatsApp에는 표시되지 않는 이유는 무엇인가요?
두 플랫폼은 서로 다른 캐시를 사용하기 때문입니다. 디버거는 두 플랫폼 모두에서 읽는 페이지의 태그를 보고하고 있습니다. 디버거에는 올바른 이미지가 표시되지만 WhatsApp에는 표시되지 않는다면, 태그는 정상이며 WhatsApp 캐시가 새로 고쳐지지 않은 상태인 것입니다. 디버거에도 이미지가 표시되지 않는다면 태그가 누락되었거나 이미지에 접근할 수 없는 것입니다 — 원인 1과 2를 차례로 확인하세요.
WhatsApp은 og:image를 사용하나요, twitter:image를 사용하나요?
og:image. Open Graph 태그를 설정하세요. twitter:image는 X용입니다.
플러그인이 필요한가요, 아니면 태그를 직접 추가해도 되나요?
테마에 정적 og:image 태그를 직접 추가할 수 있습니다 — 작동하며, 아무것도 하지 않는 것보다 훨씬 낫습니다. 그러나 이 방식으로는 제품마다 고유한 카드를 생성할 수 없으며, 제품마다 이미지를 수동으로 제작해야 합니다. 또한 가격이 변경될 때마다 정보가 stale(구식) 상태가 됩니다. 바로 이 지점에서 동적 커버가 가치를 지닙니다.
제 사이트가 FastOG를 사용하지 않습니다. 그래도 도움이 되나요?
네 — 다섯 가지 원인은 FastOG의 동작이 아닌 플랫폼의 동작입니다. curl, 페이지 소스, 그리고 디버거를 사용하여 순서대로 확인하세요.