코드공부방

카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data) 본문

웹퍼블리셔/HTML

카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data)

:- ) 2020. 2. 13. 06:32
반응형

카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data)

카카오톡을 통해 지인들에게 특정 이벤트나 정보같은 것을 공유하기 위하여 URL링크를 공유한 경험이 한번쯤은 있을 것이다. (난 아주 적극적으로 공유기능을 사용하는 편이다.)

 

카카오톡 링크 전달

나는 URL만 전달 해줬는데 카카오톡 메세지에 자동으로 해당 페이지의 정보가 이어서 전달된다. 썸네일이미지, 제목, 내용 일부 미리보기가 지원된다. 이게 어떻게 가능한걸까? 

이는 http://~ 형태의 URL 메세지가 전달된 경우 카카오톡에서 웹페이지 링크라는 것을 판단하고 미리 해당 웹페이지의 head 태그 내에서 og(Open Graph) meta 정보를 찾고 그 중 "og:title(제목), og:description(내용), og:image(썸네일)"의 정보를 가져와 카카오톡 메시지창에 띄어주는 것이다. 실제 위 이미지처럼 kakaocorp.com 페이지의 소스를 보면 head태그 안에 아래와 같이 meta tag가 존재한다.

 

kakaocorp.com의 meta 정보

그럼 내가 웹페이지를 만들고 제공하는 입장에서 본다면 페이지 내 head 태그 안에 meta 정보를 넣어주면 될 것이다. 아래는 작성 예시이다.

<!-- HTML -->
<head>
    <meta property="og:url" content="https://code-study.tistory.com/">
    <meta property="og:title" content="코드공부방">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://code-study.tistory.com/images/img_share.png">
    <meta property="og:description" content="공유기능 | 열심히 코드를 공부합시다.">
    <title>코드공부방</title>
    <!-- 이하 생략 -->
</head>

2020년 2월 18일 추가 코멘트 : 소스 반영 후 빠르면 1시간 늦으면 24시간까지 적용 시간이 걸린다. 이는 카카오 서버에 페이지의 정보가 캐싱되는데 걸리는 시간이라고 한다.

 

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator)

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator) 요즘에는 이미지맵(image map)은 잘 쓰이지 않는다. 이미지를 큼지막하게 잘라서(여백포함하여) 웹페이지를 만들던 때엔..

code-study.tistory.com

 

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기 (YouTube videos in responsive size) 웹페이지 또는 개인 블로그 내에 Youtube영상을 삽입해야하는 경우가 있다. Youtube에서는 자체적으로 동영상..

code-study.tistory.com

 

구글 로그인 인풋박스(Google Login Inputbox) UI Clone

구글 로그인 인풋박스(Google Login Inputbox) UI Clone 오래전부터 구글의 로그인폼을 보면 쌈박하다는 생각이 들었다. 요즘은 꽤 대중화된(?) 방식이지만 자칫 딱딱해보일 수 있는 form label에 저런 인터랙션을..

code-study.tistory.com

반응형

'웹퍼블리셔 > HTML' 카테고리의 다른 글

HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙  (0) 2019.09.05
HTML 구글 스타일가이드 자세히보기 #intro  (0) 2019.09.02
'웹퍼블리셔/HTML' Related Articles more
Comments