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" />
@wonsama