사장님이 단골 손님에게 홈페이지 주소를 카톡으로 보냅니다. 그런데 상대 화면에 뜨는 건 매끈한 미리보기 카드가 아니라 제목도 없고 이미지 자리엔 회색 깨진 상자 하나가 박힌 밋밋한 링크입니다. 손님은 무의식적으로 '이거 눌러도 되나' 잠시 망설입니다. 링크 하나 보내는 그 순간에도 첫인상은 이미 결정되고 있습니다.
이 미리보기 카드를 만드는 것이 바로 오픈그래프(Open Graph)라는 약속입니다. 홈페이지 코드 안 <head> 영역에 몇 줄의 메타 태그를 심어 두면, 카톡·페이스북·인스타·문자·슬랙 어디에 링크를 붙여도 우리가 정해 둔 제목·설명·이미지가 카드로 뜹니다. 심어 두지 않으면 각 앱이 알아서 아무 글자나 긁어 오거나, 아예 빈 카드를 띄웁니다. 작은 회사가 챙겨야 할 5가지 원칙을 정리합니다.
1. 페이지마다 '제목'과 '설명'을 손으로 정해 둔다
오픈그래프의 핵심은 세 가지입니다. og:title(카드 제목), og:description(한두 줄 설명), og:image(썸네일). 이걸 비워 두면 앱이 페이지 맨 위 글자를 아무렇게나 긁어 와 '메뉴 로그인 장바구니' 같은 엉뚱한 조각을 제목으로 띄웁니다.
- 제목은 가게 이름 + 무엇을 하는 곳인지가 한눈에 들어오게. 예: '담양 채상 공방 댓결 — 대나무로 짜는 오색 채상'
- 설명은 손님이 눌러야 할 이유를 한 문장으로. 브랜드 슬로건보다 '무엇을 파는지'가 먼저입니다.
2. 썸네일 이미지는 '가로로 긴 직사각형' 한 장을 따로 만든다
가장 흔한 실수가 로고 파일(정사각형·투명 배경)을 그대로 og:image에 넣는 것입니다. 카드 이미지 영역은 가로로 긴 직사각형이라, 정사각형 로고는 양옆이 잘리거나 여백만 뜹니다. 권장 규격은 가로 1200 × 세로 630 픽셀입니다.
- 배경을 채운 전용 이미지 한 장을 만들어 둡니다. 로고 + 가게 이름 + 대표 사진이면 충분합니다.
- 이미지 주소는 반드시 https로 시작하는 전체 주소여야 합니다. '/img/og.jpg' 같은 상대 주소는 카톡이 못 읽습니다.
3. 카톡은 한 번 읽은 미리보기를 '기억'한다 — 캐시를 풀어 준다
태그를 고쳤는데 카톡 미리보기가 옛날 그대로인 경우가 많습니다. 카카오·페이스북은 한 번 읽은 미리보기를 일정 기간 저장(캐시)해 두기 때문입니다. 링크를 새로 보내도 저장된 옛 카드를 그대로 보여 줍니다.
- 카카오는 카카오톡 공유 디버거, 페이스북·인스타는 페이스북 공유 디버거(Sharing Debugger)에서 주소를 넣고 '다시 가져오기'를 누르면 최신 카드로 갱신됩니다.
- 이 도구는 지금 손님에게 실제로 어떤 카드가 뜨는지 미리 확인하는 용도로도 씁니다. 링크를 보내기 전에 반드시 한 번 돌려 봅니다.
4. 검색 결과의 파란 제목과는 '역할이 다르다'
meta title·description은 구글 검색 결과에 뜨는 글자이고, og 태그는 링크를 공유했을 때 뜨는 카드입니다. 서로 다른 자리에 쓰이므로 둘 다 채워야 합니다. 실무에서는 검색용 문구는 검색어를 의식해 담백하게, 공유용 og 문구는 클릭을 부르게 조금 더 감각적으로 나눠 씁니다.
5. '문의·이벤트' 같은 핵심 페이지는 카드도 따로 챙긴다
홈 화면 하나만 신경 쓰고 끝내기 쉽지만, 정작 손님에게 자주 보내는 건 이벤트 페이지·예약 페이지·특정 상품 페이지 링크입니다. 이 페이지들이 홈 화면과 똑같은 카드로 뜨면 '이 링크가 그 이벤트가 맞나' 헷갈립니다. 방문자가 많은 페이지는 제목·이미지를 페이지 성격에 맞게 따로 지정해 두는 것이 좋습니다.
작은 차이가 만드는 첫인상
오픈그래프는 눈에 잘 안 띄는 코드 몇 줄이지만, 손님이 링크를 처음 마주하는 0.5초의 인상을 좌우합니다. 잘 만든 카드 한 장은 그 자체로 손님이 대신 퍼 나르는 작은 간판이 됩니다.
CYAN은 홈페이지를 만들 때 페이지별 오픈그래프 태그와 전용 공유 이미지, 그리고 카톡·검색 미리보기 점검까지 기본 항목으로 챙깁니다. 지금 쓰는 홈페이지 주소를 카톡 나에게 한번 보내 보시고, 뜨는 카드가 영 낯설다면 편하게 문의 주세요.
