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

사이트 링크를 카카오톡에 보냈는데 이미지·설명이 깨져 나오면 클릭률이 크게 떨어집니다. 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                       │
└─────────────────────────────────┘

→ 후자는 클릭도 신뢰도도 크게 떨어집니다.

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

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

위치

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

권장 사양

업로드

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

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

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

위치

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

설정 항목

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

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

카카오톡 캐시 문제 해결

OG 정보를 바꿨는데 카카오톡에서는 옛 이미지가 그대로 떠요? 카카오톡이 일정 기간 미리보기를 캐시하기 때문입니다.

캐시 강제 새로고침

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

페이스북·인스타그램

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

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

관련 가이드

• imweb-getting-started — 처음 시작하기
• imweb-seo-basics — SEO 기초 (메타 정보)
• imweb-domain-connect — 도메인 연결
• imweb-menu-management — 페이지별 OG 설정
• 홈페이지 제작 비용 가이드 — 빌더 직접 제작과 외주 제작의 비용 비교 기준

출처 및 검증
본 가이드는 아임웹 공식 도움말과 Open Graph 표준 문서를 기반으로 언웹스가 실무 노하우를 더해 재구성했습니다. 최종 확인: 2026-05.