opengraph 프로토콜이란 ?

[이미지 : opengraph 를 적용해 본 myfeed ! ]

카카오톡, 텔레그램, 페북메신저 등에서 주소 정보를 포함하고 있는 메시지를 보내면 위와 같이 이미지와 해당 주소의 간단한 설명 및 클릭시 해당 주소로 이동하는 것을 보신적이 있을거에요 ~ 그것을 가능하게 도와주는 것이 바로 open graph protocol 입니다.

opengraph 를 사용하면 자신의 웹사이트를 좀 더 멋지게 꾸밀 수 있습니다. (카톡 보낼때 좀 더 멋져짐 !)

기본 사용 방법

• og:title - 제목
• og:type - 문서 타입
• og:image - 이미지
• og:url - URL 주소

html 에서 head tag 사이에 아래 meta 정보를 알맞게 바꿔서 추가만 해주시면 됩니다.

이후 opengraph를 지원하는 개체(메신저, 웹, 앱)에서 해당 정보를 확인해 보면 위 이미지와 같이 해당 정보를 보실 수 있습니다.

<meta property="og:title" content="MyFeed" />
<meta property="og:description" 
  content="나만의 feed를 만들어보자 !" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://wonsama.github.io/myfeed/" />
<meta property="og:image" content="https://wonsama.github.io/myfeed/myfeed.jpg" />

추가적으로 설정 가능 한 메타데이터

• og:audio - 오디오 정보
• og:description - 상세설명
• og:determiner - 구분자
• og:locale - 언어
• og:locale:alternate - 대체언어
• og:site_name - 사이트명
• og:video - 비디오 정보

설정 예시

<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

참조 링크

• open graph 홈페이지

---