가게 소식을 알리려 단골 단체 카톡방에 홈페이지 주소를 붙여 넣습니다. 그런데 화면에 뜨는 건 파란 글씨의 긴 주소 한 줄뿐입니다. 옆 가게 링크는 사진과 상호, 한 줄 소개가 담긴 반듯한 카드로 뜨는데 말이죠. 손님은 그 차이만으로 어느 쪽을 눌러볼지 이미 마음을 정합니다. 이 미리보기 카드를 만드는 것이 바로 OG 태그(Open Graph)입니다. 페이지 안에 몇 줄만 넣으면 카톡·페이스북·슬랙 어디에 붙여도 같은 카드가 뜹니다.
원칙 1. 공유될 제목과 설명을 직접 정한다
OG 태그가 없으면 카톡은 페이지에서 아무 글자나 긁어와 제목을 만듭니다. 엉뚱한 메뉴 이름이나 빈 줄이 뜨는 이유죠. og:title에는 상호와 핵심 소개를, og:description에는 한두 문장 요약을 직접 적어 손님이 볼 첫 문장을 내 손으로 정합니다.
원칙 2. 미리보기 이미지는 1200×630으로 준비한다
카드에서 가장 눈에 띄는 건 사진입니다. og:image에 넣을 이미지는 가로 1200 × 세로 630 픽셀이 표준이고, 주소는 반드시 https로 시작하는 전체 경로여야 합니다. 로고만 덩그러니 넣기보다 대표 제품이나 매장 사진에 상호를 얹으면 클릭을 부릅니다.
원칙 3. 카카오톡은 캐시를 따로 비워야 한다
태그를 고쳐도 카톡에 예전 미리보기가 계속 뜨는 경우가 많습니다. 카카오가 한 번 읽은 정보를 오래 저장(캐시)하기 때문입니다. 카카오 디벨로퍼스의 캐시 초기화 도구에 주소를 넣어 다시 읽게 해야 바뀐 카드가 반영됩니다.
원칙 4. 페이지마다 다른 태그를 넣는다
홈, 소개, 상품 페이지가 모두 같은 미리보기로 뜨면 손님은 어디를 눌러도 같은 곳인 줄 압니다. 페이지별로 og:title·og:image를 달리 지정해, 공유한 링크가 정확히 그 페이지를 보여주도록 합니다. 네이버·트위터용으로 트위터 카드 태그를 함께 넣으면 더 안전합니다.
원칙 5. 발행 뒤 반드시 눈으로 확인한다
태그는 넣었다고 끝이 아니라 실제로 어떻게 뜨는지 봐야 합니다. 페이스북 공유 디버거나 카카오 도구로 미리보기를 확인하고, 실제 카톡방에 한 번 붙여 넣어 눈으로 검수하세요. 이미지 깨짐, 글자 잘림은 이때 대부분 잡힙니다.
공유 미리보기는 손님이 홈페이지에 닿기도 전에 마주하는 '0번째 첫인상'입니다. 몇 줄의 태그가 클릭률을 가릅니다.
OG 태그는 코드 몇 줄이지만, 페이지별 설계와 이미지 규격, 캐시 관리까지 챙기면 손이 제법 갑니다. CYAN 에이전시는 작은 회사 웹사이트를 만들 때 페이지마다 공유 미리보기가 반듯하게 뜨도록 OG 설정을 기본으로 잡아 드립니다. 링크 하나가 손님을 데려오도록, 첫인상부터 함께 손봐 드리겠습니다.
