티스토리 뷰

Web

오픈그래프 규약 (Open Graph Protocol)

DevES 2016. 8. 26. 02:52

    Open Graph Protocol

     


     

    개요

    Open Graph 프로토콜은 소셜그래프(소셜 네트워크의 특성을 시각화하여 보여줌)상에서 모든 웹페이지가 풍부한 객체가 되도록 만든다. 예를 들어, 페이스북에서 이 프로토콜을 쓰는데 어떤 웹페이지든 간에 다른 페이지와 같은 구조를 가지도록 할 수 있다.

    요즘은 다양하고 다른 기술들과 구조가 존재하고 이들이 같이 쓰일 수 있지만, 소셜 그래프 상에서 어떤 웹페이지든 간에 충분한 정보를 잘 표현해줄 수 있는 기술은 존재하지 않는다. Open Graph는 위의 다양한 기술들을 기반으로 하고 개발자들에게 한 가지만 개발할 수 있도록 도와준다. 기술적 디자인을 결정하는 것을 도와준 Open Graph의 핵심 목표는 개발자에게 단순함을 주는 것이다. 이는 페이스북, 트위터 등에서 인식이 되며(입력 가능) 페이스북 등에서 URL입력 시 잘 인식된다. 또한, 유튜브 등에서 적용되어있다.(출력) 페이스북의 Open Graph Protocol 설계 목표는 페이스북을 넘어 다른 웹페이지에서도 유용하고, 간편한 복사와 붙여넣기를 사용하고, 간단한 마크업과 스키마를 이루는 데 있다.

     

    Basic Metadata

    Open Graph protocol은 특정한 형식의 메타 태그 사용 프로토콜이다. 웹페이지를 그래프 객체로 변화시키려면 우선 해당 페이지에 몇 가지의 metadata를 추가해야 한다. 추가적인 <head> 태그안의 <meta> 태그가 총 4개가 모든 페이지에 꼭 필요로 하다.

    • og:title - 소셜그래프상에서 보여져야 하는 객체의 타이틀
    • og:type - 객체의 타입; 예를 들면 "video.movie", "website", etc. 타입에 따라서 다른 property가 추가적으로 필요할 수도 있음.
    • og:image - 소셜 그래프상에서 객체가 표현해야할 image의 URL
    • og:url - 소셜 그래프상에서 영구적인 ID로 쓰이는 객체의 기본 URL



    이외에도 일반적으로 객체에 있으면 좋은 optional metadata, 부가적으로

    다른 metadata가 필요한 structured properties가 있다. 또한, 하나의 태그가 다양한 값을 가질 수 있다면 이는 Array로 값을 저장할 수 있다.

     

    Example



    각자 전혀 다른 사이트의 url을 입력했지만, 사각형 프레임안에서 미리보기, 페이지 타이틀, 본문, 기본 URL을 출력하는 Interface 구조를 가진다.

     

    Why needs this protocol?

    이 규약이 필요한 이유에 대해서는, 제가 웹을 잘 알지 못해서 정확하게는 감이 안 오지만 Open Graph를 조사하면서 이 규약이 필요한 이유에 대해 알 수 있었습니다. 요즘 웹이 옛날의 HTML과 같은 웹이 아니라 정말 스케일이 어마하게 커졌는데, 각각의 웹사이트들이 다양한 웹 기술을 쓰고 있습니다. 그런데 개발자가 스크래핑과 같은 웹페이지를 이용하는 서비스를 만들 때 테스트 케이스로는 정말 수많은 형태의 구조가 다른 웹페이지가 있을 것이고, 정해진 규약이 없다면 개발자들은 모든 다른 구조에 전부 반응을 해야 하는 지옥이 발생합니다. Open Graph Protocol이란 이런 문제를 막기 위해서 웹페이지에서 자주 쓰이는 공통의 요소를 특정 태그로 정의해놓았고, 개발자가 좀 더 편하게 서비스를 개발할 수 있는 환경을 만들어주는 것 같습니다.  (오픈그래프 규약 중요한걸 놓친게, 데이터를 집어넣는 사람이 메타데이터를 가져가면 원하는 형태로 데이터를 꾸밀수있다는게 장점이다.)

     

    참고자료

     

     

     

     




저작자표시

'Web' 카테고리의 다른 글

가상 호스팅 그리고 Host 헤더(Virtual Hosting and Host Header)  (0) 2016.09.12
HTTP 헤더 및 요청/응답 과정 (HTTP Headers And the Process of Request/Response)  (0) 2016.09.12
웹서버의 이름기반 가상 호스트(Name-based Virtual Host of Web Server like Apache/nginx)  (0) 2016.09.12
HTTP Protocol 에서 request에서 사용하는 USER-AGENT 헤더, 그리고 실제 facebook에서 open graph explorer가 사용하는 facebook의 USER-AGENT  (0) 2016.09.05
웹 크롤링과 웹 스크래핑의 차이 (The Difference between Web Crawling and Web Scraping)  (1) 2016.08.26
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함