공들여 만든 사이트 주소를 카카오톡 단체방에 올렸는데, 썸네일도 제목도 없이 파란 글씨 링크 하나만 덩그러니 뜬 경험이 있을 것이다. 같은 링크를 옆 가게가 올리면 큼지막한 사진에 가게 이름과 한 줄 소개까지 깔끔하게 붙어 나온다. 이 차이를 만드는 것은 디자인 실력이 아니라 페이지에 숨어 있는 Open Graph(OG) 태그 몇 줄이다. 고객이 링크를 클릭할지 말지는 이 미리보기 한 칸에서 절반쯤 결정된다.
링크 미리보기를 살리는 5가지 원칙
1. 제목과 설명을 페이지마다 따로 넣는다
가장 흔한 실수는 모든 페이지에 홈페이지 제목 하나가 그대로 복사되는 것이다. 제품 페이지를 공유해도 회사 이름만 뜨면 고객은 무엇을 보러 가는지 알 수 없다. og:title과 og:description은 페이지마다 그 화면의 내용을 담아 따로 지정해야 한다. 미리보기는 작은 광고판이라고 생각하면 된다.
2. 대표 이미지는 규격을 지킨다
미리보기 사진이 깨지는 가장 큰 원인은 og:image의 규격을 안 맞춘 탓이다. 권장 크기는 가로 1200, 세로 630 픽셀이고, 용량은 가급적 1MB 이하로 줄인다. 무엇보다 이미지 주소는 https://로 시작하는 절대경로여야 한다. 상대경로로 적으면 외부 앱이 사진을 찾지 못해 회색 네모가 뜬다.
3. 카카오톡은 한 번 저장한 미리보기를 기억한다
태그를 고쳤는데도 옛날 미리보기가 계속 뜬다면 캐시 때문이다. 카카오톡을 비롯한 대부분의 플랫폼은 링크를 처음 읽은 결과를 한동안 저장해 둔다. 카카오는 카카오 디벨로퍼스의 캐시 초기화 도구로, 페이스북 계열은 공유 디버거로 새 정보를 다시 읽게 할 수 있다. 수정 후에는 반드시 캐시를 비우고 확인한다.
4. 글자 길이를 미리보기 칸에 맞춘다
제목이 너무 길면 미리보기에서 뒷부분이 잘려 핵심 메시지가 사라진다. 한글 기준으로 제목은 30자 안팎, 설명은 80자 안팎이 안전하다. 가장 하고 싶은 말을 앞쪽에 배치하고, 잘려도 의미가 통하도록 문장을 짧게 끊는 편이 좋다.
5. 주소와 트위터 카드까지 갖춘다
같은 페이지가 여러 주소로 열리면 미리보기가 제각각 잡힐 수 있으니 og:url에 대표 주소 하나를 고정한다. 또한 일부 플랫폼은 별도의 twitter:card 태그를 참고하므로, OG 태그와 함께 넣어 두면 어디에 공유하든 빈 화면 없이 안정적으로 미리보기가 뜬다.
링크 미리보기는 광고비 한 푼 들이지 않고도 클릭률을 끌어올리는 가장 값싼 장치다. 그러나 직접 HTML을 손대기 부담스럽거나, 페이지마다 태그를 관리할 엄두가 나지 않는다면 처음부터 구조를 잡아 주는 편이 안전하다. CYAN은 작은 회사의 사이트를 만들 때 페이지별 OG 태그와 대표 이미지까지 기본으로 세팅해, 어디에 공유하든 제대로 보이는 사이트를 함께 만든다.