SEO · 2026년 7월 10일 · 읽는 시간 4분

SNS 공유했을 때 어떻게 보이는지 미리 확인하는 OG 미리보기

👉 OG 태그 미리보기 바로 가기

카카오톡이나 슬랙에 링크 붙였을 때 미리보기가 이상하게 나와서 실제 배포 전에 확인하고 싶었다.

OG 태그 미리보기가 필요한 상황

이런 경우들:

  • 새 페이지 배포 전 → SNS 공유 미리보기 모양 확인
  • OG 이미지 비율 확인 → 1200×630px 맞는지
  • 제목/설명 길이 확인 → 잘리는 부분 없는지
  • 트위터 카드 설정 확인 → summary vs summary_large_image
  • 카카오톡 링크 공유 → 썸네일이 제대로 나오는지
  • 슬랙 Unfurl 미리보기 → 팀 채널 링크 공유 시

실제로 공유해보기 전까지 어떻게 보이는지 모르는 게 불편했다. 카카오톡 캐시 날리는 방법도 찾아봐야 하고.

OG 태그란

Open Graph 프로토콜 - 링크 공유 시 미리보기를 제어하는 메타태그:

<head>
  <!-- 기본 OG 태그 -->
  <meta property="og:title" content="페이지 제목" />
  <meta property="og:description" content="페이지 설명 (160자 이내)" />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />

  <!-- 트위터 카드 -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="페이지 제목" />
  <meta name="twitter:description" content="페이지 설명" />
  <meta name="twitter:image" content="https://example.com/og-image.png" />
</head>

og:image 없으면 공유 시 이미지 없이 텍스트만 나온다. 있어도 비율이 맞지 않으면 이상하게 잘려서 나올 수 있다.

플랫폼별 OG 이미지 권장 크기

  • Facebook/일반 OG → 1200×630px (1.91:1 비율)
  • Twitter Summary Large Image → 1200×628px (2:1 비율)
  • Twitter Summary → 144×144px (정사각형)
  • Kakao → 800×400px (2:1 비율)
  • Slack Unfurl → 1200×630px (Facebook과 동일)
  • LinkedIn → 1200×627px

플랫폼마다 조금씩 달라서, 1200×630px을 기준으로 만들면 대부분 커버된다.

기존 방법의 문제

  • 실제 공유해보기 → 결과 보려면 직접 공유해야 함
  • Facebook Sharing Debugger → 공개 URL만 됨, 로컬 환경 불가
  • Twitter Card Validator → Twitter 계정 필요, 느림
  • 각 플랫폼 캐시 → 수정 후에도 이전 미리보기가 나옴

로컬 개발 환경에서 테스트하기 어렵고, 공개 URL도 캐시 때문에 수정 후 확인이 귀찮다.

그래서 만들었음

주요 기능:

  • URL 입력 → OG 태그 자동 파싱 및 미리보기
  • OG 태그 직접 입력 → 배포 전 미리 확인
  • Facebook, Twitter, Slack, KakaoTalk 미리보기 시뮬레이션
  • OG 이미지 크기/비율 확인
  • 누락된 태그 알림
  • title/description 길이 확인 (잘림 여부)

자주 발생하는 OG 문제들

  • 이미지가 안 나옴 → og:image 누락, 또는 상대 URL 사용 (절대 URL 써야 함)
  • 이상하게 잘림 → og:image 비율이 1.91:1이 아님
  • 예전 미리보기가 나옴 → 각 플랫폼 캐시 때문 (강제 갱신 필요)
  • 설명 텍스트가 잘림 → og:description이 160자 이상
  • 제목 잘림 → og:title이 60자 이상 (플랫폼별 다름)

캐시 강제 갱신 방법

  • Facebook → developers.facebook.com/tools/debug/ 에서 URL 입력 후 "Scrape Again"
  • Twitter → cards-dev.twitter.com/validator 에서 확인
  • 카카오톡 → 링크 뒤에 파라미터 추가 (예: ?v=2)
  • Slack → /unfurl 명령어 또는 링크 재전송

실제로 써보니

좋은 점:

  • 배포 전에 미리 확인 가능
  • 여러 플랫폼 미리보기 동시에 비교
  • 누락된 태그 자동 감지
  • 이미지 크기/비율 체크

한계:

  • 실제 플랫폼 렌더링과 100% 동일하지 않을 수 있음
  • CORS 제한으로 일부 URL은 파싱 안 될 수 있음
  • 로컬호스트 URL은 직접 입력 방식 사용해야 함

사용법

  1. URL 입력 또는 OG 태그 직접 입력
  2. 각 플랫폼별 미리보기 확인
  3. 문제 있으면 HTML의 OG 태그 수정
  4. 다시 확인

써보기

👉 OG 태그 미리보기 바로 가기

새 페이지 배포 전에 SNS 공유 미리보기 확인용으로 써보면 편함.

#OG태그 #OpenGraph #SNS공유 #SEO #메타태그

← 블로그 목록으로

광고