카카오톡 링크 공유시 썸네일 지정하는 방법
안녕하세요. 소이정입니다.
소이정에서는 웹페이지 전반에 모든 과정들을 작업하고 있는데요!
(이 외에도 웹진 제작, 로고 제작 등등도 진행하고 있답니다!)
웹 디자인과 더불어 웹 기획, 웹 개발, 웹 퍼블리싱까지 모두 모두 가능합니다.
그래서 앞으로는 블로그에서 디자인, 기획, 개발 tip관련 외에도
다양한 꿀팁들을 전수해드릴 생각입니다!!
오늘은 바로 바로~~~~~~
카카오톡 링크 공유시 썸네일 지정하는 방법입니다.
카카오톡을 사용하는 분이라면 한 번 쯤은 url을 전송해 보신 적 있으실 거예요.
카카오톡으로 사이트 url을 공유하게 되면 url과 함께 해당 사이트의 정보를 담은 썸네일 이미지가 노출되는데요~
이 때 노출되는 썸네일 이미지를 자신이 원하는 이미지로 바꾸고 싶을 때는 어떻게 해야 하는 지
여러분은 알고 계신가요?!
그 해답은 바로 메타 태그라고 하는 태그를 사용하면 되는데요.
이런 역할을 하는 메타 태그를 이용하면 사이트에 대한 설명과 이미지 변경이 가능하답니다!
.
.
혹시 이런 표정을 짓고 계셨다면,
이게 뭐람..이라고 나도 모르게 중얼거리셨다면!!
아래 내용을 꼼꼼히 읽어주세요
먼저 썸네일로 사용할 이미지를 준비해주세요
그리고 아래의 메타 태그를 이용하여 사이트에 대한 설명과 이미지를 변경해주시면 되는데요.
아래 예시에서 노란색으로 줄 친 부분이 바로 썸네일 이미지를 변경할 수 있는 부분이에요.
[카카오톡 썸네일 노출 메타태그]
<meta property="og:url" content="사이트url">
<meta property="og:title" content="제목">
<meta property="og:image" content="썸네일 이미지경로">
<meta property="og:description" content="사이트 설명">
[태그 적용 예시]
<meta property="og:url" content="//soijeong.com/?p=1">
<meta property="og:title" content="소이정 - 디지털&디자인 에이젼시">
<meta property="og:image" content="//soijeong.com/ogimage.jpg">
<meta property="og:description" content="홈페이지제작, 홈페이지개발, 반응형제작, 웹개발, 웹사이트개발, 모바일앱, 시스템개발, 브랜딩, 편집디자인, 마케팅 서비스 제공 종합에이전시">
그럼 위의 메타 태그를 어디에 넣으면 될까요?
홈페이지는 크게 html 태그 안에 head와 body태그로 나뉘어 아래와 같은 형태로 이루어져 있는데요.
<head>와 </head> 사이에 메타 태그를 넣어주시면 끝!
이지만 적용 위치 한 번 함께 보시죠 :)
[홈페이지 메타 태그 적용위치]
<!DOCTYPE html>
<html>
<head>
메타태그 삽입할 부분
</head>
<body>
홈페이지 내용
</body>
</html>
보통 head 태그는 홈페이지의 상단영역에 해당하는 부분을 따로 분리하여 주로
header.php (혹은 header.jsp) 라는 파일에 삽입되어 있어요.
수정하려는 사이트의 헤더(header.php)에 해당되는 파일을 찾아 아래와 같이 넣어주세요!!
<!DOCTYPE html>
<html>
<head>
<meta property="og:url" content="//soijeong.com/?p=1">
<meta property="og:title" content="소이정 - 디지털&디자인 에이젼시">
<meta property="og:image" content="//soijeong.com/ogimage.jpg">
<meta property="og:description" content="홈페이지제작, 홈페이지개발, 반응형제작, 웹개발, 웹사이트개발, 모바일앱, 시스템개발, 브랜딩, 편집디자인, 마케팅 서비스 제공 종합에이전시">
</head>
<body>
홈페이지 내용
</body>
짜잔~!!
지금까지 잘 따라오셨다면 변경이 잘 될 겁니다.
엥? 왜 아직 기존 거랑 썸네일 이미지가 같죠?
위의 태그를 삽입했는데도 기존의 사이트 정보가 남아있다면
카카오톡 대화창에 변경한 썸네일 이미지가 바로 노출되지 않을 수 있어요!
이는 카카오 링크 공유시 캐시가 아직 남아있어
예전 이미지로 보이는 경우도 종종 있는데요.
그럴 때는, 아래의 방법을 참고해주세요~
카카오톡 썸네일 이미지 초기화 하는 방법
1. 카카오 디벨로퍼에 접속 후 로그인
-> https://developers.kakao.com/ <
* 이 때 기존에 사용하던 카카오 계정으로 로그인 후 약관동의하면 가입이 가능합니다.
2. 오른쪽 상단에 있는 도구 > 디버거도구 클릭
3. 공유 디버거에 URL입력 > 디버그 > 캐시초기화 클릭
위 과정을 끝마치면 '1개의 스크랩 정보가 삭제되었습니다.' 라는 문구가 나오는데요.
이 때 위의 링크가 공유 된 적이 있다면 위의 문구가, 공유 된 적이 없다면 없다고 나타날 겁니다!
이런 방법으로 캐시를 삭제하면 카카오톡 썸네일 바꾸기 완성! 이랍니다~
썸네일바꾸기부터 캐시비우고 확인하는 방법까지 소개해드렸는데요
다들 ,, 어떠셨나요?
복잡복잡하지만 글을 따라오니 잘 되셨나요!?
도움이 되셨길 바라며,
다음에 또 다른 팁으로 찾아오겠습니다~
감사합니다!
©SOIJEONG