메타태그로 페이스북/카카오톡 링크 공유시 미리보기 썸네일 이미지 변경하기

회사의 웹 사이트가 자체 서비스 인 경우 마케팅 등의 사유로

고객 혹은 자신이 페이스북이나 카카오톡으로 링크를 공유하는 일이 종종 있을 겁니다!

우리가 주로 보고 있는 "카카오톡 공유하기" 버튼은 카카오톡의 개발 API를 사용하여 개발을 해야 하는건데요!

이런 자체 커스텀 공유 기능 말고, 페북이나 카카오톡에 "http://~~~" 같은 URL을 적어서 전송하게 되면 미리보기 썸네일이 나오곤 하죠!

지금 바로 아무 사이트나 페이스북 담벼락에 URL을 적어보세요! 미리보기 이미지가 뜰겁니다.

카카오톡도 마찬가지로 아무 사이트 URL을 넣어보시면 미리보기 이미지가 뜹니다.

하지만 이게 원하는 이미지가 아니라 사이트의 로고나 주요 이미지가 하나 정해져서 뜨게 됩니다.

이 미리보기 썸네일 이미지를 변경하고 싶을 경우에 어떻게 할까요?

생각보다 매우 간단합니다.

사이트의 메타태그를 변경하면 됩니다.

저희 사이트의 메타 소스를 그대로 보여드릴게요~

<title>트라이문(TRYMOON) 스마트한 여자들의 딱 맞는 구두쇼핑 </title>
<meta property="og:url" content="http://trymoon.kr">
<meta property="og:title" content="트라이문(TRYMOON)">
<meta property="og:type" content="website">
<meta property="og:image" content="http://www.trymoon.kr/images/link_share_img.png">
<meta property="og:description" content="스마트한 여자들의 딱 맞는 구두쇼핑">

head 태그 안에 위와 같은 메타태그를 채워주시면 되요!

이렇게 og meta tag 만 작성하면 대표이미지가 추출 되어 링크 공유시에 보이게 됩니다.

경험상 1~2분 안에 바로 적용되는 경우도 있고 하루가 걸렸던 적도 있습니다!

하지만 이미 서비스 중인 사이트의 경우 위와 같이 작성했는데 카카오톡에선 썸네일 이미지가 잘 나오나 페이스북에서는 이전에 뜨던 미리보기 이미지가 나오는 경우가 있습니다.

페이스북은 한번 가져온 메타 데이터를 자체 서버에 캐시를 해놓습니다.

그래서 이 캐시를 Fetch 해줘야 적용이 됩니다.

https://developers.facebook.com/tools/debug/og/object/

위의 페북 개발자 사이트로 가서 

상단에 바로 보이는 URL에 사이트 URL을 입력하고 

바로 옆에 "Fetch new scrape information" 버튼을 클릭하면 패치가 완료 됩니다.

바로 적용이 안된 경우 1~2분만 기다렸다가 다시시도 해보세요~

모두들 같이 직장이든 사업이든 번창하시길~!