카톡 링크 미리보기가 안 뜰 때

우리 홈페이지 주소를 단톡방에 보냈는데 밋밋한 글자만 뜬 적 있으실 겁니다. 남의 링크는 그림도 뜨고 제목도 예쁘게 뜨는데 내 것만 주소만 덩그러니 있습니다. 그게 왜 그런지, 그리고 어떻게 고쳤는지 적습니다.

미리보기는 페이지가 알려주는 것입니다

카카오톡이 링크를 예쁘게 보여주는 건 카카오톡이 똑똑해서가 아닙니다. 그 페이지가 "나는 이렇게 보여줘" 라고 미리 적어둔 것을 읽어오는 것입니다.

그 적어두는 자리를 og 태그라고 부릅니다. 페이지 맨 위 안 보이는 곳에 이런 줄들이 들어 있습니다.

og:title        제목
og:description  한 줄 설명
og:image        보여줄 그림 주소

이 줄이 없으면 카카오톡은 보여줄 게 없어서 주소만 띄웁니다. 링크가 잘못된 게 아니라 페이지가 아무 말도 안 해준 겁니다.

카카오톡만 그런 게 아닙니다. 링크드인도, 페이스북도, 슬랙도 같은 줄을 읽습니다. 한 번 넣으면 전부 다 됩니다.

제목과 설명은 글마다 이미 갖고 있으니 그대로 쓰면 됩니다. 문제는 그림입니다.

글 하나 쓸 때마다 포토샵을 열어 1200x630 카드를 만들 수는 없습니다. 저는 그러다 안 만들게 될 것을 알았습니다.

방법은 생각보다 단순합니다.

1  제목이 박힌 HTML 카드 한 장을 만든다
2  이미 깔려 있는 크롬을 화면 없이 띄운다
3  그 카드를 1200x630 으로 캡처해서 PNG 로 저장한다
4  글 페이지의 og:image 가 그 파일을 가리키게 한다

새로 설치한 게 없습니다. 이미지 편집 라이브러리를 깔면 폰트 문제로 한글이 깨지거나, 배포 서버에 그 라이브러리를 또 깔아야 합니다. 크롬은 이미 이 PC 에 있고 한글도 이미 잘 그립니다.

한 번 만들어 두면 글을 새로 쓸 때마다 카드가 저절로 하나 생깁니다. 이미 만든 카드는 다시 그리지 않아서 글이 백 개가 돼도 새 글 하나만 그립니다.

넣고 나면 확인해야 합니다. 안 되는 걸 모르고 지나가는 게 제일 흔한 실수입니다.

카카오톡은 한 번 읽은 미리보기를 기억합니다. 그래서 태그를 고쳐도 예전 모습이 계속 뜹니다. 카카오 개발자 사이트의 디버거에 주소를 넣으면 지금 태그를 다시 읽어 갑니다. 페이스북과 링크드인에도 같은 도구가 있습니다.

급하면 이렇게 하셔도 됩니다. 주소 뒤에 ?1 을 붙여서 보내보세요. 카카오톡이 다른 주소로 보고 새로 읽어옵니다.

솔직히 말하면 이건 검색 순위와 상관없습니다. 구글이 og 태그를 순위에 쓰지 않습니다.

그런데 사장님들이 링크를 보내는 자리는 대부분 검색이 아니라 단톡방입니다. 거래처에 견적서 링크를 보내고, 단톡방에 우리 소개 페이지를 올리고, 명함 대신 주소를 찍어 보냅니다.

그 자리에서 주소만 덩그러니 뜨는 것과 제목과 그림이 뜨는 것은 같은 회사로 안 보입니다. 저는 이게 검색 노출보다 먼저 오는 문제라고 생각합니다. 검색으로 오는 사람은 아직 없어도, 단톡방에 링크를 보내는 일은 오늘도 있으니까요.

우리 홈페이지 주소를 나에게 보내기로 한 번 보내보시면 됩니다. 그림과 제목이 뜨면 이미 되어 있는 것이고, 주소만 뜨면 og 태그가 없는 것입니다.

Wix 나 아임웹 같은 서비스를 쓰신다면 대개 설정 어딘가에 공유 이미지 항목이 있습니다. 거기에 하나만 넣어도 아무것도 없는 것보다는 낫습니다. 저는 그 서비스들에서 나오면서 이 부분을 직접 만들었습니다.