시리즈 알려드려요, 깨알정보

카카오톡 링크 공유시 썸네일 지정하는 방법

안녕하세요. 소이정입니다.

소이정에서는 웹페이지 전반에 모든 과정들을 작업하고 있는데요!
(이 외에도 웹진 제작, 로고 제작 등등도 진행하고 있답니다!)

웹 디자인과 더불어 웹 기획, 웹 개발, 웹 퍼블리싱까지 모두 모두 가능합니다.

그래서 앞으로는 블로그에서 디자인, 기획, 개발 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>

짜잔~!!
지금까지 잘 따라오셨다면 변경이 잘 될 겁니다.

엥? 왜 아직 기존 거랑 썸네일 이미지가 같죠?

위의 태그를 삽입했는데도 기존의 사이트 정보가 남아있다면
카카오톡 대화창에 변경한 썸네일 이미지가 바로 노출되지 않을 수 있어요!

이는 카카오 링크 공유시 캐시가 아직 남아있어
예전 이미지로 보이는 경우도 종종 있는데요.

그럴 때는, 아래의 방법을 참고해주세요~