오픈그래프(OG) 메타태그 설정법과 SNS 공유 카드 최적화
웹사이트나 블로그 링크를 카카오톡 대화방, 슬랙, 페이스북, 트위터(X)에 붙여넣었을 때 깔끔한 대표 썸네일 이미지와 제목, 요약 설명이 담긴 '미리보기 카드(Rich Link Preview)'가 자동 생성되는 것은 HTML <head> 안에 정의된 Open Graph(오픈그래프, OG) 메타태그 덕분입니다.
요약 ① 핵심 4대 태그:
og:title,og:description,og:image,og:url은 모든 메신저와 SNS 미리보기 카드의 필수 규격입니다. ② 절대 경로 필수:og:image주소에 상대 경로(/images/og.jpg)를 적으면 SNS 스크랩 봇이 이미지를 읽지 못하므로 반드시https://가 포함된 절대 URL을 지정해야 합니다. ③ 권장 해상도: 카카오톡 말풍선과 페이스북, 트위터 대형 카드에 가장 완벽하게 대응하는 표준 이미지 규격은 **1200 × 630px (1.91:1 비율)**입니다.
Open Graph(OG) 프로토콜이란 — 작동 원리와 크롤러
Open Graph 프로토콜은 2010년 페이스북이 웹페이지를 소셜 그래프 객체로 표현하기 위해 처음 제안한 표준 규약(ogp.me)입니다.
사용자가 메신저나 SNS에 링크 URL을 입력하면, 해당 플랫폼의 '스크랩 봇(Scrap Bot, 카카오의 kakaotalk-scrap, 페이스북의 facebookexternalhit, 트위터봇 등)'이 해당 웹서버로 접근하여 HTML 문서의 <head> 섹션에 들어 있는 <meta property="og:..." > 태그를 읽어와 시각적인 카드로 조립합니다.
일반 검색엔진 최적화 태그(<title>, <meta name="description">)가 구글·네이버 검색 결과 목록을 위한 것이라면, Open Graph 태그는 대화방과 피드에 공유될 때 클릭률(CTR)과 신뢰도를 극대화하기 위한 소셜 전용 메타데이터입니다.
필수 Open Graph & Twitter Cards 8대 태그 세트
웹사이트의 모든 페이지 <head> 안에 기본적으로 포함되어야 하는 표준 메타태그 세트입니다.
<!-- 기본 Open Graph (카카오톡, 페이스북, 슬랙, 인스타그램) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="페이지 대표 제목">
<meta property="og:description" content="대화방에 노출될 1~2줄 요약 설명 문구">
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<meta property="og:site_name" content="브랜드 또는 서비스명">
<!-- 트위터 전용 카드 (Twitter / X) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="페이지 대표 제목">
<meta name="twitter:description" content="대화방에 노출될 1~2줄 요약 설명 문구">
<meta name="twitter:image" content="https://example.com/images/og-image.jpg">
og:type: 웹페이지의 성격(일반 사이트는website, 블로그 포스트나 뉴스 기사는article).og:url: 파라미터나 세션 ID가 섞이지 않은 대표 정규(Canonical) URL.og:image: 사용자의 시선을 끄는 1.91:1 비율의 대표 썸네일 이미지 주소.twitter:card:summary_large_image를 지정해야 상단에 이미지가 시원하게 크게 펼쳐지는 대형 카드로 렌더링됩니다.
실무에서 썸네일이 안 뜰 때 점검해야 할 3가지
메타태그를 넣었는데도 카카오톡이나 SNS에서 이미지가 빈칸으로 나오거나 예전 이미지가 뜨는 대표적인 원인 3가지와 해결 방법입니다.
1. 상대 경로(/images/og.jpg) 사용
HTML 문서 내부에서는 상대 경로가 작동하지만, 외부에서 문서를 긁어가는 SNS 스크랩 봇은 기준 도메인을 알지 못해 이미지를 다운로드하지 못합니다.
- 해결책:
og:image와og:url에는 반드시 **https://www.example.com/images/og.jpg**처럼 프로토콜과 도메인이 포함된 완전한 절대 경로를 입력해야 합니다.
2. 플랫폼별 스크랩 캐시(Cache) 미갱신
이미 한 번 카카오톡이나 페이스북에 공유되었던 URL은 해당 플랫폼의 서버가 며칠에서 몇 주 동안 캐시를 저장합니다. 따라서 웹사이트 코드를 수정해도 즉시 바뀌지 않습니다.
- 해결책: 카카오 개발자 센터의 '카카오톡 공유 캐시 삭제 도구' 또는 메타의 'Facebook Sharing Debugger'에 URL을 입력하고 '캐시 초기화(Scrape Again)' 버튼을 눌러주어야 최신 메타태그가 즉시 반영됩니다.
3. 이미지 파일 형식 및 용량 한계
SVG 벡터 파일은 보안 및 렌더링 문제로 인해 카카오톡과 대다수 SNS 스크랩 봇이 파싱을 거부합니다.
- 해결책: 가급적 JPG, PNG, WebP 포맷을 사용하고, 용량은 5MB 이하(권장 1MB 미만)로 압축하여 크롤러가 타임아웃 없이 빠르게 수집할 수 있도록 해야 합니다.
입력한 제목과 설명, 썸네일 주소로 Open Graph 메타태그를 생성하고 카카오톡 공유 카드를 실시간 미리보기로 확인하려면 저희 도구로 확인해보세요.
무료 · Open Graph 및 Twitter Card 메타태그 생성 & 실시간 SNS 카드 미리보기
주요 SNS 플랫폼별 Open Graph 권장 규격표
| 플랫폼 / 메신저 | 권장 이미지 해상도 | 화면 비율 | 최대 허용 용량 | 특징 |
|---|---|---|---|---|
| 카카오톡 (KakaoTalk) | 1200 × 630px (최소 800×400px) | 1.91 : 1 또는 2 : 1 | 5MB 이하 | 제목 2줄 초과 시 자동 말줄임 |
| 페이스북 (Facebook) | 1200 × 630px (최소 600×315px) | 1.91 : 1 | 8MB 이하 | 피드 전체 너비 대형 썸네일 노출 |
| 트위터 (X) | 1200 × 628px | 1.91 : 1 | 5MB 이하 | summary_large_image 카드 규격 |
| 슬랙 / 디스코드 | 1200 × 630px | 1.91 : 1 | 5MB 이하 | 대화방 내 본문 하단 자동 임베드 |
정리
Open Graph 메타태그는 메신저와 SNS 피드에서 웹사이트의 첫인상을 결정짓는 핵심 규격입니다.
og:image에는 반드시 https://가 포함된 절대 경로를 사용하고 1200 × 630px 규격을 준수해야 깨짐 없는 선명한 카드가 노출되며, 메타태그를 수정한 후에는 각 플랫폼의 디버거 도구를 통해 캐시를 갱신해주는 것이 안전합니다.
무료 · Open Graph 및 Twitter Card 메타태그 생성 & 실시간 SNS 카드 미리보기
자주 묻는 질문
og:image에 SVG 벡터 이미지를 넣어도 되나요?
권장하지 않습니다. 카카오톡, 페이스북, 트위터 등 주요 소셜 플랫폼의 스크랩 서버는 보안 취약점(XSS 등) 방지와 이미지 렌더링 엔진 한계로 인해 SVG 파일을 썸네일로 변환하지 못하고 빈칸으로 처리합니다. 반드시 JPG, PNG, 또는 WebP 래스터 이미지를 사용해야 합니다.
검색용 <meta name="description">과 og:description 문구를 다르게 써도 되나요?
네, 다르게 작성하는 것이 오히려 더 효과적입니다. 검색용 설명문은 구글 검색자가 클릭하도록 핵심 키워드와 정보 요약 위주로 작성하고, OG 설명문은 카카오톡 대화방에서 친구나 동료에게 전달될 때 흥미를 끄는 대화체나 행동 유도(Call to Action) 문구로 차별화할 수 있습니다.
Next.js App Router에서는 OG 메타태그를 어떻게 선언하나요?
Next.js 13+ App Router 환경에서는 각 page.tsx 또는 layout.tsx에서 export const metadata: Metadata = { openGraph: { ... } } 객체를 내보내거나, app/opengraph-image.tsx 파일을 통해 1200×630px 크기의 동적 이미지를 서버 사이드에서 자동 생성(ImageResponse)할 수 있습니다.
메타태그를 고쳤는데 카카오톡에 이전 이미지가 계속 나오는 이유는 무엇인가요?
카카오톡 스크랩 봇이 이미 해당 URL의 정보를 자체 서버 캐시에 저장해 두었기 때문입니다. 카카오 개발자 센터(Kakao Developers)의 [도구] → [카카오톡 공유 초기화] 메뉴에 URL을 입력하고 '초기화'를 실행하면 캐시가 삭제되고 최신 이미지가 즉시 적용됩니다.
본 가이드에서 설명하는 Open Graph 및 Twitter Cards 규격은 ogp.me 공식 표준 및 각 소셜 플랫폼의 공식 개발자 가이드를 정리한 것으로, 각 메신저 앱의 버전 업데이트나 자체 렌더링 정책에 따라 세부 노출 형태가 달라질 수 있습니다.