사장님이 새로 만든 홈페이지 주소를 단골 손님에게 카카오톡으로 보냈다. 그런데 상대 화면에 뜬 것은 정성껏 찍은 매장 사진도, 가게 이름도 아니고 회색 네모 한 칸에 주소 글자만 덜렁 걸린 모습이다. 링크를 받은 손님은 이게 뭔가 싶어 누르지 않고 지나친다. 우리 눈에는 멀쩡한 사이트가, 남에게 전달되는 순간 '수상한 링크'가 되어 버린다.
이 미리보기를 만드는 것이 바로 오픈그래프(Open Graph, 줄여서 OG)다. 페이스북이 처음 만든 규칙인데 지금은 카카오톡·인스타그램·네이버 블로그·문자·슬랙까지 링크가 붙는 거의 모든 곳이 이 규칙을 읽어 썸네일과 제목을 그린다. 코드 몇 줄이지만, 손님이 링크를 클릭할지 말지를 좌우하는 첫 관문이다. 작은 회사가 꼭 챙겨야 할 5가지 원칙을 정리했다.
1. 페이지마다 OG 제목·설명·이미지 세 줄은 반드시 넣는다
미리보기의 뼈대는 세 가지다. og:title(제목), og:description(설명), og:image(썸네일 이미지). 이 세 줄이 비어 있으면 카카오톡은 주소만, 혹은 페이지 아무 데서나 긁어온 엉뚱한 문장을 대신 보여준다.
- og:title — 브라우저 탭에 뜨는 제목과 똑같이 두지 말고, 공유됐을 때 클릭하고 싶어지는 한 줄로 따로 쓴다. 예: '○○동 20년 전통, 당일 예약 가능한 미용실'
- og:description — 한두 문장으로 무엇을 파는 곳인지 명확히. 손님이 제목만으로 판단하지 못할 때 이 문장이 결정타가 된다.
- og:image — 뒤에서 따로 다룰 만큼 중요하다. 없으면 미리보기 절반이 비어 보인다.
2. 썸네일 이미지는 1200×630, 가로형으로 만든다
OG 이미지는 크기와 비율이 정해져 있다. 표준은 가로 1200 × 세로 630 픽셀(대략 1.91:1 가로형)이다. 이 비율을 벗어나면 카카오톡·페이스북이 제멋대로 잘라내, 정작 보여주고 싶은 로고나 얼굴이 화면 밖으로 밀려난다.
흔한 실수 두 가지를 피한다. 첫째, 정사각형이나 세로 사진을 그대로 쓰는 것 — 양옆이 잘리거나 위아래에 회색 여백이 생긴다. 둘째, 이미지 안에 글자를 빽빽하게 넣는 것 — 썸네일로 줄어들면 읽히지 않는다. 핵심 한 줄과 로고 정도만 크게 얹고, 나머지는 사진이나 색으로 채우는 편이 훨씬 낫다.
3. 이미지 주소는 반드시 '전체 주소'로, https로 적는다
OG 이미지가 분명히 있는데도 미리보기가 깨진다면, 열에 아홉은 이미지 경로를 줄여 쓴 탓이다. /images/og.png 처럼 상대경로로 적으면 카카오톡 서버는 그 이미지가 어디 있는지 찾지 못한다.
반드시 https://로 시작하는 전체 주소를 넣어야 한다. 예: https://우리도메인.com/images/og.png. 또한 사이트가 https가 아니면 일부 앱은 아예 이미지를 무시하므로, 보안 인증서(SSL) 적용은 기본 전제다. 이미지 용량도 너무 크면(수 MB) 로딩이 느려 미리보기가 안 뜰 수 있으니 300KB 안팎으로 압축해 둔다.
4. 페이지마다 다른 미리보기를 보여준다
홈·소개·상품·블로그 글이 전부 똑같은 미리보기로 공유되면, 어떤 페이지를 보내도 손님은 '메인 화면'만 받는 셈이다. 특정 상품 페이지를 보냈는데 회사 대문 사진이 뜨면 클릭할 이유가 줄어든다.
제품이 몇 개 안 되는 곳이라면 페이지별로 og:title·og:image를 손으로 다르게 넣으면 되고, 블로그나 상품이 계속 늘어나는 곳이라면 글 제목과 대표 이미지가 자동으로 OG 태그에 들어가도록 시스템을 짜 두는 것이 맞다. 여기서 직접 만든 홈페이지 빌더와 제대로 설계된 사이트의 차이가 크게 벌어진다.
5. 배포 전에 '미리보기 검사기'로 반드시 눈으로 확인한다
OG는 캐시(저장해 둔 기록) 때문에 함정이 있다. 카카오톡·페이스북은 한 번 읽은 미리보기를 한동안 저장해 두기 때문에, 이미지를 바꿔도 예전 것이 계속 뜬다. 그래서 '분명 고쳤는데 안 바뀐다'는 하소연이 나온다.
배포 전후로 아래 도구에서 직접 확인하고, 필요하면 캐시를 새로고침한다.
- 카카오톡 공유 디버거 — 국내 손님 대부분이 카톡으로 링크를 받으므로 여기서 반드시 점검한다.
- 페이스북 공유 디버거(Sharing Debugger) — 캐시를 강제로 다시 읽게 만드는 버튼이 있어 이미지 교체 후 유용하다.
- 실제 테스트 — 내 폰에서 나에게 링크를 한 번 보내 보는 것이 가장 확실하다.
결국, 링크가 손님에게 닿는 그 3초를 설계하는 일
오픈그래프는 화면에 보이지 않는 코드 몇 줄이라 자주 잊힌다. 하지만 우리 홈페이지가 손님에게 '전달되는' 거의 모든 순간 — 카톡으로, 문자로, 블로그 댓글로 — 손님이 처음 마주하는 얼굴이 바로 이 미리보기다. 회색 네모냐, 잘 찍은 매장 사진에 또렷한 한 줄이냐가 클릭을 가른다.
CYAN 에이전시는 사이트를 만들 때 페이지마다 OG 태그와 전용 썸네일을 기본으로 설계하고, 블로그·상품이 늘어나도 미리보기가 자동으로 맞게 들어가도록 잡아 둔다. 홈페이지 링크를 보냈을 때 손님 화면에 무엇이 뜨는지 한 번도 확인해 본 적이 없다면, 지금 바로 내 폰으로 내게 링크를 보내 보시길 권한다. 거기서부터 고칠 것이 보인다.
