Open Graph

Open Graph

• Open Graph?
• Open Graph는 요즘 페이스북이나 카카오톡에서 Url을 입력했을시, 해당 Url에 대한 정보를 간략하게 보여주게 해주는 것
• 이러한 간략한 정보는 특정 규약에 따라 정보를 받아오는데, 그 규약이 Open Graph Protocol
• Open Graph Protocol?
• Facebook에서 만들어낸것으로 알려진 Protocol
• Open Graph를 사용하는쪽에서나 웹페이지를 개발하는 사람들이 어떤 정보를 Open Graph를 통해 어떻게 데이터를 넘길지 정해진 규칙
• Html - Header - Meta 태그 안에 “og:title”, “og:description”, “og:image”와 같은 방식으로 표현함
• Open Graph 데이터를 받아오는 Tag
• og:title - 해당 사이트의 오픈그래프 제목
• og:description - 해당 사이트의 오픈그래프의 설명
• og:image - 해당 사이트의 오픈그래프의 이미지
• Open Graph를 위한 Server side Rendering
• 지원해야 하는 것은 특정 요청에서만 Open Graph를 지원하기로 했습니다.
• 특정 request에 header에는 “bot”이라는 속성을 넣어주기로 정해졌습니다.
• 이 “bot”에 속도를 위해서, 페이지를 다 넘겨주는 방식보다 서버사이드 랜더링을 구현합니다.
• 현재 Nginx를 사용하고 있는데, request중에서 “bot”이라는 속성을 가진 requset에는 Open Graph를 처리하는 Api로 보내게 한 뒤,
• Api에서는 요청 Url을 분석하여 og태그들을 요청 url에 맞도록 변환한 뒤, html을 string으로 만들고 og태그들을 넣은채 response를 보냅니다.
• 알맞은 og태그로 채워진 response를 가지고 Open Graph를 처리하기 때문에 속도에 대한 이슈없이 Open Gragh를 처리하게 되었습니다.