같은 링크를 보냈는데 누군가의 카카오톡에서는 큼직한 썸네일과 깔끔한 제목이 뜨고, 우리 사이트는 URL만 덩그러니 남는 경험, 다들 한 번쯤은 있을 겁니다. 이건 디자인 문제도 호스팅 문제도 아닙니다. 대부분의 경우 Open Graph(OG) 태그 설정의 문제입니다.
OG 태그는 페이스북이 만든 오래된 규격이지만, 지금은 카카오톡·슬랙·디스코드·X(트위터)·라인·인스타그램 메시지까지 전 세계 거의 모든 SNS가 이 규격을 그대로 읽어 공유 카드를 생성합니다. 즉 OG 태그 하나만 제대로 세팅하면 브랜드가 SNS에서 보여지는 인상의 90%를 바꿀 수 있다는 뜻입니다.
1. OG 태그가 정확히 하는 일
브라우저는 HTML을 렌더링하기 위해 HTML을 읽지만, SNS 크롤러는 조금 다릅니다. 크롤러는 페이지에 접속해 <head> 안에 있는 메타 태그만 긁어 가서 공유 카드를 만듭니다. 이때 읽는 핵심 필드가 아래 네 가지입니다.
- og:title — 공유 카드에 크게 표시되는 제목
- og:description — 제목 아래 회색 설명 글
- og:image — 썸네일 이미지. 공유 카드 면적의 80%를 차지
- og:url — 정규 URL. 리디렉션·쿼리스트링이 붙어도 정확한 주소로 수렴
이 네 개만 제대로 있어도 공유 카드는 살아납니다. 나머지는 부가 옵션에 가깝습니다.
2. 가장 흔한 실수 3가지
실수 1: 이미지 경로를 상대 경로로 적는 것
SNS 크롤러는 절대 경로만 읽습니다. /images/og.jpg는 무시되고, https://example.com/images/og.jpg만 인식됩니다. 혹시 HTTP로 시작하면 카카오톡이 이미지를 차단할 수도 있으니 반드시 https로 적어야 합니다.
실수 2: 이미지 크기를 잘못 맞추는 것
OG 이미지 권장 비율은 1200 × 630px(1.91:1)입니다. 카카오톡은 이 비율을 벗어나면 좌우를 잘라내거나 작은 정사각형 썸네일로 대체해 공유 카드 품질을 확 떨어뜨립니다. 용량은 5MB 이하, 포맷은 JPG 또는 PNG가 안전합니다. WebP는 아직 카카오톡에서 불안정합니다.
실수 3: 동적 페이지에 공통 태그만 넣는 것
블로그 글, 상품 페이지처럼 URL마다 내용이 다른데 OG 태그는 홈과 동일하게 찍혀 있는 경우가 많습니다. 이러면 어떤 글을 공유해도 같은 썸네일이 뜹니다. 페이지별로 og:title, og:description, og:image를 서버에서 동적으로 주입해야 진짜 SEO·SNS 효과가 나옵니다.
3. 실무에서 바로 쓰는 템플릿
아래는 Laravel·Next.js·Wordpress 어디에 붙여 넣어도 동작하는 기본 템플릿입니다.
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목(60자 이내)">
<meta property="og:description" content="한 문장 설명(150자 이내)">
<meta property="og:image" content="https://도메인/og/이미지.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://도메인/현재-페이지">
<meta property="og:site_name" content="브랜드명">
<meta property="og:locale" content="ko_KR">
X(트위터) 전용 카드를 잘 뽑고 싶다면 twitter:card, twitter:title, twitter:description, twitter:image도 함께 넣어 주는 게 정석입니다. X는 OG를 fallback으로 읽지만, 두 가지를 모두 넣을 때 썸네일 품질이 확실히 안정됩니다.
4. 한국 서비스 특화 — 카카오톡 캐시 초기화
가장 자주 나오는 문의가 이겁니다. "OG 태그를 고쳤는데도 카카오톡에서 예전 이미지가 나와요." 카카오톡은 URL별 썸네일을 자체 서버에 오래 캐싱합니다. 해결 방법은 두 가지입니다.
- 카카오 디벨로퍼스의 카카오톡 스크랩 캐시 초기화 도구를 사용해 해당 URL의 캐시를 강제로 비운다
- 그래도 안 되면 URL 끝에
?v=2같은 쿼리스트링을 붙여 카카오톡이 새 URL로 인식하게 한다
페이스북·슬랙도 동일한 캐시 정책을 씁니다. 페이스북은 "Sharing Debugger", 슬랙은 DM에 URL을 보내기 전 해당 링크를 다시 열어 보는 방식으로 캐시를 갱신할 수 있습니다.
5. OG 이미지 디자인 — 무엇을 넣을 것인가
OG 이미지는 "두 번째 썸네일"이 아니라 광고 배너에 가깝습니다. 모바일 카카오톡에서 이 이미지가 차지하는 시각 면적은 본문 텍스트보다 큽니다. 그래서 이렇게 설계하는 걸 추천합니다.
- 중앙 여백을 넉넉히 두되, 좌우 100px은 안전지대로 비워 두기(카카오톡 crop 대응)
- 텍스트는 핵심 메시지 한 문장만, 폰트 크기 60px 이상
- 배경은 브랜드 컬러, 로고는 우하단 작게 고정
- 상품 페이지는 실제 상품 사진, 콘텐츠 페이지는 일러스트·인물 사진이 CTR이 높음
정적인 홈 OG 이미지 한 장으로 끝내지 말고, 최소한 홈·블로그·상품 카테고리별로 3~5종을 만들어 두는 것이 장기적으로 전환율 차이를 만듭니다.
6. 검증 체크리스트
배포 전에 반드시 확인해야 할 항목입니다.
- 모든 페이지에 og:title, og:description, og:image, og:url이 들어가 있는가
- 이미지 경로가 https 절대 경로인가
- 이미지 비율이 1.91:1(1200×630)에 가까운가
- 카카오 캐시 초기화 후 실제 톡방에서 공유 테스트를 해 봤는가
- 동적 페이지에서 URL마다 OG가 다르게 출력되는가
이 다섯 가지를 통과하면 최소한 "썰렁한 공유 카드"는 나오지 않습니다.
마치며
OG 태그는 개발 공수로 보면 한나절 작업이지만, 브랜드가 SNS에서 남기는 첫인상을 완전히 바꾸는 레버리지가 큰 작업입니다. 특히 한국 시장은 카카오톡 공유 한 번의 체감 효과가 페이스북·X 합친 것보다 큰 경우가 많기 때문에, 소홀히 할 이유가 없습니다.
CYAN은 웹사이트를 제작할 때 모든 페이지에 페이지 맞춤형 OG 태그와 OG 이미지 세트를 기본으로 세팅합니다. 배포 전에 카카오톡·슬랙·X 세 군데에서 실제 공유 테스트를 거치기 때문에, 오픈 첫날부터 예쁜 공유 카드로 고객에게 링크를 뿌릴 수 있습니다. 기존 사이트의 공유 카드가 아쉽게 느껴진다면, 리뉴얼 없이 OG 태그 세팅만 따로 의뢰하셔도 괜찮습니다.