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

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. 실제 카톡 대화방에 링크 붙여넣어 시각 검증.

8. 한국 SNS 플랫폼별 OG 태그 차이 — 카톡·네이버·페북·X

OG 표준은 페이스북 OpenGraph 규격이지만, 한국 주류 SNS 는 각자 변형된 규격을 사용합니다. 본 도구는 4대 플랫폼의 실제 렌더링 방식을 모두 시뮬레이션해 동시 미리보기를 제공합니다. 플랫폼별 차이를 모르고 OG 만 채우면 카톡은 잘 보이는데 네이버 블로그에서는 깨지는 패턴이 자주 발생합니다.

카카오톡 (KakaoLink)

og:image 권장 비율 5:2(예: 800×320px), 최소 200×200, 최대 5MB. og:title 40자, og:description 110자 권장입니다. 카카오는 자체 캐시 정책으로 한 번 등록된 미리보기를 24~72시간 캐시하므로, 변경 후 즉시 반영하려면 카카오 디버거에서 강제 갱신해야 합니다. HTTPS 가 필수이며 HTTP 이미지는 표시되지 않습니다.

네이버 블로그·카페

네이버는 og:image 비율 1:1 또는 1.91:1 모두 허용하지만 자체 알고리즘으로 이미지 크롭이 강해 인물 사진 얼굴이 잘리는 경우가 흔합니다. og:title 35자, og:description 100자 권장이며 한글 기준입니다. 네이버는 별도 디버거가 없어 실제 글에 링크 붙여보는 것이 유일한 검증 방법입니다.

페이스북·인스타그램

og:image 권장 1200×630px(1.91:1), 최소 600×315, 최대 8MB. og:title 60자, og:description 155자입니다. 페이스북 Sharing Debugger 에서 강제 갱신 가능하며, 인스타그램 스토리·DM 링크 미리보기도 같은 규격을 따릅니다.

X (구 트위터)

X 는 별도 twitter:card 메타 규격을 사용하지만 og:image 가 없으면 fallback 으로 og:* 를 인식합니다. card 종류는 summary, summary_large_image 두 가지이며 후자가 1200×675px 큰 이미지로 표시됩니다. twitter:title 70자, twitter:description 200자가 한도입니다.

9. OG 이미지 디자인 — 한글 가독성 9가지 원칙

  1. 제목 폰트 크기 60~80px 권장 — 800×320 카카오 비율 기준에서 모바일 화면에 글자가 충분히 보이는 크기.
  2. 한글 폰트 굵기 700 이상 — 얇은 폰트는 작은 미리보기 화면에서 흐릿하게 보입니다.
  3. 최대 2줄 텍스트 — 3줄 이상이면 미리보기에서 잘립니다.
  4. 배경은 단색 또는 그라데이션 — 복잡한 배경 이미지는 글자 가독성 저하.
  5. 로고는 우측 하단 작게 — 메인 이미지의 1/8 이하 크기 권장.
  6. 안전 여백 50px 이상 — 카톡·네이버 알고리즘이 가장자리를 자를 수 있음.
  7. 이미지 외 텍스트만 OG 도 가능 — 단순 정보 페이지는 텍스트 중심 OG 가 클릭률이 더 높습니다.
  8. HTTPS 절대 URL 필수 — 상대 경로·HTTP 는 카톡에서 표시되지 않음.
  9. 파일명은 영문 — 한글 파일명은 일부 SNS 에서 URL 인코딩 오류로 깨질 수 있음.

10. 본 도구 활용 5단계 워크플로우

  1. 웹사이트 또는 블로그 글의 URL 을 본 도구에 붙여넣습니다.
  2. 카톡·네이버·페북·X 4대 플랫폼 동시 미리보기를 확인합니다.
  3. 누락 태그·해상도 부족·HTTPS 누락 등 진단 결과를 봅니다.
  4. 제공된 복붙용 메타 태그 스니펫을 HTML head 에 추가합니다.
  5. 카카오 디버거 + Facebook Sharing Debugger 에서 강제 갱신 후 실제 SNS 에 링크를 붙여 시각 검증합니다.

결론 — 4대 플랫폼 동시 점검이 표준

한국에서 콘텐츠를 공유할 때 카톡 + 네이버 + 페북 + X 4대 플랫폼이 모두 잘 렌더링되어야 합니다. 한 플랫폼만 보고 OG 를 채우면 다른 플랫폼에서 깨지는 패턴이 흔하므로, 본 도구의 동시 미리보기로 4종을 한 번에 검증하세요. 모든 진단은 브라우저 안에서만 이루어지며 URL 정보는 서버에 저장되지 않습니다.

← 미리보기로 돌아가기