대가는 결과를 만든다

URL 공유시 미리보기 이미지&내용 : Open Graph 본문

개발/Web관련

URL 공유시 미리보기 이미지&내용 : Open Graph

yunzema 2019. 7. 17. 08:55
반응형

카카오톡이나, 페이스북 같은 SNS에 URL 공유 시 보이는 미리보기 이미지, 제목, 내용들은 어떻게 표시되는 것일까?

 

1. 원리

: 링크라는 것이 인식되면 크롤러가 해당 웹사이트의 HTML head 의 메타 데이터를 크롤링하여 미리보기 화면을 생성

 

2. 프로토콜

: 비교적 통일된 방법으로 페이스북의 open graph 프로토콜을 사용한다.

: 페이스북, 네이버 블로그, 카카오톡 등에서 사용하고 있는 프로토콜

: open graph 문서 - http://ogp.me/

: https://developers.facebook.com/tools/debug/sharing/ 에서 크롤링되는 정보 확인 가능 

 

참고 : https://brunch.co.kr/@jiyeonsongofnt/11

 

링크 붙여넣을 때 보이는 이미지는 어디서 오는 것일까?

들어가기 전에 이 글은 링크의 미리보기 제목, 설명, 이미지의 정체에 대해서 알고 싶은 마케터들을 위해 유용한 내용을 담고 있습니다. 오늘날 페이스북이나, 네이버 블로그, 카카오톡 등에서 어떤 링크에 대한 미리보기 제목, 설명, 이미지를 제공하고 있습니다. 링크를 붙여넣을 때 생기는 미리보기 제목, 설명, 이미지는 도대체 어디에서 오는 것일까요? H

brunch.co.kr

참고 : https://gocoder.tistory.com/315

 

HTML - og(open graph) 태그 란? / 카톡,sns 미리보기 지정

open graph 태그란? / 썸네일, 제목 설명 등의 안녕하세요. 고코더 입니다. SNS나 카카오톡,라인 등 일상을 공유하는 커뮤니티 프로그램에서 링크를 공유하면 자연스럽게 보이는 썸네일, 제목, 설명들이 있습니다...

gocoder.tistory.com

 

저작자표시 비영리 변경금지

'개발 > Web관련' 카테고리의 다른 글

[개념 정리] http content-type 관한 정리  (1) 2019.08.27
css 스크린 사이즈  (0) 2019.07.22
React, Vue Comparison 비교  (0) 2019.05.15
babel-polyfil  (0) 2019.04.15
JWT(JSON Web Token)  (0) 2019.03.25
'개발/Web관련' Related Articles more
Comments