단골에게 가게 새 메뉴 링크를 카카오톡으로 보냈습니다. 그런데 상대 화면에는 먹음직스러운 사진도, 가게 이름도 없이 파란 주소 한 줄만 덩그러니 떴습니다. 누가 봐도 눌러보고 싶지 않은 모양새죠. 반대로 큰 브랜드의 링크는 제목과 설명, 큼직한 대표 이미지가 카드처럼 깔끔하게 뜹니다. 이 차이를 만드는 것이 바로 오픈그래프(Open Graph) 태그입니다. 손님이 직접 보는 화면이 아니라 카카오톡·페이스북·인스타·슬랙 같은 앱이 링크를 읽을 때 참고하는 '뒤편의 설명서'예요. 작은 회사가 이 미리보기를 제대로 갖추는 5가지 원칙을 정리했습니다.
1. 미리보기는 디자인이 아니라 '태그'로 정해진다
공유 카드에 뜨는 제목·설명·사진은 그 페이지에 무엇이 그려져 있는지와 무관합니다. 오직 페이지 머리(head)에 숨겨둔 og:title, og:description, og:image 세 줄이 결정합니다. 이 태그가 없으면 앱은 페이지에서 아무 글자나 긁어오거나, 아예 주소만 보여줍니다. 즉 미리보기가 엉망인 건 디자인 탓이 아니라 설명서를 안 써둔 탓입니다.
2. 대표 이미지(og:image)는 1200×630으로 따로 만든다
가장 눈에 띄는 건 결국 사진입니다. 권장 규격은 가로 1200 × 세로 630 픽셀이에요. 페이지 안의 아무 이미지를 끌어다 쓰면 세로로 길쭉하게 잘리거나 글씨가 안 보이게 찌그러집니다. 공유 카드 전용으로 로고와 한 줄 카피를 넣은 이미지를 따로 만들어 두는 편이 훨씬 깔끔합니다. 파일 주소는 반드시 https로 시작하는 전체 주소로 적어야 앱이 불러옵니다.
3. 페이지마다 다른 제목과 설명을 넣는다
많은 사이트가 모든 페이지에 회사 이름 하나만 똑같이 박아둡니다. 그러면 메뉴 페이지를 공유하든 예약 페이지를 공유하든 똑같은 카드가 떠서 손님이 무엇을 누르는지 알 수 없죠. 페이지 성격에 맞는 제목과 설명을 각각 넣으세요. 'OOO식당 — 점심 한정 메뉴', 'OOO식당 — 모바일 예약' 처럼요. 클릭률이 눈에 띄게 달라집니다.
4. 카카오톡까지 노린다면 한국형 태그를 함께 챙긴다
오픈그래프는 국제 표준이라 카카오톡도 기본적으로 읽습니다. 다만 국내에서는 검색 노출을 위해 네이버가 보는 태그를 함께 넣어두면 좋습니다. 핵심은 제목·설명·이미지 한 벌을 표준에 맞게 정확히 채워두는 것. 그러면 카카오톡, 인스타 DM, 네이버 블로그 어디에 붙여도 일관된 카드가 뜹니다.
5. 올린 뒤엔 '디버거'로 실제 카드를 확인한다
태그를 넣었다고 끝이 아닙니다. 앱들은 한 번 읽은 미리보기를 저장(캐시)해 두기 때문에, 수정해도 한동안 옛날 카드가 계속 뜹니다. 페이스북의 공유 디버거나 카카오 개발자 도구 같은 무료 점검 도구에 주소를 넣으면 실제로 어떤 카드가 뜨는지 미리 보고, 캐시도 새로고침할 수 있습니다. 발행 전 딱 한 번의 확인이 어색한 첫인상을 막아줍니다.
작은 차이가 클릭을 가른다
오픈그래프는 손님 눈에 직접 보이지 않지만, 링크가 공유되는 순간 회사의 첫인상을 대신 말해줍니다. 사진 한 장과 문구 한 줄이 빠졌을 뿐인데 같은 페이지가 광고처럼 보이기도, 스팸처럼 보이기도 하죠. CYAN은 작은 회사 웹사이트를 만들 때 공유 카드까지 기본으로 설계합니다. 카카오톡에 붙였을 때 부끄럽지 않은 링크, 그 사소해 보이는 마무리가 결국 한 번의 클릭을 더 만든다고 믿기 때문입니다.