카카오톡·네이버 OG 미리보기

OG 태그 작성 가이드

카카오톡·네이버·페이스북·X에서 썸네일이 제대로 표시되게 만드는 실무 체크리스트.

1. 필수 5개 태그

<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="100자 이내 요약" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />

2. og:image 규격

  • 해상도: 1200×630 권장 (1.91:1). 최소 600×315.
  • 용량: 8MB 이하. 카카오톡은 5MB 넘으면 미리보기가 실패할 때가 많음.
  • 포맷: PNG · JPG. WebP는 카카오톡에서 불안정.
  • 파일명: 영문 + 하이픈만. 한글/공백/특수문자는 깨짐 유발.
  • HTTPS 필수: HTTP 이미지는 대부분 플랫폼이 거부.

3. 카카오톡 전용 팁

  • 캐시가 가장 큰 골칫거리: 한번 캐싱되면 2~3시간 유지. 태그 변경 후 바로 반영되지 않아도 정상.
  • 강제 초기화: Kakao Debugger에서 "캐시 초기화" 클릭.
  • 큰 이미지 표시 조건: og:image 너비 ≥ 600px, og:title + og:description 모두 설정, og:image 접근 가능(로봇 허용).

4. 네이버 블로그 / 카페 팁

  • 네이버는 자체 스킨에서 OG 일부만 인식. 본문 첫 이미지도 썸네일 후보.
  • 정사각형(1:1) 이미지가 네이버 블로그 리스트에서 깔끔하게 노출됨.
  • robots.txt 에서 Yeti, Daumoa 크롤러 허용 확인.

5. 페이스북 / X(Twitter)

  • 페이스북: Sharing Debugger에서 "Scrape Again" 으로 즉시 갱신.
  • X: twitter:card=summary_large_image 로 큰 카드 강제.
  • X는 og:image가 있으면 twitter:image를 별도 설정하지 않아도 동작.

6. 자주 깨지는 패턴

  • Cloudflare · Vercel 프리뷰 도메인에서 og:url이 원본 도메인으로 고정되어 캐시 충돌.
  • SPA(React/Vue)에서 초기 HTML 에 og 태그가 없음 → SSR / prerender 필요.
  • og:image URL에 쿼리스트링 포함 시 카카오톡이 캐시 키를 잘못 생성.
  • og:image가 CDN 서명 URL (만료됨) → 며칠 후 공유 시 이미지 깨짐.

7. 디버깅 순서

  1. 본 도구로 우선 스캔 (어떤 태그가 누락됐는지).
  2. Facebook Sharing Debugger 로 HTTPS 이미지 fetch 확인.
  3. Kakao Debugger 로 카톡 캐시 강제 갱신.
  4. 실제 카톡 대화방에 링크 붙여넣어 시각 검증.

← 미리보기로 돌아가기