아임웹 사이트를 카카오톡·SNS에 잘 공유되게 만들기 — Open Graph

Q: 한 페이지가 SNS에서 어떻게 보이는지 미리 확인하려면?

페이스북 Sharing Debugger 또는 카카오톡 OG 디버거에 URL 입력하면 실제 표시 형태 확인 가능.

Q: 동영상도 OG로 표시할 수 있나요?

가능하지만 아임웹 기본 기능에는 없음. 코드 위젯으로 og:video 메타 태그 직접 추가해야 함. 일반적으로 이미지로 충분.

Q: 메인 페이지에 카드형 미리보기가 안 떠요.

다음 점검: 1. 사이트 SSL 적용 여부 (https 아니면 일부 SNS 차단) 2. 대표 이미지 업로드 여부 3. 카카오톡·페이스북 디버거에서 강제 새로고침

사이트 링크를 카카오톡에 보냈는데 이미지·설명이 깨져 나오면 클릭율이 절반으로 떨어집니다. Open Graph(OG) 설정을 한 번 해두면 카톡·페이스북·인스타·라인 등 모든 SNS에서 깔끔한 미리보기가 표시됩니다.

시작하기 전에

준비물: 대표 이미지(PNG, 1200×630px), 사이트 이름·설명.
소요 시간: 5분.
반영 시간: 즉시 ~ 24시간 (카카오톡은 캐시 때문에 지연 가능).

Open Graph란?

링크 공유 시 표시되는 미리보기 카드 정보. 페이스북이 만든 표준이지만 카카오톡·트위터·인스타 등 모든 주요 플랫폼이 채택.

3가지 핵심 정보:

이미지 (og:image)
제목 (og:title)
설명 (og:description)

잘 설정된 카드 예시

┌─────────────────────────────────┐
│  [큰 이미지: 병원 외관 + 로고]    │
│                                 │
│  ○○이비인후과 - 안산 본오동     │  ← 제목
│  코·귀·목 전문 진료, 야간 진료   │  ← 설명
│  mycompany.com                  │  ← 도메인
└─────────────────────────────────┘

깨진 카드 예시

┌─────────────────────────────────┐
│  [흐릿한 작은 이미지 또는 X]    │
│                                 │
│  무제                           │
│  No description                 │
│  imweb.me                       │
└─────────────────────────────────┘

→ 후자는 클릭율 절반 이하. 신뢰도 ↓.

사이트 전체 대표 이미지 설정

전 페이지에 동일하게 적용되는 기본 이미지.

위치

관리자 → 환경설정 > 일반 > 대표 이미지.

권장 사양

항목	권장
크기	1200 × 630px (Open Graph 표준)
최소	200 × 200px (이하면 카카오톡이 거부)
형식	PNG (아임웹 제약)
용량	8MB 이하
내용	로고 + 사이트명 + 한 줄 카피

업로드

PNG 파일 업로드 버튼 클릭.
이미지 선택 → 업로드.
저장.

대표 이미지 업로드

페이지별로 다른 이미지·설명 (강력 추천)

페이지마다 다른 OG 이미지·설명을 두면 SNS에서 각 페이지가 더 매력적으로 노출됩니다.

위치

디자인 모드 → 좌상단 메뉴 관리(≡) → 메뉴 옆 ⓘ 아이콘 → 메뉴 설정.

설정 항목

페이지 제목: SNS에 표시되는 제목 (15자 이하 권장)
페이지 설명: 설명 텍스트 (60~80자)
메뉴 대표이미지: 그 페이지 전용 이미지

💡 예시: 메인은 회사 전경 이미지, “진료 안내” 페이지는 진료 도구 이미지, “오시는 길” 페이지는 약도 이미지.

카카오톡 캐시 문제 해결

OG 정보를 바꿨는데 카카오톡에서는 옛 이미지가 그대로 떠요? 카카오톡이 일정 기간 미리보기를 캐시해서 그래요.

캐시 강제 새로고침

카카오톡 디벨로퍼스 OG 디버거 ↗ 접속 → 카카오 계정 로그인.
도구 > 카카오톡 공유 디버거.
URL 입력 → 분석 → 다시 가져오기.
카카오톡에서 다시 공유해서 확인.

페이스북·인스타그램

Sharing Debugger ↗ → URL 입력 → Scrape Again.

트위터·X

Card Validator ↗ → URL 입력.

OG 이미지 만드는 팁

디자인 가이드

로고는 좌상단, 주요 메시지는 중앙
여백 충분히 (모서리에 글자 두면 잘릴 수 있음)
고대비 컬러 — 카카오톡은 작게 표시되므로 식별성 우선
너무 많은 텍스트 X — 한 줄 카피 + 시각 요소

디자인 도구

Canva (무료) — Open Graph 템플릿 풍부
Figma (무료) — 직접 제작
Photoshop·Illustrator — 전문가용

사이즈 정확히 1200×630

비율이 안 맞으면 카카오톡·페이스북이 자동으로 자르거나 여백을 채워서 의도와 다르게 표시됩니다.

OG 정보가 검색에도 영향?

직접적 SEO 순위 영향은 작지만 간접적으로 영향:

SNS 공유 → 외부 백링크 ↑
클릭률 향상 → 사용자 신호 ↑
도달 범위 확대 → 브랜드 인지도

💡 SNS·SEO 둘 다 한 번에 챙기는 적은 비용·큰 효과 작업.

⚠️ 자주 막히는 포인트

PNG가 아닌 JPG 업로드 시도 → 아임웹 대표 이미지는 PNG만. 변환 후 업로드.
이미지 사이즈 200×200 미만 → 카카오톡이 미리보기 거부. 1200×630 권장.
변경했는데 카카오톡은 옛 이미지 → 캐시 새로고침 필수 (위 가이드).
페이지마다 똑같은 대표 이미지 → 각 페이지 메뉴 설정에서 따로 지정.
링크 공유 시 도메인이 imweb.me → 개인 도메인이 연결 안 됐거나 대표 도메인 설정 미완.

❓ FAQ

Q. JPG·WebP 이미지를 OG로 쓸 수 없나요? A. 아임웹 사이트 전체 대표 이미지는 PNG만. 메뉴별 대표 이미지(메뉴 설정)에서는 JPG도 가능.

Q. 한 페이지가 SNS에서 어떻게 보이는지 미리 확인하려면? A. 페이스북 Sharing Debugger ↗ 또는 카카오톡 OG 디버거에 URL 입력하면 실제 표시 형태 확인 가능.

Q. 동영상도 OG로 표시할 수 있나요? A. 가능하지만 아임웹 기본 기능에는 없음. 코드 위젯으로 og:video 메타 태그 직접 추가해야 함. 일반적으로 이미지로 충분.

Q. 메인 페이지에 카드형 미리보기가 안 떠요. A. 다음 점검:

사이트 SSL 적용 여부 (https 아니면 일부 SNS 차단)
대표 이미지 업로드 여부
카카오톡·페이스북 디버거에서 강제 새로고침

Q. 같은 URL을 두 번째 공유할 때부터 깨져요. A. 첫 공유 시 SNS가 캐시. 그 후 OG 변경 시 디버거로 갱신해야 함.