- 링크 미리보기 제목, 설명, 이미지 결정하는 오픈 그래프 태그!
- 페이스북, 네이버, 카카오톡 등 어떤 링크에 대한 미리보기 제공 → 어떻게?! 오픈 그래프 프로토콜로!
- 사용자 클릭 전에 미리 해당 웹사이트를 크롤러가 방문, HTML head의 메타 데이터 크롤링하여 미리보기 화면 생성
- 주요 html meto 태그 : title, description, image
<html>
<head>
<meta property="og-title" content="뿌린만큼 거두리라 다운받기">
<meta property="og-description" content="뿌린만큼 거두리라 <br> 가장쉽고 (중략)">
<meta property="og-image" content="http://lh3.googleusercontent.com/-v-...">
</head>
</html>- 구체적 작동 원리
- 사용자가 링크를 입력창에 입력
- 페이스북, 네이버 블로그, 카카오톡 입력창의 문자열이 'link'임을 파악(보통 정규표현식으로 해당 문자열이 링크라는 것을 알아냄)
- 'link'라는 것이 파악되면 페이스북, 네이버 블로그, 카카오톡의 크롤러는 미리 그 웹 사이트를 방문해 HTML head의 오픈 그래프(Open Graph) 메타 데이터 긁어옴
- 이 중 og:title, og:description, og:image가 각각 제목, 설명 ,이미지 정보를 나타낸다.
- 그 정보를 바탕으로 미리보기 화면을 생성한다.
- but, 캐시 저장 부분이 있다면 정보를 변경하더라도 캐시로 저장된 부분으로 인해 변경전 정보가 나올 수 있다.
프론트엔드 엔지니어